Skip to content

Commit 97ce25e

Browse files
tuankiet65tuankiet65
committed
1 parent a77960a commit 97ce25e

File tree

4 files changed

+111
-1
lines changed

4 files changed

+111
-1
lines changed

‎css/css-anchor-position/anchored-transition-display-none-ref.html‎ renamed to ‎css/css-anchor-position/anchored-transition-display-none-001-ref.html‎

File renamed without changes.

‎css/css-anchor-position/anchored-transition-display-none.html‎ renamed to ‎css/css-anchor-position/anchored-transition-display-none-001.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html id=html class="reftest-wait">
33
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1">
4-
<link rel="match" href="anchored-transition-display-none-ref.html">
4+
<link rel="match" href="anchored-transition-display-none-001-ref.html">
55
This is visible.
66
<div>FAIL if this is visible</div>
77

‎css/css-anchor-position/anchored-transition-display-none-002-ref.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
3+
<style>
4+
#containing-block {
5+
width: 300px;
6+
height: 300px;
7+
position: relative;
8+
outline: 1px black solid;
9+
}
10+
11+
#anchor {
12+
width: 100px;
13+
height: 100px;
14+
position: absolute;
15+
top: 100px;
16+
left: 0px;
17+
background: cyan;
18+
}
19+
20+
.anchored {
21+
position: absolute;
22+
width: 100px;
23+
height: 100px;
24+
}
25+
26+
#anchored-anchor-function {
27+
top: 200px;
28+
left: 100px;
29+
background: green;
30+
}
31+
32+
#anchored-position-area {
33+
top: 0px;
34+
left: 100px;
35+
background: blue;
36+
}
37+
</style>
38+
39+
<div id="containing-block">
40+
<div id="anchor"></div>
41+
<div class="anchored" id="anchored-anchor-function"></div>
42+
<div class="anchored" id="anchored-position-area"></div>
43+
</div>

‎css/css-anchor-position/anchored-transition-display-none-002.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
3+
<html class="reftest-wait">
4+
5+
<title>When anchor-positioned elements transition from display: block to none, it should keep its position until transition end</title>
6+
<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1">
7+
<link rel="author" href="mailto:[email protected]">
8+
<link rel="match" href="anchored-transition-display-none-002-ref.html">
9+
<script src="/common/reftest-wait.js"></script>
10+
<script src="/common/rendering-utils.js"></script>
11+
12+
<style>
13+
#containing-block {
14+
width: 300px;
15+
height: 300px;
16+
position: relative;
17+
outline: 1px black solid;
18+
}
19+
20+
#anchor {
21+
width: 100px;
22+
height: 100px;
23+
position: absolute;
24+
top: 100px;
25+
left: 0px;
26+
background: cyan;
27+
anchor-name: --anchor;
28+
}
29+
30+
.anchored {
31+
position: absolute;
32+
width: 100px;
33+
height: 100px;
34+
transition: display 99999s allow-discrete;
35+
}
36+
37+
#anchored-anchor-function {
38+
top: anchor(--anchor bottom);
39+
left: anchor(--anchor right);
40+
background: green;
41+
}
42+
43+
#anchored-position-area {
44+
position-anchor: --anchor;
45+
position-area: top right;
46+
background: blue;
47+
}
48+
</style>
49+
50+
<body onload="onLoad()">
51+
<div id="containing-block">
52+
<div id="anchor"></div>
53+
<div class="anchored" id="anchored-anchor-function"></div>
54+
<div class="anchored" id="anchored-position-area"></div>
55+
</div>
56+
57+
<script>
58+
function onLoad() {
59+
document.getElementById("anchored-anchor-function").style.display = "none";
60+
document.getElementById("anchored-position-area").style.display = "none";
61+
62+
waitForAtLeastOneFrame().then(takeScreenshot);
63+
}
64+
</script>
65+
</body>
66+
67+
</html>

0 commit comments

Comments
 (0)