Skip to content

Commit b86aa11

Browse files
Sam Davis Omekarachromium-wpt-export-bot
Sam Davis Omekara
authored and
chromium-wpt-export-bot
committed
[Gap Decorations]: Suppress row gaps even when there is a spanning item
Per the resolution taken in csswg issue 13362 [1], gaps should be suppressed across fragment breaks, even if a spanning item is present. In the case of a candidate for gap suppression with a spanning item, we can't just naively take away the gap else we run the risk of taking a chunk of the item as well. Instead, we expand the next row to fill the space where the gap would have otherwise been if it wasn't suppressed, maintaining a 0px gap. Note: When track sizes or positions are altered because of suppression or expansion, these changes are not passed from the parent grid to the subgrid. This matches the current behavior with row expansion and subgrid, and will be addressed when track size and position changes due to fragmentation are propagated to subgrid, as tracked by crbug.com/491881353. Relevant wpts are updated and added. [1]:w3c/csswg-drafts#13362 Bug: 490022546 Change-Id: I3282e3d3d0b3afc2ff59b707c1e3334024999d1f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7644466 Reviewed-by: Alison Maher <[email protected]> Commit-Queue: Sam Davis Omekara <[email protected]> Cr-Commit-Position: refs/heads/main@{#1599428}
1 parent 378adb7 commit b86aa11

14 files changed

+633
-51
lines changed

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006-ref.html‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px;
20+
grid-template-rows: 20px 10px 20px 10px 20px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
}
@@ -27,7 +27,7 @@
2727
grid-template-rows: subgrid;
2828
background: teal;
2929
grid-column: 2 / -2;
30-
grid-row: 3 / -3;
30+
grid-row: 3 / 8;
3131
}
3232
.item {
3333
background: purple;
@@ -69,23 +69,23 @@
6969
<div class="item" style="grid-row:3;"></div>
7070
<div class="item" style="grid-row:5;"></div>
7171
<div class="item" style="grid-row:5;"></div>
72-
<div class="item" style="grid-row:6;"></div>
73-
<div class="item" style="grid-row:6;"></div>
74-
<div class="item" style="grid-row:8;"></div>
75-
<div class="item" style="grid-row:8;"></div>
76-
<div class="item" style="grid-row:8;"></div>
77-
<div class="item" style="grid-row:8;"></div>
78-
<div class="item" style="grid-row:8;"></div>
72+
<div class="item" style="grid-row:6/9;"></div>
73+
<div class="item" style="grid-row:6/9;"></div>
74+
<div class="item" style="grid-row:10/12;"></div>
75+
<div class="item" style="grid-row:10/12;"></div>
76+
<div class="item" style="grid-row:10/12;"></div>
77+
<div class="item" style="grid-row:10/12;"></div>
78+
<div class="item" style="grid-row:10/12;"></div>
7979
<div class="subgrid">
8080
<div class="item" style="grid-row:1;"></div>
8181
<div class="item" style="grid-row:1;"></div>
8282
<div class="item" style="grid-row:1;"></div>
8383
<div class="item" style="grid-row:3;"></div>
8484
<div class="item" style="grid-row:3;"></div>
8585
<div class="item" style="grid-row:3;"></div>
86-
<div class="item" style="grid-row:4;"></div>
87-
<div class="item" style="grid-row:4;"></div>
88-
<div class="item" style="grid-row:4;"></div>
86+
<div class="item" style="grid-row:4/6;"></div>
87+
<div class="item" style="grid-row:4/6;"></div>
88+
<div class="item" style="grid-row:4/6;"></div>
8989
</div>
9090
</div>
9191

@@ -101,7 +101,7 @@
101101
<div class="col-gap" style="background: white;"></div>
102102
</div>
103103

104-
<div class="col-gap-group" style="left: 160px; height: 50px;">
104+
<div class="col-gap-group" style="left: 160px; height: 60px;">
105105
<div class="col-gap"></div>
106106
<div class="col-gap"></div>
107107
<div class="col-gap"></div>
@@ -122,7 +122,7 @@
122122
<div class="row-gap" style="background: blue;"> </div>
123123
</div>
124124

125-
<div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;">
125+
<div class="row-gap-group" style="flex-direction: row; width: 140px; top: 30px; left:140px;">
126126
<div class="row-gap" style="width: 30px;"> </div>
127127
<div class="row-gap" style="width: 80px;"> </div>
128128
<div class="row-gap" style="width: 30px;"> </div>

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009-ref.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px;
20+
grid-template-rows: 20px 10px 20px 10px 20px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
}
@@ -27,7 +27,7 @@
2727
grid-template-rows: subgrid;
2828
background: teal;
2929
grid-column: 2 / -2;
30-
grid-row: 3 / -3;
30+
grid-row: 3 / 8;
3131
background: orange;
3232
}
3333
.item {
@@ -76,7 +76,7 @@
7676
<div class="col-gap" style="background: white;"></div>
7777
</div>
7878

79-
<div class="col-gap-group" style="left: 160px; height: 50px;">
79+
<div class="col-gap-group" style="left: 160px; height: 60px;">
8080
<div class="col-gap"></div>
8181
<div class="col-gap"></div>
8282
<div class="col-gap"></div>
@@ -97,7 +97,7 @@
9797
<div class="row-gap" style="background: blue;"> </div>
9898
</div>
9999

100-
<div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;">
100+
<div class="row-gap-group" style="flex-direction: row; width: 140px; top: 30px; left:140px;">
101101
<div class="row-gap" style="width: 30px;"> </div>
102102
<div class="row-gap" style="width: 80px;"> </div>
103103
<div class="row-gap" style="width: 30px;"> </div>

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012-ref.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 10px 20px 20px 10px 20px 20px 10px 10px;
20+
grid-template-rows: 20px 10px 20px 20px 10px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
height: 140px;
@@ -28,7 +28,7 @@
2828
grid-template-rows: subgrid;
2929
background: orange;
3030
grid-column: 2 / -2;
31-
grid-row: 3 / -4;
31+
grid-row: 3 / 8;
3232
}
3333
.inner-subgrid {
3434
display: grid;
@@ -73,8 +73,8 @@
7373
<div class="inner-subgrid">
7474
<div class="item"></div>
7575
<div class="item"></div>
76-
<div class="item" style="grid-row: -1;"></div>
77-
<div class="item" style="grid-row: -1;"></div>
76+
<div class="item" style="grid-row: 3/5;"></div>
77+
<div class="item" style="grid-row: 3/5;"></div>
7878
</div>
7979
</div>
8080
</div>
@@ -97,7 +97,13 @@
9797
<div class="col-gap" style="background: red;"></div>
9898
<div class="col-gap"></div>
9999
</div>
100-
<div class="col-gap-group" style="left: 300px; height: 20px">
100+
<div class="col-gap-group" style="left: 300px; height: 10px">
101+
<div class="col-gap"></div>
102+
<div class="col-gap"></div>
103+
<div class="col-gap"></div>
104+
<div class="col-gap"></div>
105+
</div>
106+
<div class="col-gap-group" style="left: 300px; height: 20px; top: 20px;">
101107
<div class="col-gap"></div>
102108
<div class="col-gap"></div>
103109
<div class="col-gap"></div>
@@ -107,10 +113,15 @@
107113
<div class="row-gap-group">
108114
<div class="row-gap"></div>
109115
</div>
110-
<div class="row-gap-group" style="left: 140px;">
111-
<div class="row-gap"></div>
116+
<div class="row-gap-group" style="flex-direction: row; width: 140px; top: 30px; left: 140px;">
117+
<div class="row-gap" style="width: 30px;"></div>
118+
<div style="width: 80px; height: 10px;"></div>
119+
<div class="row-gap" style="width: 30px;"></div>
112120
</div>
113121
<div class="row-gap-group" style="top: 20px; left: 170px; width: 80px;">
114122
<div class="row-gap" style="background: blue;"> </div>
115123
</div>
124+
<div class="row-gap-group" style="left: 280px; top: 10px;">
125+
<div class="row-gap"></div>
126+
</div>
116127
</div>

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013-ref.html‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 20px 20px 20px 20px 10px 10px 10px 10px;
20+
grid-template-rows: 20px 20px 20px 20px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
height: 140px;
@@ -28,14 +28,14 @@
2828
grid-template-rows: subgrid;
2929
background: orange;
3030
grid-column: 2 / -2;
31-
grid-row: 2 / 5;
31+
grid-row: 2 / 6;
3232
}
3333
.inner-subgrid {
3434
display: grid;
3535
grid-template-columns: subgrid;
3636
grid-template-rows: subgrid;
3737
grid-column: 2 / -1;
38-
grid-row: 2/ -1;
38+
grid-row: 2/ 4;
3939
}
4040
.col-gap-group {
4141
position: absolute;
@@ -90,7 +90,20 @@
9090
<div class="col-gap" style="background: red;"></div>
9191
<div class="col-gap"></div>
9292
</div>
93-
<div class="col-gap-group" style="left: 580px">
93+
<div class="col-gap-group" style="left: 580px; height: 10px; gap: 80px;">
94+
<div class="col-gap"></div>
95+
<div class="col-gap"></div>
96+
</div>
97+
<div class="col-gap-group" style="left: 610px; height: 10px;">
98+
<div class="col-gap" style="background: white;"></div>
99+
</div>
100+
<div class="col-gap-group" style="left: 580px; height: 10px; top: 10px;">
101+
<div class="col-gap"></div>
102+
<div class="col-gap"></div>
103+
<div class="col-gap"></div>
104+
<div class="col-gap"></div>
105+
</div>
106+
<div class="col-gap-group" style="left: 720px">
94107
<div class="col-gap"></div>
95108
<div class="col-gap"></div>
96109
<div class="col-gap"></div>

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014-ref.html‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px;
20+
grid-template-rows: 20px 10px 20px 10px 20px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
}
@@ -27,7 +27,7 @@
2727
grid-template-rows: subgrid;
2828
background: teal;
2929
grid-column: 2 / -2;
30-
grid-row: 3 / -3;
30+
grid-row: 3 / 8;
3131
background: orange;
3232
}
3333
.item {
@@ -76,9 +76,12 @@
7676
<div class="col-gap" style="background: white;"></div>
7777
</div>
7878

79-
<div class="col-gap-group" style="left: 160px; height: 50px;">
79+
<div class="col-gap-group" style="left: 160px; height: 60px; gap: 80px;">
8080
<div class="col-gap"></div>
8181
<div class="col-gap"></div>
82+
</div>
83+
84+
<div class="col-gap-group" style="left: 190px; height: 30px; top: 30px;">
8285
<div class="col-gap"></div>
8386
<div class="col-gap"></div>
8487
</div>
@@ -98,7 +101,7 @@
98101
<div class="row-gap" style="width: 20px;"></div>
99102
</div>
100103

101-
<div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;">
104+
<div class="row-gap-group" style="flex-direction: row; width: 140px; top: 30px; left:140px;">
102105
<div class="row-gap" style="width: 30px;"></div>
103106
<div class="row-gap" style="width: 80px;"></div>
104107
<div class="row-gap" style="width: 30px;"></div>

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015-ref.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px;
20+
grid-template-rows: 20px 10px 20px 10px 20px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
}
@@ -26,7 +26,7 @@
2626
grid-template-columns: subgrid;
2727
grid-template-rows: subgrid;
2828
grid-column: 2 / -2;
29-
grid-row: 3 / -3;
29+
grid-row: 3 / 8;
3030
}
3131
.item {
3232
background: purple;
@@ -104,22 +104,23 @@
104104
</div>
105105
</div>
106106

107-
<div class="col-gap-group" style="left: 160px; height: 50px;">
107+
<div class="col-gap-group" style="left: 160px; height: 60px; gap: 80px;">
108108
<div class="col-gap">
109-
<div class="col-gap-segment"></div>
109+
<div class="col-gap-segment" style="height: 30px;"></div>
110110
<div class="col-gap-segment"></div>
111111
</div>
112112
<div class="col-gap">
113-
<div class="col-gap-segment"></div>
113+
<div class="col-gap-segment" style="height: 30px;"></div>
114114
<div class="col-gap-segment"></div>
115115
</div>
116+
</div>
117+
118+
<div class="col-gap-group" style="left: 190px; height: 20px; top: 40px;">
116119
<div class="col-gap">
117120
<div class="col-gap-segment"></div>
118-
<div class="col-gap-segment"></div>
119121
</div>
120122
<div class="col-gap">
121123
<div class="col-gap-segment"></div>
122-
<div class="col-gap-segment"></div>
123124
</div>
124125
</div>
125126

@@ -157,7 +158,7 @@
157158
</div>
158159
</div>
159160

160-
<div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;">
161+
<div class="row-gap-group" style="flex-direction: row; width: 140px; top: 30px; left:140px;">
161162
<div class="row-gap" style="width: 140px;">
162163
<div class="row-gap-segment"></div>
163164
<div class="row-gap-segment"></div>

‎css/css-gaps/grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017-ref.html‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
.grid-container {
1818
display: grid;
1919
grid-template-columns: repeat(5, 1fr);
20-
grid-template-rows: 20px 10px 20px 10px 20px 20px 10px 20px 10px;
20+
grid-template-rows: 20px 10px 20px 10px 20px 10px 10px 10px 10px 10px 10px;
2121
background: lightgray;
2222
column-gap: 10px;
2323
}
@@ -27,7 +27,7 @@
2727
grid-template-rows: subgrid;
2828
background: teal;
2929
grid-column: 2 / -2;
30-
grid-row: 3 / -3;
30+
grid-row: 3 / 8;
3131
background: orange;
3232
}
3333
.item {
@@ -61,8 +61,10 @@
6161
.spanner {
6262
background: purple;
6363
grid-column: 2/ -2;
64-
grid-row: -2/-3;
64+
grid-row: 9/12;
6565
opacity: 0.5;
66+
position: relative;
67+
z-index: 1;
6668
}
6769
</style>
6870
<div class="multicol">
@@ -83,7 +85,7 @@
8385
<div class="col-gap" style="background: white;"></div>
8486
</div>
8587

86-
<div class="col-gap-group" style="left: 160px; height: 50px; column-gap: 80px;">
88+
<div class="col-gap-group" style="left: 160px; height: 60px; column-gap: 80px;">
8789
<div class="col-gap"></div>
8890
<div class="col-gap"></div>
8991
</div>
@@ -103,7 +105,7 @@
103105
<div class="row-gap" style="width: 20px;"></div>
104106
</div>
105107

106-
<div class="row-gap-group" style="flex-direction: row; width: 140px; left:140px;">
108+
<div class="row-gap-group" style="flex-direction: row; width: 140px; top: 30px; left:140px;">
107109
<div class="row-gap" style="width: 30px;"></div>
108110
<div class="row-gap" style="width: 80px;"></div>
109111
<div class="row-gap" style="width: 30px;"></div>

0 commit comments

Comments
 (0)