Skip to content

Commit 03ee93a

Browse files
Sam Davis Omekara Jr.chromium-wpt-export-bot
Sam Davis Omekara Jr.
authored and
chromium-wpt-export-bot
committed
[Gap Decorations]: Use multiple colors to paint
This CL introduces a method on ComputedStyles for resolving gap decoration colors (`column-rule-color` and `row-rule-color`). With gap decorations, column-rule-color is now a list of colors rather than a single color. As a result, the traditional mechanism that involves `LayoutObject::ResolveColor` -> `ComputedStyle::VisitedDependentColor` -> `Longhand::ColorIncludingFallback` would not work for this property. Instead, we introduce a custom `VisitedDependentGapColor()` to resolve gap decoration colors, which is currently called at paint. Note: The new `VisitedDependentGapColor()` only handles :visited styles for simple single values of `column-rule-color`. Bug: 357648037 Change-Id: Id8ea1fa59cd66cfee229c8d4c03c61723e4994da Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6393952 Commit-Queue: Sam Davis Omekara <samomekarajr@microsoft.com> Reviewed-by: Kevin Babbitt <kbabbitt@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1448535}
1 parent 8081432 commit 03ee93a

14 files changed

Lines changed: 613 additions & 1 deletion

‎css/css-gaps/tentative/grid/grid-gap-decorations-023-ref.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!DOCTYPE html>
32
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break">
43
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">

‎css/css-gaps/tentative/grid/grid-gap-decorations-024-ref.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
3+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
9+
.grid-container {
10+
display: grid;
11+
grid-gap: 10px;
12+
grid-template-columns: 100px 100px 100px;
13+
height: 320px;
14+
}
15+
16+
.item {
17+
background: gray;
18+
opacity: 0.5;
19+
}
20+
21+
.row-gap {
22+
position: absolute;
23+
width: 320px;
24+
height: 0px;
25+
border-bottom: solid 5px red;
26+
}
27+
28+
.row-gap1 {
29+
top: 102.5px;
30+
}
31+
32+
.row-gap2 {
33+
top: 212.5px;
34+
}
35+
36+
.col-gap {
37+
position: absolute;
38+
top: 0px;
39+
width: 0px;
40+
height: 320px;
41+
border-left: solid 5px yellow;
42+
}
43+
44+
.col-gap1 {
45+
left: 102.5px;
46+
}
47+
48+
.col-gap2 {
49+
left: 212.5px;
50+
}
51+
</style>
52+
<div class="grid-container">
53+
<div class="item"></div>
54+
<div class="item"></div>
55+
<div class="item"></div>
56+
<div class="item"></div>
57+
<div class="item"></div>
58+
<div class="item"></div>
59+
<div class="item"></div>
60+
<div class="item"></div>
61+
<div class="item"></div>
62+
</div>
63+
<div class="col-gap col-gap1"> </div>
64+
<div class="col-gap col-gap2"> </div>
65+
66+
<div class="row-gap row-gap1"> </div>
67+
<div class="row-gap row-gap2"> </div>

‎css/css-gaps/tentative/grid/grid-gap-decorations-024.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Grid column gaps are painted with :visited styles when a single color is used.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="grid-gap-decorations-024-ref.html">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
.grid-container {
13+
display: grid;
14+
grid-gap: 10px;
15+
grid-template-columns: 100px 100px 100px;
16+
height: 320px;
17+
18+
column-rule-color: blue;
19+
column-rule-style: solid;
20+
column-rule-width: 5px;
21+
22+
row-rule-color: red;
23+
row-rule-style: solid;
24+
row-rule-width: 5px;
25+
26+
}
27+
.item {
28+
background: gray;
29+
opacity: 0.5;
30+
}
31+
.grid-link:visited .grid-container {
32+
column-rule-color: yellow;
33+
}
34+
</style>
35+
<a href="" class="grid-link">
36+
<div class="grid-container">
37+
<div class="item"></div>
38+
<div class="item"></div>
39+
<div class="item"></div>
40+
<div class="item"></div>
41+
<div class="item"></div>
42+
<div class="item"></div>
43+
<div class="item"></div>
44+
<div class="item"></div>
45+
<div class="item"></div>
46+
</div>
47+
</a>

‎css/css-gaps/tentative/grid/grid-gap-decorations-025-ref.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
3+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
.grid-container {
9+
display: grid;
10+
grid-gap: 10px;
11+
grid-template-columns: 100px 100px 100px;
12+
height: 320px;
13+
}
14+
.item {
15+
background: gray;
16+
opacity: 0.5;
17+
}
18+
.row-gap {
19+
position: absolute;
20+
width: 320px;
21+
height: 0px;
22+
border-bottom: solid 5px red;
23+
}
24+
.row-gap1 {
25+
top: 102.5px;
26+
}
27+
.row-gap2 {
28+
top: 212.5px;
29+
}
30+
.col-gap {
31+
position: absolute;
32+
top: 0px;
33+
width: 0px;
34+
height: 320px;
35+
border-left: solid 5px;
36+
}
37+
.gap-link:visited .col-gap {
38+
border-color: currentcolor;
39+
}
40+
.col-gap1 {
41+
left: 102.5px;
42+
}
43+
.col-gap2 {
44+
left: 212.5px;
45+
}
46+
</style>
47+
<div class="grid-container">
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
<div class="item"></div>
52+
<div class="item"></div>
53+
<div class="item"></div>
54+
<div class="item"></div>
55+
<div class="item"></div>
56+
<div class="item"></div>
57+
</div>
58+
<a class="gap-link" href="">
59+
<div class="col-gap col-gap1"> </div>
60+
<div class="col-gap col-gap2"> </div>
61+
</a>
62+
<div class="row-gap row-gap1"> </div>
63+
<div class="row-gap row-gap2"> </div>

‎css/css-gaps/tentative/grid/grid-gap-decorations-025.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Grid column gaps are painted with default :visited styles when multiple colors are used.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="grid-gap-decorations-025-ref.html">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
.grid-container {
13+
display: grid;
14+
grid-gap: 10px;
15+
grid-template-columns: 100px 100px 100px;
16+
height: 320px;
17+
18+
column-rule-color: blue;
19+
column-rule-style: solid;
20+
column-rule-width: 5px;
21+
22+
row-rule-color: red;
23+
row-rule-style: solid;
24+
row-rule-width: 5px;
25+
26+
}
27+
.item {
28+
background: gray;
29+
opacity: 0.5;
30+
}
31+
.grid-link:visited .grid-container {
32+
column-rule-color: red lime blue;
33+
}
34+
</style>
35+
<a href="" class="grid-link">
36+
<div class="grid-container">
37+
<div class="item"></div>
38+
<div class="item"></div>
39+
<div class="item"></div>
40+
<div class="item"></div>
41+
<div class="item"></div>
42+
<div class="item"></div>
43+
<div class="item"></div>
44+
<div class="item"></div>
45+
<div class="item"></div>
46+
</div>
47+
</a>

‎css/css-gaps/tentative/grid/grid-gap-decorations-026-ref.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#outset">
3+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
4+
<style>
5+
body {
6+
margin: 0px;
7+
}
8+
.grid-container {
9+
display: grid;
10+
grid-gap: 10px;
11+
grid-template-columns: 100px 100px 100px;
12+
height: 320px;
13+
}
14+
.item {
15+
background: gray;
16+
opacity: 0.5;
17+
}
18+
.row-gap {
19+
position: absolute;
20+
width: 320px;
21+
height: 0px;
22+
border-bottom: solid 5px green;
23+
}
24+
.row-gap1 {
25+
top: 102.5px;
26+
}
27+
.row-gap2 {
28+
top: 212.5px;
29+
}
30+
.col-gap {
31+
position: absolute;
32+
top: 0px;
33+
width: 0px;
34+
height: 320px;
35+
border-left: solid 5px green;
36+
37+
}
38+
.col-gap1 {
39+
left: 102.5px;
40+
}
41+
.col-gap2 {
42+
left: 212.5px;
43+
}
44+
</style>
45+
<div class="grid-container">
46+
<div class="item"></div>
47+
<div class="item"></div>
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
<div class="item"></div>
52+
<div class="item"></div>
53+
<div class="item"></div>
54+
<div class="item"></div>
55+
</div>
56+
<div class="row-gap row-gap1"> </div>
57+
<div class="row-gap row-gap2"> </div>
58+
<div class="col-gap col-gap1"> </div>
59+
<div class="col-gap col-gap2"> </div>

‎css/css-gaps/tentative/grid/grid-gap-decorations-026.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: Grid gaps are painted properly when currentColor is used.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="grid-gap-decorations-026-ref.html">
7+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:samomekarajr@microsoft.com">
8+
<style>
9+
body {
10+
margin: 0px;
11+
color: green;
12+
}
13+
.grid-container {
14+
display: grid;
15+
grid-gap: 10px;
16+
grid-template-columns: 100px 100px 100px;
17+
height: 320px;
18+
19+
column-rule-color: currentColor;
20+
column-rule-style: solid;
21+
column-rule-width: 5px;
22+
23+
row-rule-color: currentColor;
24+
row-rule-style: solid;
25+
row-rule-width: 5px;
26+
27+
}
28+
.item {
29+
background: gray;
30+
opacity: 0.5;
31+
}
32+
</style>
33+
<div class="grid-container">
34+
<div class="item"></div>
35+
<div class="item"></div>
36+
<div class="item"></div>
37+
<div class="item"></div>
38+
<div class="item"></div>
39+
<div class="item"></div>
40+
<div class="item"></div>
41+
<div class="item"></div>
42+
<div class="item"></div>
43+
</div>

0 commit comments

Comments
 (0)