[FlexNG] Forced break detection

alisonmaher · chromium-wpt-export-bot · commit 07201da519dd · 2022-03-21T09:11:54.000-07:00
We perform extra logic for forced breaks to properly handle top margins. However, we previously looked at HasForcedBreak(), which is also true if a descendant has a forced break. We only want to perform this logic if the current child break was forced. LastChildBreakToken() was added to detect this. I also noticed that we may consider an item that had previously broken before to have container separation because its previous sibling had overflow. Update the container separation logic for columns to always check if the current item previously broke. Bug: 660611 Change-Id: I08ae49dd88062afb0637f8f83be42879f774adab Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3533844 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#983330}
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-037.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-037.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>
+  Single-line column flex fragmentation: nested forced break with overflow.
+</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-fill: auto; column-gap: 0; background: red;">
+  <div style="display: flex; flex-flow: column;">
+    <div style="height: 100px; width: 50px; background: green;">
+      <div style="height: 50px; width: 50px; background: green;"></div>
+      <div style="height: 10px; width: 50px; background: green; break-before: column;"></div>
+    </div>
+    <div style="height: 50px; width: 50px; background: green; margin-top: 10px;"></div>
+    <div style="height: 40px; width: 50px; background: green;"></div>
+  </div>
+</div>
diff --git a/css/css-break/flexbox/single-line-column-flex-fragmentation-038.html b/css/css-break/flexbox/single-line-column-flex-fragmentation-038.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>
+  Single-line column flex fragmentation: forced breaks with overflow.
+</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-fill: auto; column-gap: 0; background: red;">
+  <div style="display: flex; flex-flow: column;">
+    <div style="height: 100px; width: 50px; background: green;">
+      <div style="height: 50px; width: 50px; background: green;"></div>
+      <div style="height: 10px; width: 50px; background: green; break-before: column;"></div>
+    </div>
+    <div style="height: 50px; width: 50px; background: green; margin-top: 10px; break-before: column;"></div>
+    <div style="height: 40px; width: 50px; background: green;"></div>
+  </div>
+</div>
