anchor-name-in-shadow.html (1440B)
1 <!DOCTYPE html> 2 <title>anchor-name is a tree scoped reference</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#target-anchor-element"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 body { margin-top: 0; } 8 #anchor { 9 anchor-name: --anchor; 10 } 11 #filler { 12 height: 100px; 13 } 14 #anchored { 15 position: absolute; 16 top: anchor(--anchor top); 17 } 18 </style> 19 <div id="host"></div> 20 <div id="filler"></div> 21 <div id="anchor"></div> 22 <div id="anchored"></div> 23 <script> 24 const host_root = host.attachShadow({mode:"open"}); 25 host_root.innerHTML = ` 26 <style> 27 div { anchor-name: --anchor; } 28 </style> 29 <div></div> 30 `; 31 32 test(() => { 33 assert_equals(anchored.offsetTop, 100, "#anchored is positioned against #anchor"); 34 }, "anchor-name should not leak out of a shadow tree"); 35 </script> 36 37 <div id="anchor_host" style="anchor-name: --anchor-host"></div> 38 <script> 39 const anchor_host_root = anchor_host.attachShadow({mode:"open"}); 40 anchor_host_root.innerHTML = ` 41 <style> 42 div { 43 position: absolute; 44 left: anchor(--anchor-host left, 37px); 45 } 46 </style> 47 <div id="anchored"></div> 48 `; 49 50 test(() => { 51 assert_equals(anchor_host_root.querySelector("#anchored").offsetLeft, 37, "#anchored is positioned using fallback"); 52 }, "anchor() in shadow tree should not match host anchor-name"); 53 </script>