Skip to content

Commit 7a87864

Browse files
Javier Contreras Tenoriochromium-wpt-export-bot
Javier Contreras Tenorio
authored and
chromium-wpt-export-bot
committed
[gap-decorations] Tests cases with orthogonal items
This CL adds tests for flex and multicol with orthogonal items. It doesn't add one with rule-break for multicol because due to some recent issues with the spec, it is unclear what the behavior we want will be. Bug: 357648037 Change-Id: Ibbbec8cad7a4d796d191cf5ca6d3c295737cda03 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7169205 Commit-Queue: Javier Contreras <[email protected]> Reviewed-by: Alison Maher <[email protected]> Cr-Commit-Position: refs/heads/main@{#1546714}
1 parent 5d8fd26 commit 7a87864

File tree

6 files changed

+309
-0
lines changed

6 files changed

+309
-0
lines changed

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
background-color: rgb(96 139 168 / 0.2);
11+
}
12+
13+
#flexbox {
14+
display: flex;
15+
column-gap: 10px;
16+
row-gap: 30px;
17+
height: 130px;
18+
width: 230px;
19+
flex-wrap: wrap;
20+
align-content: center;
21+
}
22+
23+
.items {
24+
width: 70px;
25+
height: 50px;
26+
writing-mode: vertical-rl;
27+
}
28+
29+
.row-rule {
30+
position: absolute;
31+
height: 30px;
32+
width: 70px;
33+
background: blue;
34+
top: 50px;
35+
}
36+
37+
.col-rule {
38+
position: absolute;
39+
width: 10px;
40+
height: 50px;
41+
background: red;
42+
}
43+
</style>
44+
45+
<div class="row-rule" style="left: 0px;"></div>
46+
<div class="row-rule" style="left: 80px;"></div>
47+
<div class="row-rule" style="left: 160px;"></div>
48+
49+
<div class="col-rule" style="left: 70px;"></div>
50+
<div class="col-rule" style="left: 70px; top: 80px;"></div>
51+
<div class="col-rule" style="left: 150px;"></div>
52+
<div class="col-rule" style="left: 150px; top: 80px;"></div>
53+
54+
<div id="flexbox">
55+
<div class="items">One</div>
56+
<div class="items">Two</div>
57+
<div class="items">Three</div>
58+
<div class="items">Four</div>
59+
<div class="items">Five</div>
60+
<div class="items">Six</div>
61+
</div>

‎css/css-gaps/flex/flex-gap-decorations-031.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: flex column and row gaps are painted with rule break intersection and orthogonal items.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-031-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+
background-color: rgb(96 139 168 / 0.2);
15+
}
16+
17+
#flexbox {
18+
display: flex;
19+
column-gap: 10px;
20+
column-rule: 10px solid red;
21+
column-rule-break: intersection;
22+
column-rule-inset: 0;
23+
row-gap: 30px;
24+
row-rule: 30px solid blue;
25+
row-rule-break: intersection;
26+
row-rule-inset: 0;
27+
height: 130px;
28+
width: 230px;
29+
flex-wrap: wrap;
30+
align-content: center;
31+
}
32+
33+
.items {
34+
width: 70px;
35+
height: 50px;
36+
writing-mode: vertical-rl;
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">Four</div>
45+
<div class="items">Five</div>
46+
<div class="items">Six</div>
47+
</div>

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

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
background-color: rgb(96 139 168 / 0.2);
11+
}
12+
13+
#flexbox {
14+
display: flex;
15+
column-gap: 10px;
16+
row-gap: 30px;
17+
height: 130px;
18+
width: 230px;
19+
flex-wrap: wrap;
20+
align-content: center;
21+
}
22+
23+
.items {
24+
width: 70px;
25+
height: 50px;
26+
writing-mode: vertical-rl;
27+
}
28+
29+
.row-rule {
30+
position: absolute;
31+
height: 30px;
32+
width: 230px;
33+
background: blue;
34+
top: 50px;
35+
}
36+
37+
.col-rule {
38+
position: absolute;
39+
width: 10px;
40+
height: 130px;
41+
background: red;
42+
}
43+
</style>
44+
45+
46+
<div class="col-rule" style="left: 70px;"></div>
47+
<div class="col-rule" style="left: 150px;"></div>
48+
49+
<div class="row-rule" style="left: 0px;"></div>
50+
51+
<div id="flexbox">
52+
<div class="items">One</div>
53+
<div class="items">Two</div>
54+
<div class="items">Three</div>
55+
<div class="items">Four</div>
56+
<div class="items">Five</div>
57+
<div class="items">Six</div>
58+
</div>

‎css/css-gaps/flex/flex-gap-decorations-032.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: flex column and row gaps are painted with orthogonal items.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="flex-gap-decorations-032-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+
background-color: rgb(96 139 168 / 0.2);
15+
}
16+
17+
#flexbox {
18+
display: flex;
19+
column-gap: 10px;
20+
column-rule: 10px solid red;
21+
row-gap: 30px;
22+
row-rule: 30px solid blue;
23+
height: 130px;
24+
width: 230px;
25+
flex-wrap: wrap;
26+
align-content: center;
27+
}
28+
29+
.items {
30+
width: 70px;
31+
height: 50px;
32+
writing-mode: vertical-rl;
33+
}
34+
</style>
35+
36+
<div id="flexbox">
37+
<div class="items">One</div>
38+
<div class="items">Two</div>
39+
<div class="items">Three</div>
40+
<div class="items">Four</div>
41+
<div class="items">Five</div>
42+
<div class="items">Six</div>
43+
</div>

‎css/css-gaps/multicol/multicol-gap-decorations-024-ref.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
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+
.container {
10+
width: 200px;
11+
height: 150px;
12+
column-count: 3;
13+
column-width: 60px;
14+
column-height: 70px;
15+
column-gap: 10px;
16+
row-gap: 10px;
17+
column-wrap: wrap;
18+
}
19+
20+
.items {
21+
background: rgb(96 139 168 / 0.2);
22+
height: 70px;
23+
width: 60px;
24+
margin: 0px;
25+
writing-mode: vertical-rl;
26+
}
27+
28+
.col-rule {
29+
position: absolute;
30+
top: 0px;
31+
height: 150px;
32+
width: 10px;
33+
background: blue;
34+
}
35+
36+
.row-rule {
37+
position: absolute;
38+
height: 10px;
39+
width: 200px;
40+
background: gold;
41+
left: 0px;
42+
top: 70px;
43+
}
44+
</style>
45+
46+
<div class="col-rule" style="left: 60px;"></div>
47+
<div class="col-rule" style="left: 130px;"></div>
48+
49+
<div class="row-rule"></div>
50+
51+
<div class="container">
52+
<div class="items"></div>
53+
<div class="items"></div>
54+
<div class="items"></div>
55+
<div class="items"></div>
56+
<div class="items"></div>
57+
<div class="items"></div>
58+
</div>

‎css/css-gaps/multicol/multicol-gap-decorations-024.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<title>
3+
CSS Gap Decorations: Multicolumn gap decorations painted with column-wrap and orthogonal items.
4+
</title>
5+
<link rel="help" href="https://drafts.csswg.org/css-gaps-1/">
6+
<link rel="match" href="multicol-gap-decorations-024-ref.html">
7+
<link rel="author" title="Javier Contreras" href="mailto:[email protected]">
8+
<style>
9+
body {
10+
margin: 0px;
11+
}
12+
13+
.container {
14+
width: 200px;
15+
height: 150px;
16+
column-count: 3;
17+
column-width: 60px;
18+
column-height: 70px;
19+
column-gap: 10px;
20+
row-gap: 10px;
21+
column-rule: 10px solid blue;
22+
row-rule: 10px solid gold;
23+
column-wrap: wrap;
24+
}
25+
26+
.items {
27+
background: rgb(96 139 168 / 0.2);
28+
height: 70px;
29+
width: 60px;
30+
margin: 0px;
31+
writing-mode: vertical-rl;
32+
}
33+
</style>
34+
35+
<div class="container">
36+
<div class="items"></div>
37+
<div class="items"></div>
38+
<div class="items"></div>
39+
<div class="items"></div>
40+
<div class="items"></div>
41+
<div class="items"></div>
42+
</div>

0 commit comments

Comments
 (0)