Visitar URL original
[FlexNG] Don't truncate margins for flex items · web-platform-tests/wpt@59cb941 · GitHub
Skip to content

Commit 59cb941

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
1 parent c0e87c4 commit 59cb941

12 files changed

Lines changed: 251 additions & 3 deletions

‎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)