[FlexNG] Row item container separation
While working on CL:3575366, I noticed that we were using
|broke_before_row| instead of |*broke_before_row| when calculating
if a flex row item has container separation. However, updating this
caused the test added in CL:3575366 to fail.
The reason the test failed was the first item no longer had container
separation after it broke before the first time, causing the
entire flex container to break before.
To fix this, update CalculateBreakAppealBefore() to no longer set
|breakable_at_start_of_container| to false for row items. This allows
the first item in the test to break into the next outer multicol
fragmentainer rather than forcing the whole container into the next
fragmentainer.
multi-line-row-flex-fragmentation-039.html was updated based on the
new behavior.
Bug: 660611
Change-Id: Ie92f33de1948ec2d542c6e446091d183bac30489
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3576892
Reviewed-by: Morten Stenshorne <mstensho@chromium.org>
Commit-Queue: Alison Maher <almaher@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#990481}
diff --git a/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html b/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html
index 4d33426..6ef65db 100644
--- a/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html
+++ b/css/css-break/flexbox/multi-line-row-flex-fragmentation-039.html
@@ -11,7 +11,6 @@
position: relative;
}
#flex > div {
- height: 100px;
width: 100%;
background: green;
}
@@ -19,13 +18,13 @@
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="columns: 2; column-fill: auto; column-gap: 0; width: 100px; height: 100px; background: red;">
<div style="height: 50px; background: green;"></div>
- <div style="columns: 2; column-fill: auto; column-gap: 0;">
+ <div style="columns: 5; column-fill: auto; column-gap: 0;">
<div id="flex">
- <div style="position: absolute; left: 25px; height: 50px;"></div>
- <div style="height: 50px;"></div>
- <div style="width: 50%;"></div>
- <div style="width: 50%; break-inside: avoid;"></div>
- <div></div>
+ <div style="position: absolute; left: 45px; height: 50px; width: 50%"></div>
+ <div style="height: 200px;"></div>
+ <div style="width: 50%; height: 250px;"></div>
+ <div style="width: 50%; height: 200px; break-inside: avoid;"></div>
+ <div style="height: 300px;"></div>
</div>
</div>
</div>
