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
content / test / data / accessibility / css / anchor-positioning-changed-simple.html [blame]
<!--
@BLINK-ALLOW:details*
-->
<html>
<head><style>
#anchor1 {
anchor-name: --anchor-1;
position: absolute;
}
#anchor2 {
anchor-name: --anchor-2;
position: absolute;
}
p {
position: absolute;
position-anchor: --anchor-1;
bottom: anchor(top);
}
</style></head>
<body>
<button id="anchor1">anchor1</button>
<button id="anchor2">anchor2</button>
<div>
<p>target</p>
</div>
</body>
</html>
<script>
// Change the anchor of the target from anchor1 to anchor2. We expect
// detailsId to be set on anchor2 only.
let el2 = document.querySelector('p');
document.querySelector('p').style["bottom"]="";
document.querySelector('p').style["position-anchor"]="--anchor-2";
</script>