Skip to content

Commit 71ee931

Browse files
Javier Contreras Tenorio (from Dev Box)chromium-wpt-export-bot
Javier Contreras Tenorio (from Dev Box)
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Paint gap decorations for flex
This CL implements basic painting for Gap Decorations in flex. In order to implement the rules, we had to add some data to the `GapIntersections` as well as the `GapGeometry`. For flex, we use `is_blocked_before_/after` to indicate whether the intersection borders the edge of the container (is blocked by the edge). This CL adds the `ContainerType` enum, and adds a member of this type to `GapGeometry` which dictates for what type of container that `GapGeometry` object is (i.e. flex). We also add `inline_gap_size_`. In flex it refers to the gap between flex items, and in grid it refers to the column gutter size. For `block_gap_size_` in flex, it refers to the gap between flex lines and in grid it refers to the row gutter size. Bug: 357648037 Change-Id: Ifc65ba53049bff52388f57afda2471e3dce6adb1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6367772 Commit-Queue: Javier Contreras <[email protected]> Reviewed-by: Sam Davis Omekara <[email protected]> Reviewed-by: Alison Maher <[email protected]> Reviewed-by: Kevin Babbitt <[email protected]> Cr-Commit-Position: refs/heads/main@{#1439763}
1 parent 195dcf3 commit 71ee931

27 files changed

+1493
-1
lines changed

‎css/css-gaps/tentative/grid/grid-gap-decorations-002-ref.html‎ renamed to ‎css/css-gaps/tentative/agnostic/gap-decorations-001-ref.html‎

File renamed without changes.

‎css/css-gaps/tentative/flex/flex-gap-decorations-001.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: column and row gaps are painted.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="../../../reference/ref-filled-green-100px-square.xht">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
.flex-container {
10+
display: flex;
11+
column-gap: 10px;
12+
row-gap: 10px;
13+
height: 100px;
14+
width: 100px;
15+
background: red;
16+
column-rule-color: green;
17+
column-rule-style: solid;
18+
column-rule-width: 10px;
19+
row-rule-color: green;
20+
row-rule-style: solid;
21+
row-rule-width: 10px;
22+
23+
flex-wrap: wrap;
24+
}
25+
26+
.flex-item {
27+
background: green;
28+
width: 45px;
29+
}
30+
</style>
31+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
32+
<div class="flex-container">
33+
<div class="flex-item"></div>
34+
<div class="flex-item"></div>
35+
<div class="flex-item"></div>
36+
<div class="flex-item"></div>
37+
</div>

‎css/css-gaps/tentative/flex/flex-gap-decorations-002.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 column gaps are painted with solid styling.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="../agnostic/gap-decorations-001-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
.flex-container {
10+
height: 110px;
11+
width: 110px;
12+
13+
display: flex;
14+
15+
column-gap: 10px;
16+
row-gap: 10px;
17+
18+
column-rule-color: pink;
19+
column-rule-style: solid;
20+
column-rule-width: 10px;
21+
22+
row-rule-color: green;
23+
row-rule-style: solid;
24+
row-rule-width: 10px;
25+
26+
flex-wrap: wrap;
27+
}
28+
29+
.flex-item {
30+
background: skyblue;
31+
width: 50px;
32+
}
33+
</style>
34+
<div class="flex-container">
35+
<div class="flex-item"></div>
36+
<div class="flex-item"></div>
37+
<div class="flex-item"></div>
38+
<div class="flex-item"></div>
39+
</div>

‎css/css-gaps/tentative/flex/flex-gap-decorations-003-ref.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
#flexbox {
10+
border: 2px solid rgb(96 139 168);
11+
display: flex;
12+
column-gap: 10px;
13+
row-gap: 10px;
14+
width: 170px;
15+
flex-wrap: wrap;
16+
}
17+
18+
.items {
19+
background-color: rgb(96 139 168 / 0.2);
20+
flex-shrink: 1;
21+
width: 50px;
22+
height: 50px;
23+
}
24+
25+
#four {
26+
width: 100px;
27+
}
28+
29+
.row-gap {
30+
margin: 0px;
31+
padding: 0px;
32+
height: 10px;
33+
background: blue;
34+
width: 170px;
35+
position: absolute;
36+
}
37+
38+
.column-gap {
39+
display: flex;
40+
flex-direction: column;
41+
row-gap: 60px;
42+
height: 170px;
43+
top: 2px;
44+
width: 10px;
45+
position: absolute;
46+
}
47+
48+
.column {
49+
background: red;
50+
width: 10px;
51+
height: 55px;
52+
}
53+
</style>
54+
55+
<div id="flexbox">
56+
<div class="items">One</div>
57+
<div class="items">Two</div>
58+
<div class="items">Three</div>
59+
<div class="items" id="four">Four</div>
60+
<div class="items">Five</div>
61+
<div class="items">Six</div>
62+
<div class="items">Seven</div>
63+
<div class="items">Eight</div>
64+
</div>
65+
66+
<div id="row1" class="row-gap" style="top: 52px; left: 2px;"></div>
67+
<div id="row2" class="row-gap" style="top: 112px; left: 2px;"></div>
68+
69+
<div id="columns1" style="left: 52px;" class="column-gap">
70+
<div id="c1" class="column"></div>
71+
<div id="c2" class="column"></div>
72+
</div>
73+
74+
<div id="columns2" style="left: 112px;" class="column-gap">
75+
<div id="c1" class="column"></div>
76+
<div id="c2" class="column"></div>
77+
</div>
78+
79+
<div id="vertical3" style="left: 102px; position:absolute; top: 57px; height:60px;" class="column"></div>

‎css/css-gaps/tentative/flex/flex-gap-decorations-003.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: flex column and row gaps are painted with solid styling.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-003-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
13+
#flexbox {
14+
border: 2px solid rgb(96 139 168);
15+
display: flex;
16+
column-gap: 10px;
17+
row-gap: 10px;
18+
row-rule-style: solid;
19+
row-rule-color: blue;
20+
row-rule-width: 10px;
21+
column-rule-style: solid;
22+
column-rule-color: red;
23+
column-rule-width: 10px;
24+
width: 170px;
25+
flex-wrap: wrap;
26+
}
27+
28+
.items {
29+
background-color: rgb(96 139 168 / 0.2);
30+
flex-shrink: 1;
31+
width: 50px;
32+
height: 50px;
33+
}
34+
35+
#four {
36+
width: 100px;
37+
}
38+
</style>
39+
40+
<div id="flexbox">
41+
<div class="items">One</div>
42+
<div class="items">Two</div>
43+
<div class="items">Three</div>
44+
<div class="items" id="four">Four</div>
45+
<div class="items">Five</div>
46+
<div class="items">Six</div>
47+
<div class="items">Seven</div>
48+
<div class="items">Eight</div>
49+
</div>

‎css/css-gaps/tentative/flex/flex-gap-decorations-004-ref.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
3+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
#flexbox {
10+
border: 2px solid rgb(96 139 168);
11+
display: flex;
12+
column-gap: 10px;
13+
row-gap: 10px;
14+
width: 170px;
15+
flex-wrap: wrap;
16+
}
17+
18+
.items {
19+
background-color: rgb(96 139 168 / 0.2);
20+
flex-shrink: 1;
21+
width: 50px;
22+
height: 50px;
23+
}
24+
25+
#four {
26+
width: 100px;
27+
}
28+
29+
.row-gap {
30+
margin: 0px;
31+
padding: 0px;
32+
height: 0px;
33+
width: 170px;
34+
border-bottom: 10px double;
35+
border-color:blue;
36+
position: absolute;
37+
}
38+
39+
.column-gap {
40+
display: flex;
41+
flex-direction: column;
42+
row-gap: 60px;
43+
height: 170px;
44+
top: 2px;
45+
width: 10px;
46+
position: absolute;
47+
}
48+
49+
.column {
50+
width: 0px;
51+
border-left: 10px double red;
52+
height: 55px;
53+
}
54+
</style>
55+
56+
<div id="flexbox">
57+
<div class="items">One</div>
58+
<div class="items">Two</div>
59+
<div class="items">Three</div>
60+
<div class="items" id="four">Four</div>
61+
<div class="items">Five</div>
62+
<div class="items">Six</div>
63+
<div class="items">Seven</div>
64+
<div class="items">Eight</div>
65+
</div>
66+
67+
<div id="row1" class="row-gap" style="top: 52px; left: 2px;"></div>
68+
<div id="row2" class="row-gap" style="top: 112px; left: 2px;"></div>
69+
70+
<div id="columns1" style="left: 52px;" class="column-gap">
71+
<div id="c1" class="column"></div>
72+
<div id="c2" class="column"></div>
73+
</div>
74+
75+
<div id="columns2" style="left: 112px;" class="column-gap">
76+
<div id="c1" class="column"></div>
77+
<div id="c2" class="column"></div>
78+
</div>
79+
80+
<div id="column3" style="left: 102px; position:absolute; top: 57px; height:60px;" class="column"></div>

‎css/css-gaps/tentative/flex/flex-gap-decorations-004.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: flex column and row gaps are painted with double styling.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-004-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
13+
#flexbox {
14+
border: 2px solid rgb(96 139 168);
15+
display: flex;
16+
column-gap: 10px;
17+
row-gap: 10px;
18+
row-rule-style: double;
19+
row-rule-color: blue;
20+
row-rule-width: 10px;
21+
column-rule-style: double;
22+
column-rule-color: red;
23+
column-rule-width: 10px;
24+
width: 170px;
25+
flex-wrap: wrap;
26+
}
27+
28+
.items {
29+
background-color: rgb(96 139 168 / 0.2);
30+
flex-shrink: 1;
31+
width: 50px;
32+
height: 50px;
33+
}
34+
35+
#four {
36+
width: 100px;
37+
}
38+
</style>
39+
40+
<div id="flexbox">
41+
<div class="items">One</div>
42+
<div class="items">Two</div>
43+
<div class="items">Three</div>
44+
<div class="items" id="four">Four</div>
45+
<div class="items">Five</div>
46+
<div class="items">Six</div>
47+
<div class="items">Seven</div>
48+
<div class="items">Eight</div>
49+
</div>

0 commit comments

Comments
 (0)