Skip to content

Commit abd9a16

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Fix GapDecorations in overflow cases
This CL fixes overflow cases for GapDecorations. Before this change, if we had a container with GapDecorations, and the container had overflow (hidden or scroll) we would paint the gap decorations in the space overflow space where they should instead be hidden. The first fix for this was to add a ScopedBoxContentsPaintState and modify the paint and visual rects to account for the overflow area. This was not enough to fix the issues however, since part of the reason why this was happening, was that we were previously painting gap decorations too far down the stack in the code path where the background was being painted. This led to us painting the decorations with the same paint states set up for painting the background. So we had to move the painting of the gap decorations until after the background is painted, and setting up our own recorder for it. Bug: 357648037 Change-Id: I833fae190fbce65e38ba555616591098abc18e25 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6506379 Reviewed-by: Sam Davis Omekara <[email protected]> Reviewed-by: Philip Rogers <[email protected]> Commit-Queue: Javier Contreras <[email protected]> Cr-Commit-Position: refs/heads/main@{#1460141}
1 parent f55981c commit abd9a16

12 files changed

+675
-0
lines changed

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
.container {
9+
display: flex;
10+
width: 110px;
11+
height: 110px;
12+
column-gap: 10px;
13+
row-gap: 10px;
14+
flex-wrap: wrap;
15+
}
16+
.item {
17+
background: skyblue;
18+
height: 50px;
19+
width: 50px;
20+
margin: 0;
21+
}
22+
.row-gap {
23+
position: absolute;
24+
top: 50px;
25+
background: gold;
26+
width: 110px;
27+
height: 10px;
28+
}
29+
.column-gap {
30+
position: absolute;
31+
top: 0px;
32+
left: 50px;
33+
background: blue;
34+
height: 110px;
35+
width: 10px;
36+
}
37+
.overflow {
38+
position: absolute;
39+
top: 0px;
40+
left: 0px;
41+
overflow: scroll;
42+
height: 80px;
43+
width: 80px;
44+
}
45+
</style>
46+
<div class="overflow">
47+
<div class="container">
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
<div class="item"></div>
52+
</div>
53+
<div class="column-gap"></div>
54+
<div class="row-gap"></div>
55+
</div>

‎css/css-gaps/flex/flex-gap-decorations-020.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 gaps are painted when container scrolls.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-020-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
.flex-container {
13+
position: absolute;
14+
top: 0;
15+
left: 0;
16+
height: 110px;
17+
width: 110px;
18+
display: flex;
19+
column-gap: 10px;
20+
row-gap: 10px;
21+
column-rule-color: blue;
22+
column-rule-style: solid;
23+
column-rule-width: 10px;
24+
row-rule-color: gold;
25+
row-rule-style: solid;
26+
row-rule-width: 10px;
27+
flex-wrap: wrap;
28+
}
29+
.flex-item {
30+
background: skyblue;
31+
width: 50px;
32+
}
33+
.overflow {
34+
position: absolute;
35+
top: 0;
36+
left: 0;
37+
overflow: scroll;
38+
height: 80px;
39+
width: 80px;
40+
}
41+
</style>
42+
<div class="overflow">
43+
<div class="flex-container">
44+
<div class="flex-item"></div>
45+
<div class="flex-item"></div>
46+
<div class="flex-item"></div>
47+
<div class="flex-item"></div>
48+
</div>
49+
</div>

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
.container {
9+
display: flex;
10+
width: 110px;
11+
height: 110px;
12+
column-gap: 10px;
13+
row-gap: 10px;
14+
flex-wrap: wrap;
15+
}
16+
.item {
17+
background: skyblue;
18+
height: 50px;
19+
width: 50px;
20+
margin: 0;
21+
}
22+
.row-gap {
23+
position: absolute;
24+
top: 50px;
25+
background: gold;
26+
width: 110px;
27+
height: 10px;
28+
}
29+
.column-gap {
30+
position: absolute;
31+
top: 0px;
32+
left: 50px;
33+
background: blue;
34+
height: 110px;
35+
width: 10px;
36+
}
37+
.overflow {
38+
position: absolute;
39+
top: 0px;
40+
left: 0px;
41+
overflow: hidden;
42+
height: 80px;
43+
width: 80px;
44+
}
45+
</style>
46+
<div class="overflow">
47+
<div class="container">
48+
<div class="item"></div>
49+
<div class="item"></div>
50+
<div class="item"></div>
51+
<div class="item"></div>
52+
</div>
53+
<div class="column-gap"></div>
54+
<div class="row-gap"></div>
55+
</div>

‎css/css-gaps/flex/flex-gap-decorations-021.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 gaps are painted with overflow hidden.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-021-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
.flex-container {
13+
position: absolute;
14+
top: 0;
15+
left: 0;
16+
height: 110px;
17+
width: 110px;
18+
display: flex;
19+
column-gap: 10px;
20+
row-gap: 10px;
21+
column-rule-color: blue;
22+
column-rule-style: solid;
23+
column-rule-width: 10px;
24+
row-rule-color: gold;
25+
row-rule-style: solid;
26+
row-rule-width: 10px;
27+
flex-wrap: wrap;
28+
}
29+
.flex-item {
30+
background: skyblue;
31+
width: 50px;
32+
}
33+
.overflow {
34+
position: absolute;
35+
top: 0;
36+
left: 0;
37+
overflow: hidden;
38+
height: 80px;
39+
width: 80px;
40+
}
41+
</style>
42+
<div class="overflow">
43+
<div class="flex-container">
44+
<div class="flex-item"></div>
45+
<div class="flex-item"></div>
46+
<div class="flex-item"></div>
47+
<div class="flex-item"></div>
48+
</div>
49+
</div>

‎css/css-gaps/grid/grid-gap-decorations-034-ref.html

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
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+
.grid-container {
9+
display: grid;
10+
grid-gap: 10px;
11+
grid-template-columns: 100px 100px 100px;
12+
grid-template-rows: 90px 100px 100px;
13+
width: 130px;
14+
height: 130px;
15+
overflow: hidden;
16+
background: pink;
17+
}
18+
.item {
19+
background: gray;
20+
}
21+
.row-gap {
22+
position: absolute;
23+
width: 320px;
24+
height: 0px;
25+
border-bottom: solid 5px gold;
26+
}
27+
.row-gap1 {
28+
top: 92.5px;
29+
}
30+
.row-gap2 {
31+
top: 222.5px;
32+
}
33+
.col-gap {
34+
position: absolute;
35+
top: 0px;
36+
width: 0px;
37+
height: 320px;
38+
border-left: solid 5px blue;
39+
}
40+
.col-gap1 {
41+
left: 102.5px;
42+
}
43+
.col-gap2 {
44+
left: 212.5px;
45+
}
46+
.container {
47+
position: absolute;
48+
top: 0px;
49+
left: 0px;
50+
width: 130px;
51+
height: 130px;
52+
overflow: hidden;
53+
}
54+
</style>
55+
<div class="container">
56+
<div class="grid-container">
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 class="item"></div>
63+
<div class="item"></div>
64+
<div class="item"></div>
65+
<div class="item"></div>
66+
</div>
67+
<div class="col-gap col-gap1"> </div>
68+
<div class="col-gap col-gap2"> </div>
69+
<div class="row-gap row-gap1"> </div>
70+
<div class="row-gap row-gap2"> </div>
71+
</div>

‎css/css-gaps/grid/grid-gap-decorations-034.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Gaps are painted with container with overflow hidden, with JS scroll
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="grid-gap-decorations-034-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
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+
grid-template-rows: 100px 100px 100px;
17+
width: 130px;
18+
height: 130px;
19+
overflow: hidden;
20+
column-rule-color: blue;
21+
column-rule-style: solid;
22+
column-rule-width: 5px;
23+
row-rule-color: gold;
24+
row-rule-style: solid;
25+
row-rule-width: 5px;
26+
background: pink;
27+
}
28+
.item {
29+
background: gray;
30+
}
31+
</style>
32+
<body>
33+
<div class="grid-container" id="hidden-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>
44+
</body>
45+
46+
<script>
47+
document.getElementById('hidden-container').scrollBy({top: 10, left: 0});
48+
</script>

0 commit comments

Comments
 (0)