anchor-name-in-shadow-002.html (1404B)
1 <!DOCTYPE html> 2 <title>Tests that anchor names are correctly tree-scoped even with style sheet sharing</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#target-anchor-element"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 body { 10 margin: 0; 11 } 12 13 .host { 14 width: 100px; 15 height: 100px; 16 } 17 18 #host2 { 19 margin-left: 200px; 20 } 21 </style> 22 23 <div class="host" id="host1"></div> 24 <div class="host" id="host2"></div> 25 26 <script> 27 document.querySelectorAll('.host').forEach(host => { 28 let shadow = host.attachShadow({mode: 'open'}); 29 shadow.innerHTML = ` 30 <style> 31 div { width: 100px; height: 100px; } 32 #anchor { anchor-name: --a; background: orange; } 33 #target { 34 position: fixed; 35 background: lime; 36 left: anchor(--a left); 37 top: anchor(--a bottom); 38 } 39 </style> 40 <div id=anchor>anchor</div> 41 <div id=target>target</div> 42 `; 43 }); 44 45 test(() => { 46 const target1 = host1.shadowRoot.getElementById('target'); 47 assert_equals(target1.offsetLeft, 0); 48 assert_equals(target1.offsetTop, 100); 49 50 const target2 = host2.shadowRoot.getElementById('target'); 51 assert_equals(target2.offsetLeft, 200); 52 assert_equals(target2.offsetTop, 200); 53 }, 'Anchor names in different tree scopes should not be confused'); 54 </script>