[FlexNG] Set MinSizeShouldEncompassIntrinsicSize

alisonmaher · chromium-wpt-export-bot · commit dc91bc44ac13 · 2021-11-12T18:13:07.000-08:00
SetMinBlockSizeShouldEncompassIntrinsicSize() on a flex item to allow the item to grow as a result of fragmentation. In order for this flag to have an effect on flex items inside a column flex container, we also had to SetIsFixedBlockSize() to false. This will be used to expand the flex lines if needed. Bug: 660611 Change-Id: I8890cc54262c14664706b9cb9efb141a453dceff Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3276791 Commit-Queue: Alison Maher <almaher@microsoft.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Cr-Commit-Position: refs/heads/main@{#941410}
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-007.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-007.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item grows due to fragmentation.
+</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="line-height: 0; background: green;">
+      <div style="display: inline-block; width: 50px; height: 50px;"></div>
+      <div style="display: inline-block; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-008.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-008.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>
+  Tests that a flex-item with a fixed block-size container grows due to fragmentation.
+</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="line-height: 0; background: green;">
+      <div style="display: inline-block; width: 50px; height: 50px;"></div>
+      <div style="display: inline-block; width: 50px; height: 100px;"></div>
+    </div>
+  </div>
+</div>
