Skip to content

Commit 37558f1

Browse files
alisonmaherchromium-wpt-export-bot
alisonmaher
authored and
chromium-wpt-export-bot
committed
[FlexNG] Flexbox container fragmentation support
This CL adds support for flexbox container fragmentation. Fragmentation of flex items will be handled in follow-up CLs. A number of crashing tests were also fixed as a result of updating a a call from FragmentBlockSize() to FragmentsTotalBlockSize() in the flex layout algorithm. Bug: 660611 Change-Id: Idf66caada3ef807b95917df04e3b3511abf650a3 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3129858 Commit-Queue: Alison Maher <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Cr-Commit-Position: refs/heads/main@{#916944}
1 parent 53960f8 commit 37558f1

6 files changed

+191
-0
lines changed

‎css/css-break/flexbox/flex-container-fragmentation-001.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+
Flex container fragmentation (with no items).
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+
.multicol {
9+
background: red;
10+
column-count: 4;
11+
column-gap: 0px;
12+
height: 100px;
13+
width: 100px;
14+
}
15+
.flex {
16+
background: green;
17+
border: 3px solid green;
18+
display: flex;
19+
padding: 5px;
20+
width: 9px;
21+
}
22+
</style>
23+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
24+
<div class="multicol">
25+
<div class="flex" style="height: 134px;"></div>
26+
<div class="flex" style="height: 234px;"></div>
27+
</div>

‎css/css-break/flexbox/flex-container-fragmentation-002.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Flex container fragmentation with break-inside: avoid.
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+
.multicol {
9+
background: red;
10+
column-count: 4;
11+
column-gap: 0px;
12+
height: 100px;
13+
position: relative;
14+
width: 100px;
15+
}
16+
.flex {
17+
background: green;
18+
break-inside: avoid;
19+
display: flex;
20+
width: 25px;
21+
}
22+
.abs {
23+
background: green;
24+
height: 50px;
25+
position: absolute;
26+
width: 25px;
27+
top: 50px;
28+
left: 50px;
29+
}
30+
</style>
31+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
32+
<div class="multicol">
33+
<div class="flex" style="height: 250px;"></div>
34+
<div class="flex" style="height: 100px;"></div>
35+
<div class="abs"></div>
36+
</div>

‎css/css-break/flexbox/flex-container-fragmentation-003.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Flex container fragmentation with break-before: avoid.
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+
.multicol {
9+
background: red;
10+
column-count: 4;
11+
column-gap: 0px;
12+
height: 100px;
13+
position: relative;
14+
width: 100px;
15+
}
16+
.flex {
17+
background: green;
18+
display: flex;
19+
width: 25px;
20+
}
21+
.abs {
22+
height: 50px;
23+
position: absolute;
24+
width: 25px;
25+
}
26+
</style>
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div class="multicol">
29+
<div class="flex" style="height: 50px;"></div>
30+
<div class="flex" style="height: 50px;"></div>
31+
<div class="flex" style="height: 300px; break-before: avoid;"></div>
32+
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
33+
<div class="abs" style="background: white; top: 0px;"></div>
34+
</div>

‎css/css-break/flexbox/flex-container-fragmentation-004.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Flex container fragmentation with break-after: avoid.
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+
.multicol {
9+
background: red;
10+
column-count: 4;
11+
column-gap: 0px;
12+
height: 100px;
13+
position: relative;
14+
width: 100px;
15+
}
16+
.flex {
17+
background: green;
18+
display: flex;
19+
width: 25px;
20+
}
21+
.abs {
22+
height: 50px;
23+
position: absolute;
24+
width: 25px;
25+
}
26+
</style>
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div class="multicol">
29+
<div class="flex" style="height: 50px;"></div>
30+
<div class="flex" style="height: 50px; break-after: avoid;"></div>
31+
<div class="flex" style="height: 300px;"></div>
32+
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
33+
<div class="abs" style="background: white; top: 0px;"></div>
34+
</div>

‎css/css-break/flexbox/flex-container-fragmentation-005.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<title>
3+
Flex container fragmentation with break-before: column.
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+
.multicol {
9+
background: red;
10+
column-count: 4;
11+
column-gap: 0px;
12+
height: 100px;
13+
position: relative;
14+
width: 100px;
15+
}
16+
.flex {
17+
background: green;
18+
display: flex;
19+
width: 25px;
20+
}
21+
.abs {
22+
height: 50px;
23+
position: absolute;
24+
width: 25px;
25+
}
26+
</style>
27+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
28+
<div class="multicol">
29+
<div class="flex" style="height: 50px;"></div>
30+
<div class="flex" style="height: 50px; break-before: column;"></div>
31+
<div class="flex" style="height: 300px;"></div>
32+
<div class="abs" style="background: green; top: 50px; left: 0px;"></div>
33+
<div class="abs" style="background: white; top: 0px;"></div>
34+
</div>

‎css/css-break/flexbox/flex-container-fragmentation-006.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+
Flex container fragmentation with tall margin.
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-only.html">
7+
<style>
8+
.multicol {
9+
column-count: 4;
10+
column-gap: 0px;
11+
height: 100px;
12+
margin-left: -25px;
13+
width: 100px;
14+
}
15+
.flex {
16+
background: green;
17+
display: flex;
18+
height: 400px;
19+
margin-top: 200px;
20+
width: 25px;
21+
}
22+
</style>
23+
<p>Test passes if there is a filled green square.</p>
24+
<div class="multicol">
25+
<div class="flex"></div>
26+
</div>

0 commit comments

Comments
 (0)