[css-flex] New max-content width algorithm for column wrap flexboxes

min-content width algorithm is unchanged, which matches old behavior and what was suggested on w3c/csswg-drafts#6777, but I'm reserving the right to modify it to reduce the frequency of overflow. Bug: 240765 Change-Id: I91a6180f04e9514eec8d3a1ea2fdbda24b598096
web-platform-tests · Aug 10, 2022 · 100883c · 100883c
1 parent 45ec8cb
commit 100883c
Show file tree

Hide file tree

Showing 9 changed files with 316 additions and 0 deletions.
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-001.html b/css/css-flexbox/intrinsic-size/col-wrap-001.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="column-wrap container's max-content width is big enough that items don't overflow when the container has fixed height and items have fixed width and height. Old algorithm gave max-content width of 50px." />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    width: 50px;
+    flex: 0 0 100px
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-flow: column wrap; height: 100px; width: max-content; background: green;"
+  class=flex>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-002.html b/css/css-flexbox/intrinsic-size/col-wrap-002.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="column-wrap container's max-content width is big enough that items don't overflow when the container has indefinite height but fixed max-height and items have fixed width and height. Old algorithm gave max-content width of 50px." />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    width: 50px;
+    flex: 0 0 100px
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-flow: column wrap; max-height: 100px; width: max-content; background: green;"
+  class=flex>
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-003.html b/css/css-flexbox/intrinsic-size/col-wrap-003.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="Cross-axis borders are accounted for when determining inline content sizes of column-wrap flexboxes." />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    width: 40px;
+    flex: 0 0 100px;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-flow: column wrap; max-height: 100px; width: max-content; background: green; padding-left: 5px; border-left: 9px solid green; border-right: 6px solid green;">
+  <div class="item"></div>
+  <div class="item"></div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-004.html b/css/css-flexbox/intrinsic-size/col-wrap-004.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="Item with width:100% doesn't contribute to max-content size but does get 100px width after final layout. The item also overflows the container." />
+
+<style>
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    flex: 0 0 100px;
+    outline: 1px solid;
+  }
+</style>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green; position: relative;"
+  data-expected-width="100">
+  <div class="item" style="width: 100px;"></div>
+  <div class="item" style="width: 100%;" data-expected-width="100"
+    data-offset-x="100"></div>
+</div>
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-005.html b/css/css-flexbox/intrinsic-size/col-wrap-005.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+<meta name="assert"
+  content="The item still has sufficient available size at the time fit-content is resolved. (A bug in the code could cause the right-most item to have a width of 75px.)">
+
+<style>
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    flex: 0 0 100px;
+    outline: 1px solid;
+  }
+
+  .grandchild {
+    width: 75px;
+    float: left;
+  }
+</style>
+
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green; position: relative;"
+  data-expected-width="250">
+  <div class="item" style="width: 100px;"></div>
+  <div class="item" style="width: fit-content;" data-expected-width="150"
+    data-offset-x="100">
+    <!-- This item has min-content=75 and max-content=150. -->
+    <div class="grandchild"></div>
+    <div class="grandchild"></div>
+  </div>
+</div>
+
+<script>
+  checkLayout('body > div');
+</script>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-006.html b/css/css-flexbox/intrinsic-size/col-wrap-006.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="flex item order is accounted for when determining inline content sizes of column-wrap flexboxes.">
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    width: 50px;
+    flex: 0 0 auto;
+  }
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<!--  An implementation that ignored order could make the max-content size of this flexbox 150px. -->
+<div
+  style="display: flex; flex-flow: column wrap; width: max-content; height: 100px; background: green;">
+  <div class="item" style="height: 90px; order: 0;"></div>
+  <div class="item" style="height: 100px; order: 2;"></div>
+  <div class="item" style="height: 10px; order: 1;"></div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-007.html b/css/css-flexbox/intrinsic-size/col-wrap-007.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="column wrap max-content width calculation works for wrap-reverse containers" />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    flex: 0 0 100px;
+  }
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-flow: column wrap-reverse; height: 100px; width: max-content; background: green;">
+  <div class="item" style="width: 30px;"></div>
+  <div class="item" style="width: 70px;"></div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-008.html b/css/css-flexbox/intrinsic-size/col-wrap-008.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="column wrap max-content width calculation works for align-content:space-around containers" />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+
+  .item {
+    /* Remove min-height so we don't have to think about it. */
+    min-height: 0px;
+    flex: 0 0 100px;
+  }
+
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+</p>
+
+<div id=reference-overlapped-red></div>
+
+<div
+  style="display: flex; flex-flow: column wrap; height: 100px; width: max-content; align-content: space-around; background: green;">
+  <div class="item" style="width: 30px;"></div>
+  <div class="item" style="width: 70px;"></div>
+</div>
diff --git a/css/css-flexbox/intrinsic-size/col-wrap-009.html b/css/css-flexbox/intrinsic-size/col-wrap-009.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<meta name="assert"
+  content="column wrap container's intrinsic width changes when its height changes." />
+
+<style>
+  #reference-overlapped-red {
+    position: absolute;
+    background-color: red;
+    width: 100px;
+    height: 100px;
+    z-index: -1;
+  }
+  span {
+    width: 50px;
+    height: 100px;
+  }
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.
+<div id=reference-overlapped-red></div>
+
+<div style="display: flex; height: 200px;" id="target">
+  <div
+    style="display: flex; flex-flow: column wrap; width: max-content; background: green;">
+    <span></span>
+    <span></span>
+  </div>
+</div>
+
+<script>
+  target.offsetLeft;
+  // With original height of 200px, both items fit in one flex line.
+  // With height 100px, there are two lines and the items are side-by-side.
+  target.style.height = "100px";
+</script>