1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
content / test / data / accessibility / css / anchor-positioning-position-fallback.html [blame]
<!--
@BLINK-ALLOW:details*
@EXECUTE-AND-WAIT-FOR:scroll()
-->
<html>
<head><style>
@position-try --alternative-anchoring {
position-anchor: --anchor2;
position-area: bottom;
}
.anchor1 {
anchor-name: --anchor1;
margin-top: 20px;
}
.anchor2 {
anchor-name: --anchor2;
}
.target {
position: absolute;
position-anchor: --anchor1;
position-area: top;
position-try: --alternative-anchoring;
}
body {
height: 2000px;
}
</style></head>
<body>
<div class="target">target</div>
<button class="anchor1">anchor1</button>
<button class="anchor2">anchor2</button>
</body>
</html>
<script>
// Before scroll() runs, target is anchored to anchor1, so anchor1 has detailsId set.
// Step 1: Scroll to the bottom of the page so that target is now anchored to anchor2.
// Expectation: anchor1 does not have detailsId set, anchor2 has detailsId set.
function scroll() {
window.scrollTo(0, document.body.scrollHeight);
document.title = "scroll() done";
return "scroll() done";
}
</script>