chrome-443261872.html (1143B)
1 <!DOCTYPE html> 2 <title>Chrome bug 443261872: style attribute invalidation for tree-scoped anchor-name</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#name"> 4 <link rel="help" href="https://crbug.com/443261872"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 </style> 9 <div id="host"> 10 <template shadowrootmode="open"> 11 <style> 12 #anchor { 13 width: 100px; 14 height: 100px; 15 } 16 #anchored { 17 position-anchor: --panel-anchor; 18 position: absolute; 19 inset: anchor(top) anchor(right) anchor(bottom) anchor(left); 20 } 21 </style> 22 <div id="anchor" style="anchor-name:--panel-anchor; color:yellow"></div> 23 <div id="anchored"></div> 24 </template> 25 </div> 26 <script> 27 test(() => { 28 const anchor = host.shadowRoot.querySelector("#anchor"); 29 const anchored = host.shadowRoot.querySelector("#anchored"); 30 anchored.offsetTop; 31 anchor.style.color = "pink"; 32 assert_equals(anchored.offsetWidth, 100); 33 }, "Changing inline style color does not change tree-scope for anchor-name"); 34 </script>