Skip to content

Commit 6cf95e9

Browse files
alisonmaherchromium-wpt-export-bot
alisonmaher
authored and
chromium-wpt-export-bot
committed
[FlexNG] Don't truncate margins for flex items
We had resolved to not truncate margins in the case of algorithms that handle alignment: w3c/csswg-drafts#6812. This CL implements this by subtracting out the consumed block size from the offset rather than setting it to zero when an item breaks before. This should also address handling alignment globally for flex items, but tests for alignment will follow in a separate CL to make the review simpler. multi-line-row-flex-fragmentation-016.html is now passing as a result. Note: How expansion is calculated at forced breaks has been updated, so some tests involving alignment and breaks were updated to match the new behavior. Bug: 660611 Change-Id: Idf72b721a0dd186d110869c876f709dd600c1a8b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3499085 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#977727}
1 parent 2026041 commit 6cf95e9

12 files changed

+251
-3
lines changed

‎css/css-break/flexbox/multi-line-row-flex-fragmentation-016.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
<div style="margin-top: 10px; width: 20px; position: relative;">
3131
<div style="contain: size; width: 20px; height: 80px;"></div>
3232
<div style="contain: size; width: 20px; height: 40px;"></div>
33-
<div style="position: absolute; top: -60px; width: 20px; height: 60px; background: green;"></div>
33+
<div style="position: absolute; top: -70px; width: 20px; height: 70px; background: green;"></div>
3434
</div>
3535
<div style="height: 100px; width: 20px;"></div>
3636
<div style="height: 60px; width: 20px;"></div>

‎css/css-break/flexbox/multi-line-row-flex-fragmentation-029.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,20 @@
1212
background: green;
1313
align-content: space-between;
1414
}
15+
.abs {
16+
position: absolute;
17+
height: 25px;
18+
width: 50%;
19+
}
1520
</style>
1621
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
1722
<div style="width: 100px; height: 100px; columns: 2; column-gap: 0; column-fill: auto; position: relative; background: red;">
23+
<div class="abs" style="left: 100px; background: white;"></div>
1824
<div id="flex">
1925
<div style="height: 25px; width: 50px;"></div>
2026
<div style="height: 10px; width: 25px; align-self: center;"></div>
2127
<div style="height: 25px; width: 25px; break-before: column;"></div>
2228
<div style="height: 50px; width: 50px; background: green;"></div>
2329
</div>
30+
<div class="abs" style="background: green;"></div>
2431
</div>

‎css/css-break/flexbox/multi-line-row-flex-fragmentation-031.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@
2525
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
2626
<div style="width:100px; height:100px; background:red;">
2727
<div style="width: 100px; columns: 2; column-gap: 0; position: relative;">
28+
<div class="abs" style="height: 15px; left: 50px;"></div>
29+
<div class="abs" style="height: 15px; top: 25px; left: 50px;"></div>
2830
<div id="flex">
2931
<div style="height: 5px;"></div>
3032
<div style="height: 10px; break-before: column;"></div>
3133
<div style="height: 5px;">
32-
<div style="height: 75px; width: 50px; background: green;"></div>
34+
<div style="height: 60px; width: 50px; background: green;"></div>
3335
</div>
3436
</div>
3537
<div class="abs" style="height: 50px;"></div>
36-
<div class="abs" style="height: 15px; top: 10px; left: 50px;"></div>
3738
</div>
3839
</div>

‎css/css-break/flexbox/multi-line-row-flex-fragmentation-043.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Multi-line row flex fragmentation: Tall margins.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
flex-wrap: wrap;
11+
position: relative;
12+
}
13+
#flex > div {
14+
width: 10px;
15+
background: green;
16+
}
17+
</style>
18+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
19+
<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;">
20+
<div id="flex">
21+
<div style="margin-top: 50px; height: 100px;"></div>
22+
<div style="margin-top: 100px; height: 50px;"></div>
23+
<div style="margin-top: 100px; height: 250px;"></div>
24+
<div style="margin-top: 50px; height: 300px;"></div>
25+
<div style="position: absolute; height: 50px; width: 20px;"></div>
26+
<div style="position: absolute; height: 50px; width: 30px; top: 50px; left: 10px;"></div>
27+
<div style="position: absolute; height: 50px; left: 40px;"></div>
28+
</div>
29+
</div>

‎css/css-break/flexbox/multi-line-row-flex-fragmentation-044.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Multi-line row flex fragmentation: Tall margins with forced break.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
flex-wrap: wrap;
11+
position: relative;
12+
}
13+
#flex > div {
14+
width: 10px;
15+
background: green;
16+
}
17+
</style>
18+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
19+
<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;">
20+
<div id="flex">
21+
<div style="margin-top: 50px; height: 100px;"></div>
22+
<div style="margin-top: 100px; height: 50px; break-after: avoid;"></div>
23+
<div style="margin-top: 50px; height: 250px;"></div>
24+
<div style="margin-top: 100px; height: 200px; break-before: column;"></div>
25+
<div style="position: absolute; height: 50px; width: 20px;"></div>
26+
<div style="position: absolute; height: 50px; width: 30px; top: 50px; left: 10px;"></div>
27+
<div style="position: absolute; height: 50px; top: 200px;"></div>
28+
<div style="position: absolute; height: 100px; top: 200px; left: 10px;"></div>
29+
</div>
30+
</div>

‎css/css-break/flexbox/multi-line-row-flex-fragmentation-045.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Multi-line row flex fragmentation: Negative margins.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
flex-wrap: wrap;
11+
}
12+
#flex > div {
13+
margin-top: -100px;
14+
height: 100px;
15+
width: 20px;
16+
break-before: column;
17+
background: green;
18+
}
19+
</style>
20+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
21+
<div style="height: 100px; width: 100px; background: red; position: absolute">
22+
<div style="margin-top: 100px; width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto;">
23+
<div id="flex">
24+
<div></div>
25+
<div></div>
26+
<div></div>
27+
<div></div>
28+
<div></div>
29+
</div>
30+
</div>
31+
</div>

‎css/css-break/flexbox/single-line-column-flex-fragmentation-033.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Single-line column flex fragmentation: Tall margins.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
flex-direction: column;
11+
position: relative;
12+
}
13+
#flex > div {
14+
width: 20px;
15+
background: green;
16+
}
17+
</style>
18+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
19+
<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;">
20+
<div style="height: 50px; width: 20px; background: green;"></div>
21+
<div id="flex">
22+
<div style="height: 100px; margin-top: 50px;"></div>
23+
<div style="height: 150px; margin-top: 150px;"></div>
24+
<div style="position: absolute; height: 50px;"></div>
25+
<div style="position: absolute; height: 150px; top: 150px;"></div>
26+
</div>
27+
</div>

‎css/css-break/flexbox/single-line-column-flex-fragmentation-034.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Single-line column flex fragmentation: Tall margins with forced break.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
flex-direction: column;
11+
position: relative;
12+
}
13+
#flex > div {
14+
width: 20px;
15+
background: green;
16+
}
17+
</style>
18+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
19+
<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;">
20+
<div id="flex">
21+
<div style="height: 50px;"></div>
22+
<div style="height: 50px; margin-top: 100px; break-before: column;"></div>
23+
<div style="height: 200px; margin-top: 50px;"></div>
24+
<div style="position: absolute; height: 150px; top: 50px;"></div>
25+
<div style="position: absolute; height: 50px; top: 250px;"></div>
26+
</div>
27+
</div>

‎css/css-break/flexbox/single-line-column-flex-fragmentation-035.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Single-line column flex fragmentation: Negative margins.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
</style>
13+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
14+
<div style="height: 100px; width: 100px; background: red; position: absolute">
15+
<div style="margin-top: 150px; margin-left: -40px; width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto;">
16+
<div id="flex">
17+
<div style="height: 150px; width: 20px;"></div>
18+
<div style="height: 100px; margin-top: -150px; width: 100px; break-before: column; background: green;"></div>
19+
</div>
20+
</div>
21+
</div>

‎css/css-break/flexbox/single-line-row-flex-fragmentation-023.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Single-line row flex fragmentation: Tall margins.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination">
6+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
7+
<style>
8+
#flex {
9+
display: flex;
10+
position: relative;
11+
}
12+
#flex > div {
13+
width: 10px;
14+
background: green;
15+
}
16+
</style>
17+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
18+
<div style="width: 100px; height: 100px; columns: 5; column-gap: 0; column-fill: auto; background: red;">
19+
<div id="flex">
20+
<div style="margin-top: 250px; height: 250px;"></div>
21+
<div style="margin-top: 100px; height: 100px;"></div>
22+
<div style="position: absolute; height: 100px; width: 30px;"></div>
23+
<div style="position: absolute; height: 50px; top: 200px;"></div>
24+
<div style="position: absolute; height: 300px; top: 200px; left: 10px;"></div>
25+
</div>
26+
</div>

0 commit comments

Comments
 (0)