Bug 1507345 [wpt PR 14062] - [css-flex] align-content should apply even when there's just a single line, a=testonly
authorChristian Biesinger <cbiesinger@chromium.org>
Mon, 19 Nov 2018 18:45:25 +0000
changeset 503981 15344e2bbf8a82061d9c236343f8d8994aee08dc
parent 503980 446d46176729063c847603d3821ff1cfa0c59fa1
child 503982 271c901b15036f82873bbd346c6030dce8d6752c
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1507345, 14062, 201409, 641789, 599828, 1323906, 608449
milestone65.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1507345 [wpt PR 14062] - [css-flex] align-content should apply even when there's just a single line, a=testonly Automatic update from web-platform-tests[css-flex] align-content should apply even when there's just a single line In Jan 2015 the spec changed in https://drafts.csswg.org/css-flexbox/#change-201409-align-content-wrapping Change our code accordingly. This effectively reverts commit crrev.com/290823003 and relands crrev.com/2191683003 align-content-wrap-004 is a test for bug 641789, which was a regression from the previous attempt at landing this patch. Bug: 599828 Change-Id: I8de127c19203854922eb23a626cee4de9a772f22 Reviewed-on: https://chromium-review.googlesource.com/c/1323906 Commit-Queue: Christian Biesinger <cbiesinger@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/master@{#608449} -- wpt-commits: 34ecd56f063821c113fd20bcb05b80aafd82d787 wpt-pr: 14062
testing/web-platform/tests/css/css-flexbox/align-content-wrap-001.html
testing/web-platform/tests/css/css-flexbox/align-content-wrap-002.html
testing/web-platform/tests/css/css-flexbox/align-content-wrap-003.html
testing/web-platform/tests/css/css-flexbox/align-content-wrap-004.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-001.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests align-content with single-line flex-wrap: wrap</title>
+<style>
+.default {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    height: 70px;
+    border: 1px solid red;
+    margin: 5px;
+}
+
+.default > div {
+  height: 20px;
+}
+
+.verticalWriting {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    width: 70px;
+    border: 1px solid red;
+    margin: 5px;
+    writing-mode: vertical-lr;
+}
+
+.verticalWriting > div {
+  width: 20px;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+</head>
+<body onload="checkLayout('.default, .verticalWriting'); ">
+<div id=log></div>
+<p>Test that we honor align-content even in single-line flex containers</p>
+<div class="default" style="align-content: flex-start">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
+<div class="default" style="align-content: flex-end">
+<div data-offset-y="50">This text should be at the bottom of its container</div>
+</div>
+<div class="default" style="align-content: center">
+<div data-offset-y="25">This text should be centered in its container</div>
+</div>
+<div class="default" style="align-content: space-between">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
+<div class="default" style="align-content: space-around">
+<div data-offset-y="25">This text should be centered in its container</div>
+</div>
+<div class="default" style="align-content: space-evenly">
+<div data-offset-y="25">This text should be centered in its container</div>
+</div>
+<div class="default" style="align-content: stretch">
+<div data-offset-y="0">This text should be at the top of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: flex-start">
+<div data-offset-x="0">This text should be at the left of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: flex-end">
+<div data-offset-x="50">This text should be at the right of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: center">
+<div data-offset-x="25">This text should be centered in its container</div>
+</div>
+<div class="verticalWriting" style="align-content: space-between">
+<div data-offset-x="0">This text should be at the left of its container</div>
+</div>
+<div class="verticalWriting" style="align-content: space-around">
+<div data-offset-x="25">This text should be centered in its container</div>
+</div>
+<div class="verticalWriting" style="align-content: stretch">
+<div data-offset-x="0">This text should be at the left of its container</div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-002.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
+<style>
+.flex-horizontal {
+    width:600px;
+    display:flex;
+    height:100px;
+    background:gray;
+    margin-bottom:100px;
+}
+.flex-vertical {
+    width:100px;
+    display:flex;
+    flex-direction: column;
+    height:600px;
+    background:gray;
+    margin-top:200px;
+    margin-bottom:100px;
+}
+.item-horizontal {
+    width:150px;
+    background:yellow;
+    margin:10px;
+    flex:none;
+}
+.item-vertical {
+    height:150px;
+    background:yellow;
+    margin:10px;
+    flex:none;
+}
+.content1-horizontal {
+    width:100px;
+    height:150px;
+    background:red;
+}
+.content2-horizontal {
+    width:100px;
+    height:100px;
+    background:red;
+}
+.content3-horizontal {
+    width:100px;
+    height:50px;
+    background:red;
+}
+.content1-vertical {
+    width:150px;
+    height:100px;
+    background:red;
+}
+.content2-vertical {
+    width:100px;
+    height:100px;
+    background:red;
+}
+.content3-vertical {
+    width:50px;
+    height:100px;
+    background:red;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flex-horizontal, .flex-vertical');">
+<div id=log></div>
+<p>Test for crbug.com/362848: Flex box word-wrap is not adhering to spec</p>
+<div class="flex-horizontal">
+    <div class="item-horizontal" data-expected-height="80"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="80"><div class="content2-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="80"><div class="content3-horizontal"></div></div>
+</div>
+
+<div class="flex-horizontal" style="flex-wrap:wrap;">
+    <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
+</div>
+
+<div class="flex-horizontal" style="flex-wrap:wrap;">
+    <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content3-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content1-horizontal"></div></div>
+    <div class="item-horizontal" data-expected-height="150"><div class="content2-horizontal"></div></div>
+</div>
+
+<div class="flex-vertical">
+    <div class="item-vertical" data-expected-width="80"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="80"><div class="content2-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="80"><div class="content3-vertical"></div></div>
+</div>
+
+<div class="flex-vertical" style="flex-wrap:wrap;">
+    <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
+</div>
+
+<div class="flex-vertical" style="flex-wrap:wrap;">
+    <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content3-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content1-vertical"></div></div>
+    <div class="item-vertical" data-expected-width="150"><div class="content2-vertical"></div></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-003.html
@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" />
+<title>css-flexbox: Tests align-content with flex-wrap: wrap</title>
+<style>
+.flexbox {
+    display: flex;
+    background-color: #aaa;
+    position: relative;
+    flex-wrap: wrap;
+}
+
+.horizontal {
+    width: 200px;
+    height: 120px;
+}
+.horizontal > div {
+    min-height: 20px;
+}
+.horizontal > :nth-child(1) {
+    width: 100px;
+    min-height: 10px;
+}
+.horizontal > :nth-child(2) {
+    width: 100px;
+}
+.horizontal > :nth-child(3) {
+    width: 200px;
+}
+.horizontal > :nth-child(4) {
+    width: 50px;
+}
+
+.vertical-rl {
+    writing-mode: vertical-rl;
+    width: 120px;
+    height: 20px;
+}
+.vertical-rl > div {
+    min-width: 20px;
+}
+.vertical-rl > :nth-child(1) {
+    height: 10px;
+    min-width: 10px;
+}
+.vertical-rl > :nth-child(2) {
+    height: 10px;
+}
+.vertical-rl > :nth-child(3) {
+    height: 20px;
+}
+.vertical-rl > :nth-child(4) {
+    height: 5px;
+}
+
+.flexbox :nth-child(1) {
+    background-color: lightblue;
+}
+.flexbox :nth-child(2) {
+    background-color: lightgreen;
+}
+.flexbox :nth-child(3) {
+    background-color: pink;
+}
+.flexbox :nth-child(4) {
+    background-color: yellow;
+}
+</style>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<body onload="checkLayout('.flexbox')">
+<div id=log></div>
+<p>Test to make sure that align-content works properly.</p>
+
+<div data-expected-height="120" class="flexbox horizontal">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end">
+  <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: center">
+  <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly">
+  <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around">
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div>
+</div>
+
+<div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div>
+  <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div>
+</div>
+
+<!-- Negative overflow goes out the top. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px">
+  <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px">
+  <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should be the same as flex-start. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
+  <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+  <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div>
+</div>
+
+<!-- Stretch should only grow, not shrink. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div>
+  <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div>
+</div>
+
+<!-- 0 lines should not crash. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
+</div>
+
+<!-- 1 line should not crash. -->
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div>
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px">
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px">
+  <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div>
+</div>
+<div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div>
+</div>
+
+
+<div data-expected-width="120" class="flexbox vertical-rl">
+  <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start">
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end">
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center">
+  <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between">
+  <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around">
+  <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly">
+  <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch">
+  <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div>
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div>
+</div>
+
+<!-- Negative overflow goes out the right. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;">
+  <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;">
+  <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should be the same as flex-start. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;">
+  <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- If we overflow, we should true center. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;">
+  <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- Stretch should only grow, not shrink. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div>
+  <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div>
+  <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div>
+</div>
+
+<!-- 0 lines should not crash. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
+</div>
+
+<!-- 1 line should not crash. -->
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px">
+  <div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div>
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px">
+  <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div>
+</div>
+<div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px">
+  <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/align-content-wrap-004.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="author" title="Google LLC" href="http://www.google.com" />
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing" />
+<title>css-flexbox: Tests that we size items in a wrapping column flexbox as fit-content</title>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
+
+<style>
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100px;
+  line-height: 1;
+}
+.flex > div {
+  min-height: 0;
+  background: green;
+}
+.flex * {
+  vertical-align: top;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="flex">
+  <div style="align-self: stretch;">
+    <div style="display: inline-block; width: 20px; height: 40px;"></div>
+  </div>
+  <div style="height: 60px;">
+    <div style="display: inline-block; height: 15px; width: 20px;"></div>
+    <div style="display: inline-block; height: 15px; width: 100px;"></div>
+    <div style="display: inline-block; height: 15px; width: 100px;"></div>
+    <div style="display: inline-block; height: 15px; width: 100px;"></div>
+  </div>
+</div>