Skip to content

Commit 268ccfe

Browse files
tuankiet65tuankiet65
committed
Add anchor positioning visibility tests.
These tests concern a bug in WebKit where an initially hidden anchor-positioned element (`display: none`, `visibility: hidden` or hidden popover) is not rendered properly when the element is subsequent shown (by changing `display`, `visibility` or shown popover). More specifically, the element itself is rendered but not its descendants. See webkit.org/b/291065.
1 parent 703a840 commit 268ccfe

File tree

4 files changed

+260
-13
lines changed

4 files changed

+260
-13
lines changed

‎css/css-anchor-position/anchor-center-visibility-change-ref.html

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,43 @@
1717
background: lime;
1818
}
1919

20+
.target-inner {
21+
width: 30px;
22+
height: 20px;
23+
}
24+
2025
.target {
21-
position: fixed;
26+
position: absolute;
27+
}
28+
29+
#target-1 {
2230
background: cyan;
23-
left: 111px;
31+
left: 50px;
32+
}
33+
34+
#target-2 {
35+
top: 20px;
36+
left: 0;
37+
background: blue;
2438
}
39+
40+
#target-3 {
41+
top: 20px;
42+
left: 50px;
43+
background: magenta;
44+
}
45+
2546
</style>
2647

2748
<div class="container">
2849
<div class="anchor"></div>
29-
<div class="target">
30-
<div style="width:30px;height:20px;"></div>
50+
<div id="target-1" class="target">
51+
<div class="target-inner"></div>
52+
</div>
53+
<div id="target-2" class="target">
54+
<div class="target-inner"></div>
55+
</div>
56+
<div id="target-3" class="target">
57+
<div class="target-inner"></div>
3158
</div>
3259
</div>

‎css/css-anchor-position/anchor-center-visibility-change.html

Lines changed: 44 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!DOCTYPE html>
22
<html class=reftest-wait>
3-
<title>Tests 'anchor-center' value when target visibility changes</title>
3+
<title>Tests 'anchor-center' value when target visibility changes (by changing 'display', 'visibility', or popover trigger)</title>
44
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#valdef-justify-self-anchor-center">
55
<link rel="author" href="mailto:[email protected]">
6+
<link rel="author" href="mailto:[email protected]">
67
<link rel="match" href="anchor-center-visibility-change-ref.html">
78
<script src="/common/reftest-wait.js"></script>
89
<script src="/common/rendering-utils.js"></script>
@@ -27,27 +28,61 @@
2728

2829
.target {
2930
position-anchor: --anchor;
30-
position: fixed;
31-
background: cyan;
31+
position: absolute;
32+
}
33+
34+
.target-inner {
35+
width: 30px;
36+
height: 20px;
37+
}
38+
39+
#target-1 {
3240
justify-self: anchor-center;
41+
background: cyan;
3342
display: none;
3443
}
44+
45+
#target-2 {
46+
align-self: anchor-center;
47+
background: blue;
48+
visibility: hidden;
49+
}
50+
51+
#target-3 {
52+
align-self: anchor-center;
53+
justify-self: anchor-center;
54+
background: magenta;
55+
56+
/* Override default popover style */
57+
margin: 0;
58+
padding: 0;
59+
border: none;
60+
}
3561
</style>
3662

3763
<div class="container">
3864
<div class="anchor"></div>
39-
<div id="target" class="target">
40-
<div style="width:30px;height:20px;"></div>
65+
<div id="target-1" class="target">
66+
<div class="target-inner"></div>
67+
</div>
68+
<div id="target-2" class="target">
69+
<div class="target-inner"></div>
70+
</div>
71+
<div id="target-3" class="target" popover>
72+
<div class="target-inner"></div>
4173
</div>
4274
</div>
4375

4476
<script>
45-
// #target should be invisible initially.
77+
// Targets should be invisible initially.
4678
waitForAtLeastOneFrame().then(() => {
47-
// Change #target to be visible.
48-
document.getElementById('target').style.display = 'flow';
79+
// Change targets to be visible.
80+
document.getElementById('target-1').style.display = 'flow';
81+
document.getElementById('target-2').style.visibility = 'visible';
82+
document.getElementById('target-3').showPopover();
83+
4984
waitForAtLeastOneFrame().then(() => {
50-
// #target should be visible and anchor-centered now.
85+
// Targets should be visible now.
5186
takeScreenshot();
5287
});
5388
});

‎css/css-anchor-position/position-area-visibility-change.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
3+
<html class="reftest-wait">
4+
5+
<head>
6+
<title>Tests that an element positioned using position-area renders when it's initially hidden, then shown</title>
7+
8+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area">
9+
<link rel="author" href="mailto:[email protected]">
10+
<link rel="match" href="reference/position-area-visibility-change-ref.html">
11+
12+
<script src="/common/reftest-wait.js"></script>
13+
<script src="/common/rendering-utils.js"></script>
14+
15+
<style>
16+
.containing-block {
17+
position: relative;
18+
width: 150px;
19+
height: 150px;
20+
outline: 2px black solid;
21+
}
22+
23+
.cell {
24+
width: 50px;
25+
height: 50px;
26+
}
27+
28+
#anchor-cell {
29+
position: absolute;
30+
top: 50px;
31+
left: 50px;
32+
33+
anchor-name: --anchor;
34+
35+
background: green;
36+
}
37+
38+
.anchor-positioned-cell {
39+
position: absolute;
40+
position-anchor: --anchor;
41+
}
42+
43+
#target-1 {
44+
position-area: top right;
45+
46+
/* Will be changed to 'block' */
47+
display: none;
48+
}
49+
50+
#target-2 {
51+
position-area: bottom left;
52+
53+
/* Will be changed to 'visible' */
54+
visibility: hidden;
55+
}
56+
57+
#target-3 {
58+
position-area: bottom right;
59+
60+
/* Override default popover style */
61+
margin: 0;
62+
padding: 0;
63+
border: none;
64+
}
65+
66+
.blue-background {
67+
background: blue;
68+
}
69+
70+
.magenta-background {
71+
background: magenta;
72+
}
73+
74+
.cyan-background {
75+
background: cyan;
76+
}
77+
</style>
78+
</head>
79+
80+
<body>
81+
<div class="containing-block">
82+
<div class="cell" id="anchor-cell"></div>
83+
84+
<div class="cell anchor-positioned-cell" id="target-1">
85+
<div class="cell blue-background"></div>
86+
</div>
87+
88+
<div class="cell anchor-positioned-cell" id="target-2">
89+
<div class="cell magenta-background"></div>
90+
</div>
91+
92+
<div class="cell anchor-positioned-cell" id="target-3" popover>
93+
<div class="cell cyan-background"></div>
94+
</div>
95+
</div>
96+
97+
<script>
98+
// All targets should initially be hidden.
99+
waitForAtLeastOneFrame().then(() => {
100+
// Change targets to be visible.
101+
document.getElementById('target-1').style.display = 'block';
102+
document.getElementById('target-2').style.visibility = 'visible';
103+
document.getElementById('target-3').showPopover();
104+
105+
waitForAtLeastOneFrame().then(() => {
106+
// All targets should be visible now.
107+
takeScreenshot();
108+
});
109+
});
110+
</script>
111+
</body>
112+
113+
</html>

‎css/css-anchor-position/reference/position-area-visibility-change-ref.html

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
3+
<style>
4+
.containing-block {
5+
position: relative;
6+
width: 150px;
7+
height: 150px;
8+
outline: 2px black solid;
9+
}
10+
11+
.cell {
12+
width: 50px;
13+
height: 50px;
14+
}
15+
16+
#anchor-cell {
17+
position: absolute;
18+
top: 50px;
19+
left: 50px;
20+
21+
background: green;
22+
}
23+
24+
.anchor-positioned-cell {
25+
position: absolute;
26+
}
27+
28+
#target-1 {
29+
top: 0;
30+
right: 0;
31+
}
32+
33+
#target-2 {
34+
bottom: 0;
35+
left: 0;
36+
}
37+
38+
#target-3 {
39+
bottom: 0;
40+
right: 0;
41+
}
42+
43+
.blue-background {
44+
background: blue;
45+
}
46+
47+
.magenta-background {
48+
background: magenta;
49+
}
50+
51+
.cyan-background {
52+
background: cyan;
53+
}
54+
</style>
55+
56+
<body>
57+
<div class="containing-block">
58+
<div class="cell" id="anchor-cell"></div>
59+
60+
<div class="cell anchor-positioned-cell" id="target-1">
61+
<div class="cell blue-background"></div>
62+
</div>
63+
64+
<div class="cell anchor-positioned-cell" id="target-2">
65+
<div class="cell magenta-background"></div>
66+
</div>
67+
68+
<div class="cell anchor-positioned-cell" id="target-3">
69+
<div class="cell cyan-background"></div>
70+
</div>
71+
</div>
72+
</body>

0 commit comments

Comments
 (0)