Skip to content

Commit bb20d7d

Browse files
stevennovaryoservo-wpt-sync
stevennovaryo
authored and
servo-wpt-sync
committed
Fix fixed position descendant
Signed-off-by: stevennovaryo <[email protected]>
1 parent 3bd8256 commit bb20d7d

4 files changed

+168
-70
lines changed

‎css/css-grid/grid-items/grid-items-relative-positioned-absolute-child.html

-42
This file was deleted.

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

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
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="../reference/grid-items-relative-positioned-containing-block-ref.html">
10+
<meta name="assert" content="Ensures that relative positioned grid item established as a containing block correctly.">
11+
<style>
12+
.grid {
13+
display: grid;
14+
width: 100%;
15+
height: 60px;
16+
grid-template-columns: 50px;
17+
grid-template-rows: 50px;
18+
}
19+
.container {
20+
position: relative;
21+
grid-area: 1 / 1;
22+
}
23+
.box1 {
24+
position: absolute;
25+
width: 50px;
26+
height: 50px;
27+
grid-area: 1 / 1;
28+
}
29+
.box-abspos {
30+
position: absolute;
31+
width: 100%;
32+
height: 100%;
33+
}
34+
.box-fixpos {
35+
position: fixed;
36+
width: 50px;
37+
height: 50px;
38+
}
39+
.red {
40+
background: red;
41+
}
42+
.green {
43+
background: green;
44+
}
45+
</style>
46+
<p>Test passes if there are several identical green squares and no red area.</p>
47+
48+
<p>Relative positioned grid item with <strong>absolute</strong> positioned descendant.</p>
49+
50+
<div class="grid">
51+
<div class="container">
52+
<div class="box-abspos red"></div>
53+
</div>
54+
<div class="box1 green"></div>
55+
</div>
56+
57+
<div class="grid">
58+
<div class="container">
59+
<div>
60+
<span>
61+
<div class="box-abspos red"></div>
62+
</span>
63+
</div>
64+
</div>
65+
<div class="box1 green"></div>
66+
</div>
67+
68+
69+
<div class="grid">
70+
<div class="box1 red"></div>
71+
<div class="container">
72+
<div class="box-abspos green"></div>
73+
</div>
74+
</div>
75+
76+
<p>Relative positioned grid item with <strong>fixed</strong> positioned descendant.</p>
77+
78+
<div class="grid">
79+
<div class="container">
80+
<div class="box-fixpos red"></div>
81+
</div>
82+
<div class="box1 green"></div>
83+
</div>
84+
85+
<div class="grid">
86+
<div class="container">
87+
<div>
88+
<span>
89+
<div class="box-fixpos red"></div>
90+
</span>
91+
</div>
92+
</div>
93+
<div class="box1 green"></div>
94+
</div>
95+
96+
<p>Relative positioned grid item with <strong>absolute</strong> and <strong>fixed</strong> positioned descendant.</p>
97+
98+
<div class="grid">
99+
<div class="container">
100+
<div class="box-fixpos red"></div>
101+
<div class="box-abspos red"></div>
102+
</div>
103+
<div class="box1 green"></div>
104+
</div>

‎css/css-grid/reference/grid-items-relative-positioned-absolute-child-ref.html

-28
This file was deleted.

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

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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+
<meta name="assert" content="Ensures that relative positioned grid item established as a containing block correctly.">
10+
<style>
11+
.grid {
12+
display: grid;
13+
width: 100%;
14+
height: 60px;
15+
grid-template-columns: 50px;
16+
grid-template-rows: 50px;
17+
}
18+
.container {
19+
position: relative;
20+
}
21+
.box1 {
22+
position: absolute;
23+
width: 50px;
24+
height: 50px;
25+
grid-area: 1 / 1;
26+
}
27+
.red {
28+
background: red;
29+
}
30+
.green {
31+
background: green;
32+
}
33+
</style>
34+
<p>Test passes if there are several identical green squares and no red area.</p>
35+
36+
<p>Relative positioned grid item with <strong>absolute</strong> positioned descendant.</p>
37+
38+
<div class="grid">
39+
<div class="box1 green"></div>
40+
</div>
41+
42+
<div class="grid">
43+
<div class="box1 green"></div>
44+
</div>
45+
46+
<div class="grid">
47+
<div class="box1 green"></div>
48+
</div>
49+
50+
<p>Relative positioned grid item with <strong>fixed</strong> positioned descendant.</p>
51+
52+
<div class="grid">
53+
<div class="box1 green"></div>
54+
</div>
55+
56+
<div class="grid">
57+
<div class="box1 green"></div>
58+
</div>
59+
60+
<p>Relative positioned grid item with <strong>absolute</strong> and <strong>fixed</strong> positioned descendant.</p>
61+
62+
<div class="grid">
63+
<div class="box1 green"></div>
64+
</div>

0 commit comments

Comments
 (0)