anchor-scope-shadow-flat-tree.html (1909B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: anchor-scope scopes to the flat tree</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10325"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id=host> 8 <template shadowrootmode=open> 9 <style> 10 ::slotted(.outer_anchored), .inner_anchored { 11 background: coral; 12 position: absolute; 13 top: anchor(bottom, 1px); 14 position-anchor: --a; 15 width: 5px; 16 height: 5px; 17 } 18 .anchor { 19 background: skyblue; 20 height: 10px; 21 anchor-name: --a; 22 } 23 .cb { 24 position: relative; 25 width: 200px; 26 height: 200px; 27 border: 1px solid black; 28 } 29 .scope { 30 anchor-scope: --a; 31 } 32 </style> 33 <div class=cb> 34 <div class=anchor></div> 35 <div class=scope> 36 <div class=anchor></div> 37 <slot></slot><!-- .outer_anchored appears here in the flat tree--> 38 </div> 39 <div class=inner_anchored></div> 40 </div> 41 </template> 42 <div class=outer_anchored></div> 43 </div> 44 <script> 45 test((t) => { 46 // The outer_anchored element is slotted into the <slot> in 47 // the shadow tree. It should be in the same anchor-scope 48 // as the second .anchor element. 49 let outer_anchored = document.querySelector('.outer_anchored'); 50 assert_equals(getComputedStyle(outer_anchored).top, '20px'); 51 52 // The inner_anchored element exists directly in the shadow tree, 53 // and can not see the second .anchor since it's hidden behind 54 // an anchor-scope. 55 let inner_anchored = host.shadowRoot.querySelector('.inner_anchored'); 56 assert_equals(getComputedStyle(inner_anchored).top, '10px'); 57 }, 'anchor-scope scopes to the flat tree'); 58 </script>