Skip to content

Commit e6d7127

Browse files
Javier Contreraschromium-wpt-export-bot
Javier Contreras
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Allow space from content-distribution in flex (cross)
This CL accounts for content distribution space (justify-content: space-between, space-around, space-evenly) when computing gap decoration positions for flex containers. Previously, cross gap intersection offsets only considered the gap property value, causing gap decorations to be mispositioned when justify-content distributed additional space between items. Each flex line can now have a different effective cross gap size, tracked via per-line gap sizes in GapGeometry. This CL adds the corresponding tests. A follow up CL will work on the same but for main gaps. Bug: 357648037 Change-Id: Ibe8467d97aba0ec2ad30d10ec1d275d190a4eaf8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7585696 Reviewed-by: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1588079}
1 parent c928f97 commit e6d7127

12 files changed

Lines changed: 626 additions & 0 deletions

‎css/css-gaps/flex/flex-gap-decorations-040-ref.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/#outset">
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
#flexbox {
10+
width: 400px;
11+
border: 2px solid #333;
12+
background-color: #fff;
13+
display: flex;
14+
flex-wrap: wrap;
15+
justify-content: space-between;
16+
}
17+
18+
.item {
19+
width: 70px;
20+
height: 50px;
21+
background-color: #007bff;
22+
color: white;
23+
display: flex;
24+
}
25+
26+
.rule {
27+
position: absolute;
28+
top: 2px;
29+
height: 50px;
30+
background: gold;
31+
width: 5px;
32+
}
33+
</style>
34+
<div class="rule" style="left: 76.25px;"></div>
35+
<div class="rule" style="left: 157.75px;"></div>
36+
<div class="rule" style="left: 241.25px;"></div>
37+
<div class="rule" style="left: 322.75px;"></div>
38+
39+
<div class="rule" style="top: 52px; left: 90px;"></div>
40+
<div class="rule" style="top: 52px; left: 200px;"></div>
41+
<div class="rule" style="top: 52px; left: 310px;"></div>
42+
<div id="flexbox">
43+
<div class="item"></div>
44+
<div class="item"></div>
45+
<div class="item"></div>
46+
<div class="item"></div>
47+
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
52+
<div class="item"></div>
53+
<div class="item"></div>
54+
</div>

‎css/css-gaps/flex/flex-gap-decorations-040.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Flex gaps are painted with different sized gaps per line due to content distribution.
4+
</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-040-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
13+
#flexbox {
14+
width: 400px;
15+
border: 2px solid #333;
16+
background-color: #fff;
17+
display: flex;
18+
flex-wrap: wrap;
19+
justify-content: space-between;
20+
column-rule: 5px solid gold;
21+
}
22+
23+
.item {
24+
width: 70px;
25+
height: 50px;
26+
background-color: #007bff;
27+
color: white;
28+
display: flex;
29+
}
30+
</style>
31+
<div id="flexbox">
32+
<div class="item"></div>
33+
<div class="item"></div>
34+
<div class="item"></div>
35+
<div class="item"></div>
36+
37+
<div class="item"></div>
38+
<div class="item"></div>
39+
<div class="item"></div>
40+
41+
<div class="item"></div>
42+
<div class="item"></div>
43+
</div>

‎css/css-gaps/flex/flex-gap-decorations-041-ref.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
#flexbox {
10+
width: 400px;
11+
border: 2px solid #333;
12+
background-color: #fff;
13+
display: flex;
14+
flex-wrap: wrap;
15+
justify-content: space-around;
16+
}
17+
18+
.item {
19+
width: 70px;
20+
height: 50px;
21+
background-color: #007bff;
22+
color: white;
23+
display: flex;
24+
}
25+
26+
.rule {
27+
position: absolute;
28+
top: 2px;
29+
height: 50px;
30+
background: gold;
31+
width: 5px;
32+
}
33+
</style>
34+
<div class="rule" style="left: 80px;"></div>
35+
<div class="rule" style="left: 160px;"></div>
36+
<div class="rule" style="left: 240px;"></div>
37+
<div class="rule" style="left: 320px;"></div>
38+
39+
<div class="rule" style="top: 52px; left: 100px;"></div>
40+
<div class="rule" style="top: 52px; left: 200px;"></div>
41+
<div class="rule" style="top: 52px; left: 300px;"></div>
42+
<div id="flexbox">
43+
<div class="item"></div>
44+
<div class="item"></div>
45+
<div class="item"></div>
46+
<div class="item"></div>
47+
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
52+
<div class="item"></div>
53+
<div class="item"></div>
54+
</div>

‎css/css-gaps/flex/flex-gap-decorations-041.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Flex gaps are painted with different sized gaps per line due to content distribution (via space-around).
4+
</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-041-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
13+
#flexbox {
14+
width: 400px;
15+
border: 2px solid #333;
16+
background-color: #fff;
17+
display: flex;
18+
flex-wrap: wrap;
19+
justify-content: space-around;
20+
column-rule: 5px solid gold;
21+
}
22+
23+
.item {
24+
width: 70px;
25+
height: 50px;
26+
background-color: #007bff;
27+
color: white;
28+
display: flex;
29+
}
30+
</style>
31+
<div id="flexbox">
32+
<div class="item"></div>
33+
<div class="item"></div>
34+
<div class="item"></div>
35+
<div class="item"></div>
36+
37+
<div class="item"></div>
38+
<div class="item"></div>
39+
<div class="item"></div>
40+
41+
<div class="item"></div>
42+
<div class="item"></div>
43+
</div>

‎css/css-gaps/flex/flex-gap-decorations-042-ref.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
#flexbox {
10+
width: 400px;
11+
border: 2px solid #333;
12+
background-color: #fff;
13+
display: flex;
14+
flex-wrap: wrap;
15+
justify-content: space-evenly;
16+
}
17+
18+
.item {
19+
width: 70px;
20+
height: 50px;
21+
background-color: #007bff;
22+
color: white;
23+
display: flex;
24+
}
25+
26+
.rule {
27+
position: absolute;
28+
top: 2px;
29+
height: 50px;
30+
background: gold;
31+
width: 5px;
32+
}
33+
</style>
34+
<div class="rule" style="left: 81.5px;"></div>
35+
<div class="rule" style="left: 159.83px;"></div>
36+
<div class="rule" style="left: 239.17px;"></div>
37+
<div class="rule" style="left: 316.5px;"></div>
38+
39+
<div class="rule" style="top: 52px; left: 106px;"></div>
40+
<div class="rule" style="top: 52px; left: 200px;"></div>
41+
<div class="rule" style="top: 52px; left: 294px;"></div>
42+
<div id="flexbox">
43+
<div class="item"></div>
44+
<div class="item"></div>
45+
<div class="item"></div>
46+
<div class="item"></div>
47+
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
52+
<div class="item"></div>
53+
<div class="item"></div>
54+
</div>

‎css/css-gaps/flex/flex-gap-decorations-042.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Flex gaps are painted with different sized gaps per line due to content distribution (via space-evenly).
4+
</title>
5+
<link rel="help" href="https://www.w3.org/TR/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-042-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
13+
#flexbox {
14+
width: 400px;
15+
border: 2px solid #333;
16+
background-color: #fff;
17+
display: flex;
18+
flex-wrap: wrap;
19+
justify-content: space-evenly;
20+
column-rule: 5px solid gold;
21+
}
22+
23+
.item {
24+
width: 70px;
25+
height: 50px;
26+
background-color: #007bff;
27+
color: white;
28+
display: flex;
29+
}
30+
</style>
31+
<div id="flexbox">
32+
<div class="item"></div>
33+
<div class="item"></div>
34+
<div class="item"></div>
35+
<div class="item"></div>
36+
37+
<div class="item"></div>
38+
<div class="item"></div>
39+
<div class="item"></div>
40+
41+
<div class="item"></div>
42+
<div class="item"></div>
43+
</div>

‎css/css-gaps/flex/flex-gap-decorations-043-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://www.w3.org/TR/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
#flexbox {
10+
height: 400px;
11+
width: 100px;
12+
border: 2px solid #333;
13+
background-color: #fff;
14+
display: flex;
15+
flex-direction: column;
16+
flex-wrap: wrap;
17+
justify-content: space-between;
18+
}
19+
20+
.item {
21+
width: 50px;
22+
height: 70px;
23+
background-color: #007bff;
24+
color: white;
25+
display: flex;
26+
}
27+
28+
.rule {
29+
position: absolute;
30+
left: 2px;
31+
width: 50px;
32+
height: 5px;
33+
background: gold;
34+
}
35+
</style>
36+
37+
<div class="rule" style="top: 76.25px;"></div>
38+
<div class="rule" style="top: 157.75px;"></div>
39+
<div class="rule" style="top: 241.25px;"></div>
40+
<div class="rule" style="top: 322.75px;"></div>
41+
42+
<div class="rule" style="left: 52px; top: 90px;"></div>
43+
<div class="rule" style="left: 52px; top: 200px;"></div>
44+
<div class="rule" style="left: 52px; top: 310px;"></div>
45+
46+
<div id="flexbox">
47+
<div class="item"></div>
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
52+
<div class="item"></div>
53+
<div class="item"></div>
54+
<div class="item"></div>
55+
56+
<div class="item"></div>
57+
<div class="item"></div>
58+
</div>

0 commit comments

Comments
 (0)