at-position-try-invalidation-shadow-dom.html (1204B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Dynamically change @position-try rules in Shadow DOM</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 body { margin: 0; } 8 #host { width: 200px } 9 </style> 10 11 <div id="host"> 12 <template shadowrootmode="open"> 13 <style> 14 ::slotted(#slotted), :host { 15 position-try-fallbacks: --pf; 16 position: absolute; 17 left: 999999px; /* force fallback */ 18 } 19 </style> 20 <slot></slot> 21 </template> 22 <div id="slotted"></div> 23 </div> 24 25 <script> 26 test(() => { 27 assert_equals(host.offsetLeft, 999999); 28 }, "#host is initially left: 999999px"); 29 30 test(() => { 31 assert_equals(slotted.offsetLeft, 999999); 32 }, "#slotted is initially left: 999999px"); 33 34 host.shadowRoot.styleSheets[0].insertRule(` 35 @position-try --pf { left: 100px; } 36 `); 37 38 test(() => { 39 assert_equals(host.offsetLeft, 100); 40 }, "#host with inserted @position-try applied"); 41 42 test(() => { 43 assert_equals(slotted.offsetLeft, 100); 44 }, "#slotted with inserted @position-try applied"); 45 </script>