Skip to content

Commit 853c3ce

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[masonry] Expand gap decoration WPTs for rule-inset and rule-break
Grid-lanes gap decorations did not have focused coverage for rule-inset endpoint or rule-break: none. Add an expected failure for overlapping stacking-axis gutters, whose percentage basis requires union-width behavior that is not yet implemented Bug: 343257585 Change-Id: I4e8f9283a4b30c51deaa378c4237f3ac5deb87b2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8269567 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Auto-Submit: Javier Contreras <javiercon@microsoft.com> Commit-Queue: Javier Contreras <javiercon@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1683489}
1 parent 5d45ecb commit 853c3ce

20 files changed

Lines changed: 678 additions & 0 deletions

‎css/css-gaps/grid-lanes/column-gap-decorations-break-stacking-axis-noop-ref.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14169">
6+
<style>
7+
body { margin: 0; }
8+
.lanes {
9+
display: grid-lanes;
10+
grid-template-columns: repeat(2, 80px);
11+
gap: 20px;
12+
background: #cdd5e0;
13+
width: max-content;
14+
}
15+
.lanes > div { background: #5b8def; }
16+
.a { grid-column: 1; height: 60px; }
17+
.b { grid-column: 2; height: 100px; }
18+
.c { grid-column: 1; height: 40px; }
19+
.s { grid-column: 1 / -1; height: 40px; background: #8a6df0; }
20+
.row-rule { position: absolute; height: 0; border-top: 4px solid gold; }
21+
</style>
22+
<div class="lanes">
23+
<div class="a"></div>
24+
<div class="b"></div>
25+
<div class="c"></div>
26+
<div class="s"></div>
27+
</div>
28+
<div class="row-rule" style="top: 68px; left: 0; width: 80px;"></div>
29+
<div class="row-rule" style="top: 128px; left: 0; width: 80px;"></div>
30+
<div class="row-rule" style="top: 128px; left: 100px; width: 80px;"></div>

‎css/css-gaps/grid-lanes/column-gap-decorations-break-stacking-axis-noop.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<title>CSS Gap Decorations: stacking-axis rule-break none keeps one rule segment per lane, including across a spanner, in column grid-lanes</title>
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#break">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/14169">
7+
<link rel="match" href="column-gap-decorations-break-stacking-axis-noop-ref.html">
8+
<style>
9+
body { margin: 0; }
10+
.lanes {
11+
display: grid-lanes;
12+
grid-template-columns: repeat(2, 80px);
13+
gap: 20px;
14+
background: #cdd5e0;
15+
width: max-content;
16+
row-rule: 4px solid gold;
17+
row-rule-break: none;
18+
}
19+
.lanes > div { background: #5b8def; }
20+
.a { grid-column: 1; height: 60px; }
21+
.b { grid-column: 2; height: 100px; }
22+
.c { grid-column: 1; height: 40px; }
23+
.s { grid-column: 1 / -1; height: 40px; background: #8a6df0; }
24+
</style>
25+
<div class="lanes">
26+
<div class="a"></div>
27+
<div class="b"></div>
28+
<div class="c"></div>
29+
<div class="s"></div>
30+
</div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-across-spanner-ref.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
5+
<style>
6+
body { margin: 0; }
7+
.lanes {
8+
display: grid-lanes;
9+
grid-template-columns: repeat(2, 80px);
10+
gap: 20px;
11+
background: #cdd5e0;
12+
width: max-content;
13+
}
14+
.lanes > div { background: #5b8def; }
15+
.lanes > div.span { grid-column: 1 / -1; height: 40px; background: #8a6df0; }
16+
.a { grid-column: 1; height: 60px; }
17+
.b { grid-column: 2; height: 60px; }
18+
.c { grid-column: 1; height: 60px; }
19+
.d { grid-column: 2; height: 60px; }
20+
.col-rule { position: absolute; width: 0; border-left: 4px solid blue; }
21+
.row-rule { position: absolute; height: 0; border-top: 4px solid gold; }
22+
</style>
23+
<div class="lanes">
24+
<div class="span"></div>
25+
<div class="a"></div>
26+
<div class="b"></div>
27+
<div class="span"></div>
28+
<div class="c"></div>
29+
<div class="d"></div>
30+
</div>
31+
<div class="col-rule" style="left: 88px; top: 66px; height: 48px;"></div>
32+
<div class="col-rule" style="left: 88px; top: 206px; height: 54px;"></div>
33+
<div class="row-rule" style="top: 48px; left: 0; width: 80px;"></div>
34+
<div class="row-rule" style="top: 128px; left: 0; width: 80px;"></div>
35+
<div class="row-rule" style="top: 188px; left: 0; width: 80px;"></div>
36+
<div class="row-rule" style="top: 48px; left: 100px; width: 80px;"></div>
37+
<div class="row-rule" style="top: 128px; left: 100px; width: 80px;"></div>
38+
<div class="row-rule" style="top: 188px; left: 100px; width: 80px;"></div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-across-spanner.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<title>CSS Gap Decorations: zero cap and 6px junction insets distinguish grid-axis rule endpoints around spanners in grid-lanes</title>
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
6+
<link rel="match" href="column-gap-decorations-inset-across-spanner-ref.html">
7+
<style>
8+
body { margin: 0; }
9+
.lanes {
10+
display: grid-lanes;
11+
grid-template-columns: repeat(2, 80px);
12+
gap: 20px;
13+
background: #cdd5e0;
14+
width: max-content;
15+
column-rule: 4px solid blue;
16+
row-rule: 4px solid gold;
17+
column-rule-inset-cap-start: 0;
18+
column-rule-inset-cap-end: 0;
19+
column-rule-inset-junction-start: 6px;
20+
column-rule-inset-junction-end: 6px;
21+
}
22+
.lanes > div { background: #5b8def; }
23+
.lanes > div.span { grid-column: 1 / -1; height: 40px; background: #8a6df0; }
24+
.a { grid-column: 1; height: 60px; }
25+
.b { grid-column: 2; height: 60px; }
26+
.c { grid-column: 1; height: 60px; }
27+
.d { grid-column: 2; height: 60px; }
28+
</style>
29+
<div class="lanes">
30+
<div class="span"></div>
31+
<div class="a"></div>
32+
<div class="b"></div>
33+
<div class="span"></div>
34+
<div class="c"></div>
35+
<div class="d"></div>
36+
</div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-cap-vs-junction-ref.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
5+
<style>
6+
body { margin: 0; }
7+
.lanes {
8+
display: grid-lanes;
9+
grid-template-columns: repeat(3, 80px);
10+
gap: 20px;
11+
background: #cdd5e0;
12+
width: max-content;
13+
}
14+
.lanes > div { background: #5b8def; }
15+
.a { grid-column: 1; height: 60px; }
16+
.b { grid-column: 1; height: 40px; }
17+
.c { grid-column: 2; height: 60px; }
18+
.f { grid-column: 2; height: 40px; }
19+
.d { grid-column: 3; height: 60px; }
20+
.e { grid-column: 3; height: 40px; }
21+
.col-rule { position: absolute; width: 0; border-left: 4px solid blue; }
22+
.row-rule { position: absolute; height: 0; border-top: 4px solid gold; }
23+
</style>
24+
<div class="lanes">
25+
<div class="a"></div>
26+
<div class="b"></div>
27+
<div class="c"></div>
28+
<div class="f"></div>
29+
<div class="d"></div>
30+
<div class="e"></div>
31+
</div>
32+
<div class="col-rule" style="left: 88px; top: 0; height: 120px;"></div>
33+
<div class="col-rule" style="left: 188px; top: 0; height: 120px;"></div>
34+
<div class="row-rule" style="top: 68px; left: 0; width: 62px;"></div>
35+
<div class="row-rule" style="top: 68px; left: 106px; width: 56px;"></div>
36+
<div class="row-rule" style="top: 68px; left: 206px; width: 74px;"></div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-cap-vs-junction.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<title>CSS Gap Decorations: stacking-axis rules distinguish zero cap insets from asymmetric junction insets in grid-lanes</title>
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
6+
<link rel="match" href="column-gap-decorations-inset-cap-vs-junction-ref.html">
7+
<style>
8+
body { margin: 0; }
9+
.lanes {
10+
display: grid-lanes;
11+
grid-template-columns: repeat(3, 80px);
12+
gap: 20px;
13+
background: #cdd5e0;
14+
width: max-content;
15+
column-rule: 4px solid blue;
16+
row-rule: 4px solid gold;
17+
row-rule-inset-cap-start: 0;
18+
row-rule-inset-cap-end: 0;
19+
row-rule-inset-junction-start: 6px;
20+
row-rule-inset-junction-end: 18px;
21+
}
22+
.lanes > div { background: #5b8def; }
23+
.a { grid-column: 1; height: 60px; }
24+
.b { grid-column: 1; height: 40px; }
25+
.c { grid-column: 2; height: 60px; }
26+
.f { grid-column: 2; height: 40px; }
27+
.d { grid-column: 3; height: 60px; }
28+
.e { grid-column: 3; height: 40px; }
29+
</style>
30+
<div class="lanes">
31+
<div class="a"></div>
32+
<div class="b"></div>
33+
<div class="c"></div>
34+
<div class="f"></div>
35+
<div class="d"></div>
36+
<div class="e"></div>
37+
</div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-negative-cap-ref.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
5+
<style>
6+
body { margin: 0; }
7+
.lanes {
8+
display: grid-lanes;
9+
grid-template-columns: repeat(2, 80px);
10+
gap: 20px;
11+
margin-left: 24px;
12+
background: #cdd5e0;
13+
width: max-content;
14+
}
15+
.lanes > div { background: #5b8def; }
16+
.a { grid-column: 1; height: 60px; }
17+
.b { grid-column: 1; height: 40px; }
18+
.c { grid-column: 2; height: 100px; }
19+
.d { grid-column: 2; height: 40px; }
20+
.col-rule { position: absolute; width: 0; border-left: 4px solid blue; }
21+
.row-rule { position: absolute; height: 0; border-top: 4px solid gold; }
22+
</style>
23+
<div class="lanes">
24+
<div class="a"></div>
25+
<div class="b"></div>
26+
<div class="c"></div>
27+
<div class="d"></div>
28+
</div>
29+
<div class="col-rule" style="left: 112px; top: 0; height: 160px;"></div>
30+
<div class="row-rule" style="top: 68px; left: 12px; width: 92px;"></div>
31+
<div class="row-rule" style="top: 108px; left: 124px; width: 92px;"></div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-negative-cap.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<title>CSS Gap Decorations: negative cap insets paint stacking-axis rules past the grid-axis content edges in column grid-lanes</title>
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
6+
<link rel="match" href="column-gap-decorations-inset-negative-cap-ref.html">
7+
<style>
8+
body { margin: 0; }
9+
.lanes {
10+
display: grid-lanes;
11+
grid-template-columns: repeat(2, 80px);
12+
gap: 20px;
13+
margin-left: 24px;
14+
background: #cdd5e0;
15+
width: max-content;
16+
column-rule: 4px solid blue;
17+
row-rule: 4px solid gold;
18+
row-rule-inset-cap-start: -12px;
19+
row-rule-inset-cap-end: -12px;
20+
}
21+
.lanes > div { background: #5b8def; }
22+
.a { grid-column: 1; height: 60px; }
23+
.b { grid-column: 1; height: 40px; }
24+
.c { grid-column: 2; height: 100px; }
25+
.d { grid-column: 2; height: 40px; }
26+
</style>
27+
<div class="lanes">
28+
<div class="a"></div>
29+
<div class="b"></div>
30+
<div class="c"></div>
31+
<div class="d"></div>
32+
</div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-negative-junction-ref.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
3+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
4+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
5+
<style>
6+
body { margin: 0; }
7+
.lanes {
8+
display: grid-lanes;
9+
grid-template-columns: repeat(2, 80px);
10+
gap: 20px;
11+
background: #cdd5e0;
12+
width: max-content;
13+
}
14+
.lanes > div { background: #5b8def; }
15+
.a { grid-column: 1; height: 60px; }
16+
.b { grid-column: 1; height: 40px; }
17+
.c { grid-column: 2; height: 100px; }
18+
.d { grid-column: 2; height: 40px; }
19+
.col-rule { position: absolute; width: 0; border-left: 4px solid blue; }
20+
.row-rule { position: absolute; height: 0; border-top: 4px solid gold; }
21+
</style>
22+
<div class="lanes">
23+
<div class="a"></div>
24+
<div class="b"></div>
25+
<div class="c"></div>
26+
<div class="d"></div>
27+
</div>
28+
<div class="col-rule" style="left: 88px; top: 0; height: 160px;"></div>
29+
<div class="row-rule" style="top: 68px; left: 0; width: 100px;"></div>
30+
<div class="row-rule" style="top: 108px; left: 80px; width: 100px;"></div>

‎css/css-gaps/grid-lanes/column-gap-decorations-inset-negative-junction.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<title>CSS Gap Decorations: negative junction insets extend stacking-axis rules across the grid-axis gutter and under the row-over-column paint order in grid-lanes</title>
3+
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
4+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/#inset">
5+
<link rel="help" href="https://drafts.csswg.org/css-grid-3/">
6+
<link rel="match" href="column-gap-decorations-inset-negative-junction-ref.html">
7+
<style>
8+
body { margin: 0; }
9+
.lanes {
10+
display: grid-lanes;
11+
grid-template-columns: repeat(2, 80px);
12+
gap: 20px;
13+
background: #cdd5e0;
14+
width: max-content;
15+
column-rule: 4px solid blue;
16+
row-rule: 4px solid gold;
17+
row-rule-inset-junction-start: -20px;
18+
row-rule-inset-junction-end: -20px;
19+
}
20+
.lanes > div { background: #5b8def; }
21+
.a { grid-column: 1; height: 60px; }
22+
.b { grid-column: 1; height: 40px; }
23+
.c { grid-column: 2; height: 100px; }
24+
.d { grid-column: 2; height: 40px; }
25+
</style>
26+
<div class="lanes">
27+
<div class="a"></div>
28+
<div class="b"></div>
29+
<div class="c"></div>
30+
<div class="d"></div>
31+
</div>

0 commit comments

Comments
 (0)