Skip to content

Commit fbb56f5

Browse files
Javier Contreraschromium-wpt-export-bot
Javier Contreras
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Assign flex gap decoration values for reversed flex
Assign listed and repeated flex gap-decoration values according to flex placement order when `flex-direction` or `flex-wrap` reverses placement, matching the CSSWG resolution in w3c/csswg-drafts#14156. By default, placement order is what we use to assign values in grid, multicol, and grid lanes. The special case handling is needed for reversed flex and soon for reversed column fill for grid-lanes. Gap geometry remains in logical paint order. Layout records reversal metadata, while paint maps each stored gap to its placement-order value index. So this CL adds an accessor class (`GapDataListValueAccessor`) that will be used instead of the forward-only iterator when assigning gap decoration values in the reversal cases. In that same file, we make some of the logic previously used by `BuildRegions` into a helper function so we can reuse it. In the common case, time complexity for assigning values does not change. Without reversal, the time complexity is O(A + G), where A is the number of entries in the (non-expanded) list i.e. `rule-color: red, green, blue` and G is the number of gaps in the axis. With reversals, we add an extra logarithmic factor but ONLY for cases where there are fixed integer repeaters `red, repeat(3, blue green), blue`. In these cases the complexity is O(A+GlogA), but even then, usually A will be small (in the aforementioned example it is 3). Because of this seemingly small time complexity penalty, I will investigate getting rid of the iterator entirely and just using the accessor, if after profiling we see that the difference is not significant. We add WPT coverage for direction reversal, wrap reversal, RTL interaction, uneven flex lines, and `repeat(auto, ...)`. As a small refactor, `GapDataListIterator` now stores the shared `RegionSlotCounts` directly, and we add a helper in `GapData` so the iterator and accessor can reuse logic. Change-Id: I559bcf0e294a233431636d554e29985476a26a70 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8248120 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Auto-Submit: Javier Contreras <javiercon@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1683498}
1 parent 853c3ce commit fbb56f5

16 files changed

Lines changed: 660 additions & 0 deletions

‎css/css-gaps/flex/flex-gap-decorations-auto-repeat-flex-direction-reverse-ref.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
3+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#lists-repeat">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
5+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
6+
<style>
7+
body {
8+
margin: 0px;
9+
}
10+
.section {
11+
position: relative;
12+
}
13+
.flex {
14+
display: flex;
15+
gap: 10px;
16+
width: 350px;
17+
}
18+
.flex > * {
19+
background: lightgray;
20+
width: 50px;
21+
height: 50px;
22+
}
23+
.col-rule {
24+
position: absolute;
25+
width: 10px;
26+
height: 50px;
27+
top: 0px;
28+
}
29+
</style>
30+
<div class="section">
31+
<div class="col-rule" style="left: 50px; background: purple;"></div>
32+
<div class="col-rule" style="left: 110px; background: orange;"></div>
33+
<div class="col-rule" style="left: 170px; background: blue;"></div>
34+
<div class="col-rule" style="left: 230px; background: green;"></div>
35+
<div class="col-rule" style="left: 290px; background: red;"></div>
36+
<div class="flex">
37+
<div></div><div></div><div></div><div></div><div></div><div></div>
38+
</div>
39+
</div>

‎css/css-gaps/flex/flex-gap-decorations-auto-repeat-flex-direction-reverse.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: a column-rule-color list containing a repeat(auto,
4+
...) segment is expanded in placement order, then assigned to gaps in
5+
placement order, when flex-direction is row-reverse.
6+
</title>
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
8+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#lists-repeat">
9+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
10+
<link rel="match" href="flex-gap-decorations-auto-repeat-flex-direction-reverse-ref.html">
11+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
12+
<style>
13+
body {
14+
margin: 0px;
15+
}
16+
.flex {
17+
display: flex;
18+
flex-direction: row-reverse;
19+
gap: 10px;
20+
width: 350px;
21+
}
22+
.flex > * {
23+
background: lightgray;
24+
width: 50px;
25+
height: 50px;
26+
}
27+
.flex {
28+
column-rule-color: red, repeat(auto, green, blue, orange), purple;
29+
column-rule-style: solid;
30+
column-rule-width: 10px;
31+
}
32+
</style>
33+
<div class="flex">
34+
<div></div><div></div><div></div><div></div><div></div><div></div>
35+
</div>

‎css/css-gaps/flex/flex-gap-decorations-integer-repeat-flex-direction-reverse-ref.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
4+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#lists-repeat">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
6+
<style>
7+
body {
8+
margin: 0px;
9+
}
10+
.section {
11+
position: relative;
12+
}
13+
.flex {
14+
display: flex;
15+
gap: 10px;
16+
width: 410px;
17+
}
18+
.flex > * {
19+
background: lightgray;
20+
width: 50px;
21+
height: 50px;
22+
}
23+
.col-rule {
24+
position: absolute;
25+
width: 10px;
26+
height: 50px;
27+
top: 0px;
28+
}
29+
</style>
30+
<div class="section">
31+
<div class="col-rule" style="left: 50px; background: purple;"></div>
32+
<div class="col-rule" style="left: 110px; background: blue;"></div>
33+
<div class="col-rule" style="left: 170px; background: green;"></div>
34+
<div class="col-rule" style="left: 230px; background: blue;"></div>
35+
<div class="col-rule" style="left: 290px; background: green;"></div>
36+
<div class="col-rule" style="left: 350px; background: red;"></div>
37+
<div class="flex">
38+
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
39+
</div>
40+
</div>

‎css/css-gaps/flex/flex-gap-decorations-integer-repeat-flex-direction-reverse.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: a column-rule-color list containing an integer
4+
repeat() segment is expanded in placement order, then assigned to gaps in
5+
placement order, when flex-direction is row-reverse.
6+
</title>
7+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
8+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
9+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#lists-repeat">
10+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
11+
<link rel="match" href="flex-gap-decorations-integer-repeat-flex-direction-reverse-ref.html">
12+
<style>
13+
body {
14+
margin: 0px;
15+
}
16+
.flex {
17+
display: flex;
18+
flex-direction: row-reverse;
19+
gap: 10px;
20+
width: 410px;
21+
}
22+
.flex > * {
23+
background: lightgray;
24+
width: 50px;
25+
height: 50px;
26+
}
27+
.flex {
28+
column-rule-color: red, repeat(2, green, blue), purple;
29+
column-rule-style: solid;
30+
column-rule-width: 10px;
31+
}
32+
</style>
33+
<div class="flex">
34+
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
35+
</div>

‎css/css-gaps/flex/flex-gap-decorations-multi-value-column-reverse-uneven-lines-ref.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
5+
<style>
6+
body {
7+
margin: 0px;
8+
}
9+
.flex {
10+
display: flex;
11+
flex-direction: column-reverse;
12+
flex-wrap: wrap-reverse;
13+
gap: 10px;
14+
width: 200px;
15+
height: 190px;
16+
}
17+
.flex > * {
18+
background: lightgray;
19+
width: 60px;
20+
}
21+
.row-gap {
22+
position: absolute;
23+
width: 60px;
24+
height: 6px;
25+
}
26+
</style>
27+
<div class="flex">
28+
<div style="height: 40px;"></div>
29+
<div style="height: 40px;"></div>
30+
<div style="height: 40px;"></div>
31+
<div style="height: 100px;"></div>
32+
<div style="height: 90px;"></div>
33+
<div style="height: 90px;"></div>
34+
</div>
35+
36+
<div class="row-gap" style="left: 0px; top: 92px; background: teal;"> </div>
37+
38+
<div class="row-gap" style="left: 140px; top: 92px; background: goldenrod;"> </div>
39+
<div class="row-gap" style="left: 140px; top: 142px; background: crimson;"> </div>

‎css/css-gaps/flex/flex-gap-decorations-multi-value-column-reverse-uneven-lines.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Flex gap decoration colors with multiple values are
4+
assigned in placement order across uneven column flex lines (unequal
5+
item counts per line) when flex-direction is column-reverse and
6+
flex-wrap is wrap-reverse.
7+
</title>
8+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
9+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
10+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
11+
<link rel="match" href="flex-gap-decorations-multi-value-column-reverse-uneven-lines-ref.html">
12+
<style>
13+
body {
14+
margin: 0px;
15+
}
16+
.flex {
17+
display: flex;
18+
flex-direction: column-reverse;
19+
flex-wrap: wrap-reverse;
20+
gap: 10px;
21+
width: 200px;
22+
height: 190px;
23+
row-rule-style: solid;
24+
row-rule-width: 6px;
25+
row-rule-color: crimson, goldenrod, teal;
26+
}
27+
.flex > * {
28+
background: lightgray;
29+
width: 60px;
30+
}
31+
</style>
32+
<div class="flex">
33+
<div style="height: 40px;"></div>
34+
<div style="height: 40px;"></div>
35+
<div style="height: 40px;"></div>
36+
<div style="height: 100px;"></div>
37+
<div style="height: 90px;"></div>
38+
<div style="height: 90px;"></div>
39+
</div>

‎css/css-gaps/flex/flex-gap-decorations-multi-value-flex-direction-reverse-ref.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
3+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
4+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
5+
<style>
6+
body {
7+
margin: 0px;
8+
}
9+
.section {
10+
position: relative;
11+
margin-bottom: 20px;
12+
}
13+
.flex {
14+
display: flex;
15+
gap: 10px;
16+
}
17+
.flex > * {
18+
background: lightgray;
19+
width: 50px;
20+
height: 50px;
21+
}
22+
.row {
23+
width: 230px;
24+
}
25+
.column {
26+
flex-direction: column;
27+
width: 50px;
28+
height: 230px;
29+
}
30+
.col-rule {
31+
position: absolute;
32+
width: 10px;
33+
height: 50px;
34+
top: 0px;
35+
}
36+
.row-rule {
37+
position: absolute;
38+
height: 10px;
39+
width: 50px;
40+
left: 0px;
41+
}
42+
</style>
43+
<div class="section">
44+
<div class="col-rule" style="left: 50px; background: blue;"></div>
45+
<div class="col-rule" style="left: 110px; background: green;"></div>
46+
<div class="col-rule" style="left: 170px; background: red;"></div>
47+
<div class="flex row">
48+
<div></div><div></div><div></div><div></div>
49+
</div>
50+
</div>
51+
<div class="section">
52+
<div class="row-rule" style="top: 50px; background: blue;"></div>
53+
<div class="row-rule" style="top: 110px; background: green;"></div>
54+
<div class="row-rule" style="top: 170px; background: red;"></div>
55+
<div class="flex column">
56+
<div></div><div></div><div></div><div></div>
57+
</div>
58+
</div>

‎css/css-gaps/flex/flex-gap-decorations-multi-value-flex-direction-reverse.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Flex gap decoration colors with multiple values are
4+
assigned in placement direction when flex-direction is reversed
5+
(row-reverse / column-reverse), independent of writing direction.
6+
</title>
7+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
8+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
9+
<link rel="match" href="flex-gap-decorations-multi-value-flex-direction-reverse-ref.html">
10+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
11+
<style>
12+
body {
13+
margin: 0px;
14+
}
15+
.flex {
16+
display: flex;
17+
gap: 10px;
18+
margin-bottom: 20px;
19+
}
20+
.flex > * {
21+
background: lightgray;
22+
width: 50px;
23+
height: 50px;
24+
}
25+
.row {
26+
width: 230px;
27+
column-rule-color: red, green, blue;
28+
column-rule-style: solid;
29+
column-rule-width: 10px;
30+
}
31+
.column {
32+
width: 50px;
33+
height: 230px;
34+
row-rule-color: red, green, blue;
35+
row-rule-style: solid;
36+
row-rule-width: 10px;
37+
}
38+
</style>
39+
<div class="flex row" style="flex-direction: row-reverse;">
40+
<div></div><div></div><div></div><div></div>
41+
</div>
42+
<div class="flex column" style="flex-direction: column-reverse;">
43+
<div></div><div></div><div></div><div></div>
44+
</div>

‎css/css-gaps/flex/flex-gap-decorations-multi-value-reverse-direction-interaction-ref.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#gap-decorations">
3+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14156">
4+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
5+
<style>
6+
body {
7+
margin: 0px;
8+
}
9+
.section {
10+
position: relative;
11+
margin-bottom: 20px;
12+
}
13+
.flex {
14+
display: flex;
15+
gap: 10px;
16+
width: 230px;
17+
}
18+
.flex > * {
19+
background: lightgray;
20+
width: 50px;
21+
height: 50px;
22+
}
23+
.col-rule {
24+
position: absolute;
25+
width: 10px;
26+
height: 50px;
27+
top: 0px;
28+
}
29+
</style>
30+
<div class="section">
31+
<div class="col-rule" style="left: 50px; background: red;"></div>
32+
<div class="col-rule" style="left: 110px; background: green;"></div>
33+
<div class="col-rule" style="left: 170px; background: blue;"></div>
34+
<div class="flex" style="direction: ltr;">
35+
<div></div><div></div><div></div><div></div>
36+
</div>
37+
</div>
38+
<div class="section">
39+
<div class="col-rule" style="left: 50px; background: blue;"></div>
40+
<div class="col-rule" style="left: 110px; background: green;"></div>
41+
<div class="col-rule" style="left: 170px; background: red;"></div>
42+
<div class="flex" style="direction: rtl;">
43+
<div></div><div></div><div></div><div></div>
44+
</div>
45+
</div>
46+
<div class="section">
47+
<div class="col-rule" style="left: 50px; background: red;"></div>
48+
<div class="col-rule" style="left: 110px; background: green;"></div>
49+
<div class="col-rule" style="left: 170px; background: blue;"></div>
50+
<div class="flex" style="direction: ltr;">
51+
<div></div><div></div><div></div><div></div>
52+
</div>
53+
</div>

0 commit comments

Comments
 (0)