Skip to content

Commit 9147dba

Browse files
stevennovaryoservo-wpt-sync
stevennovaryo
authored and
servo-wpt-sync
committed
Split up the WPT test
Signed-off-by: stevennovaryo <[email protected]>
1 parent 41b9cfc commit 9147dba

8 files changed

+302
-168
lines changed

‎css/css-grid/grid-items/grid-items-relative-positioned-containing-block-001.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant</title>
4+
<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
6+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
8+
<link rel="help" href="https://github.com/servo/servo/issues/34535">
9+
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as an absolute containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
grid-template-columns: 100px;
16+
grid-template-rows: 100px;
17+
}
18+
.container {
19+
position: relative;
20+
grid-area: 1 / 1;
21+
}
22+
.box1 {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
grid-area: 1 / 1;
27+
}
28+
.box-abspos {
29+
position: absolute;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
.red {
34+
background: red;
35+
}
36+
.green {
37+
background: green;
38+
}
39+
</style>
40+
41+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
42+
43+
<div class="grid">
44+
<div class="container">
45+
<div class="box-abspos red"></div>
46+
</div>
47+
<div class="box1 green"></div>
48+
</div>

‎css/css-grid/grid-items/grid-items-relative-positioned-containing-block-002.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant</title>
4+
<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
6+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
8+
<link rel="help" href="https://github.com/servo/servo/issues/34535">
9+
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as an absolute containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
grid-template-columns: 100px;
16+
grid-template-rows: 100px;
17+
}
18+
.container {
19+
position: relative;
20+
grid-area: 1 / 1;
21+
}
22+
.box1 {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
grid-area: 1 / 1;
27+
}
28+
.box-abspos {
29+
position: absolute;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
.red {
34+
background: red;
35+
}
36+
.green {
37+
background: green;
38+
}
39+
</style>
40+
41+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
42+
43+
<div class="grid">
44+
<div class="container">
45+
<div>
46+
<span>
47+
<div class="box-abspos red"></div>
48+
</span>
49+
</div>
50+
</div>
51+
<div class="box1 green"></div>
52+
</div>

‎css/css-grid/grid-items/grid-items-relative-positioned-containing-block-003.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute Positioned Descendant</title>
4+
<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
6+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
8+
<link rel="help" href="https://github.com/servo/servo/issues/34535">
9+
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as an absolute containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
grid-template-columns: 100px;
16+
grid-template-rows: 100px;
17+
}
18+
.container {
19+
position: relative;
20+
grid-area: 1 / 1;
21+
}
22+
.box1 {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
grid-area: 1 / 1;
27+
}
28+
.box-abspos {
29+
position: absolute;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
.red {
34+
background: red;
35+
}
36+
.green {
37+
background: green;
38+
}
39+
</style>
40+
41+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
42+
43+
<div class="grid">
44+
<div class="box1 red"></div>
45+
<div class="container">
46+
<div class="box-abspos green"></div>
47+
</div>
48+
</div>

‎css/css-grid/grid-items/grid-items-relative-positioned-containing-block-004.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Fixed Positioned Descendant</title>
4+
<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
6+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
8+
<link rel="help" href="https://github.com/servo/servo/issues/34535">
9+
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as a absolute containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
grid-template-columns: 100px;
16+
grid-template-rows: 100px;
17+
}
18+
.container {
19+
position: relative;
20+
grid-area: 1 / 1;
21+
}
22+
.box1 {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
grid-area: 1 / 1;
27+
}
28+
.box-fixpos {
29+
position: fixed;
30+
width: 100px;
31+
height: 100px;
32+
}
33+
.red {
34+
background: red;
35+
}
36+
.green {
37+
background: green;
38+
}
39+
</style>
40+
41+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
42+
43+
<div class="grid">
44+
<div class="container">
45+
<div class="box-fixpos red"></div>
46+
</div>
47+
<div class="box1 green"></div>
48+
</div>

‎css/css-grid/grid-items/grid-items-relative-positioned-containing-block-005.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Fixed Positioned Descendant</title>
4+
<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
6+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
8+
<link rel="help" href="https://github.com/servo/servo/issues/34535">
9+
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as a absolute containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
grid-template-columns: 100px;
16+
grid-template-rows: 100px;
17+
}
18+
.container {
19+
position: relative;
20+
grid-area: 1 / 1;
21+
}
22+
.box1 {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
grid-area: 1 / 1;
27+
}
28+
.box-fixpos {
29+
position: fixed;
30+
width: 100px;
31+
height: 100px;
32+
}
33+
.red {
34+
background: red;
35+
}
36+
.green {
37+
background: green;
38+
}
39+
</style>
40+
41+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
42+
43+
<div class="grid">
44+
<div class="container">
45+
<div>
46+
<span>
47+
<div class="box-fixpos red"></div>
48+
</span>
49+
</div>
50+
</div>
51+
<div class="box1 green"></div>
52+
</div>

‎css/css-grid/grid-items/grid-items-relative-positioned-containing-block-006.html

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Grid Layout Test: Relative Positioned Grid Items as a Containing Block of Absolute and Fixed Positioned Descendant</title>
4+
<link rel="author" title="Jo Steven Novaryo" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#absolute-cb">
6+
<link rel="help" href="https://drafts.csswg.org/css-position-3/#fixed-cb">
7+
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-items">
8+
<link rel="help" href="https://github.com/servo/servo/issues/34535">
9+
<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as a absolute containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
grid-template-columns: 100px;
16+
grid-template-rows: 100px;
17+
}
18+
.container {
19+
position: relative;
20+
grid-area: 1 / 1;
21+
}
22+
.box1 {
23+
position: absolute;
24+
width: 100px;
25+
height: 100px;
26+
grid-area: 1 / 1;
27+
}
28+
.box-abspos {
29+
position: absolute;
30+
width: 100%;
31+
height: 100%;
32+
}
33+
.box-fixpos {
34+
position: fixed;
35+
width: 100px;
36+
height: 100px;
37+
}
38+
.red {
39+
background: red;
40+
}
41+
.green {
42+
background: green;
43+
}
44+
</style>
45+
46+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
47+
48+
<div class="grid">
49+
<div class="container">
50+
<div class="box-fixpos red"></div>
51+
<div class="box-abspos red"></div>
52+
</div>
53+
<div class="box1 green"></div>
54+
</div>

0 commit comments

Comments
 (0)