[FlexNG] MinBlockSizeShouldEncompassIntrinsicSize update

Update the MinBlockSizeShouldEncompassIntrinsicSize() definition to more accurately handle flex items during fragmentation. Credit to ikilpatrick@ for figuring out the correct logic. A couple of row specific tests were updated to match the new behavior, and a bunch of column specific tests were added to check various combinations of use cases. Bug: 660611 Change-Id: I1d9dded7189ab2d7b0c8c3e60c7f24e9c711212b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3600998 Commit-Queue: Alison Maher <[email protected]> Reviewed-by: Ian Kilpatrick <[email protected]> Cr-Commit-Position: refs/heads/main@{#996810}
web-platform-tests · Apr 27, 2022 · a4b4e67 · a4b4e67
1 parent bd235e3
commit a4b4e67
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 2 deletions.
diff --git a/css/css-break/flexbox/multi-line-column-flex-fragmentation-048.html b/css/css-break/flexbox/multi-line-column-flex-fragmentation-048.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item that shrinks *doesn't* expand.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column; flex-wrap: wrap; height: 200px;">
+    <div style="background: green; flex-basis: fit-content; height: 10px; width: 25px;">
+      <div style="contain: size; width: 25px; height: 50px;"></div>
+      <div style="contain: size; width: 25px; height: 100px;"></div>
+    </div>
+    <div style="background: green; width: 25px; height: 50px;"></div>
+    <div style="background: green; flex-basis: min-content; height: 10px; width: 25px;">
+      <div style="contain: size; width: 25px; height: 50px;"></div>
+      <div style="contain: size; width: 25px; height: 100px;"></div>
+    </div>
+    <div style="background: green; width: 25px; height: 50px;"></div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/multi-line-column-flex-fragmentation-049.html b/css/css-break/flexbox/multi-line-column-flex-fragmentation-049.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with an indefinite flex-basis expands if the
+  container hieght is auto.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column;">
+    <div style="background: green; flex-basis: content; height: 10px;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-050.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-050.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with an indefinite flex-basis expands if the
+  container height is auto.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column;">
+    <div style="background: green; flex-basis: content; height: 10px;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-051.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-051.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with a definite flex-basis *doesn't* expand.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column;">
+    <div style="background: green; flex-basis: 10px; height: 10px;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+    <div style="background: green; width: 50px; height: 190px;"></div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-052.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-052.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with an definite flex-basis but an indefinite height expands.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column;">
+    <div style="background: green; flex-basis: 10px;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-053.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-053.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item that can't shrink and has a definite flex-basis, an
+  indefinite height, and a non-auto min-height *doesn't* expand.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column; height: 100px;">
+    <div style="background: green; flex-basis: 10px; min-height: 10px;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+    <div style="background: green; width: 50px; height: 190px;"></div>
+  </div>
+  <div style="background: green; width: 50px; height: 100px;"></div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-054.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-054.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with an definite flex-basis, an indefinite height, and
+  a non-auto min-height does expand.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column;">
+    <div style="background: green; flex-basis: 10px; min-height: 10px;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-055.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-055.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with an definite flex-basis, an indefinite height, and
+  can't shrink does expand.
+</title>
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; background: red;">
+  <div style="display: flex; flex-direction: column;">
+    <div style="background: green; flex-basis: 10px; justify-self: flex-start;">
+      <div style="contain: size; width: 50px; height: 50px;"></div>
+      <div style="contain: size; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-row-flex-fragmentation-008.html b/css/css-break/flexbox/single-line-row-flex-fragmentation-008.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <title>
-  Tests that a flex-item with a fixed block-size container grows due to fragmentation.
+  Tests that a flex-item with a fixed block-size container *doesn't* grow due to fragmentation
+  if stretched.
 </title>
 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
@@ -12,4 +13,5 @@
       <div style="display: inline-block; width: 50px; height: 100px;"></div>
     </div>
   </div>
+  <div style="background: green; width: 50px; height: 100px;"></div>
 </div>
diff --git a/css/css-break/flexbox/single-line-row-flex-fragmentation-009.html b/css/css-break/flexbox/single-line-row-flex-fragmentation-009.html
@@ -8,7 +8,7 @@
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
 <div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; background: red;">
   <div style="display: flex; background: green;">
-    <div style="display: flex;">
+    <div style="display: flex; align-self: flex-start;">
       <div style="line-height: 0;">
         <div style="display: inline-block; width: 50px; height: 50px;"></div>
         <div style="display: inline-block; width: 50px; height: 100px;"></div>