| <!DOCTYPE html> |
| <title>CSS Anchor Positioning Test: Dynamically change @position-fallback rules in Shadow DOM</title> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/declarative-shadow-dom-polyfill.js"></script> |
| <style> |
| body { margin: 0; } |
| </style> |
| |
| <div id="host"> |
| <template shadowrootmode="open"> |
| <style> |
| ::slotted(#slotted), :host { |
| position-fallback: --pf; |
| position: absolute; |
| } |
| </style> |
| <slot></slot> |
| </template> |
| <div id="slotted"></div> |
| </div> |
| |
| <script> |
| setup(() => { |
| polyfill_declarative_shadow_dom(host); |
| }); |
| |
| test(() => { |
| assert_equals(host.offsetLeft, 0); |
| }, "#host is initially left:auto"); |
| |
| test(() => { |
| assert_equals(slotted.offsetLeft, 0); |
| }, "#slotted is initially left:auto"); |
| |
| host.shadowRoot.styleSheets[0].insertRule(` |
| @position-fallback --pf { |
| @try { left: 100px; } |
| } |
| `); |
| |
| test(() => { |
| assert_equals(host.offsetLeft, 100); |
| }, "#host with inserted @position-fallback applied"); |
| |
| test(() => { |
| assert_equals(slotted.offsetLeft, 100); |
| }, "#slotted with inserted @position-fallback applied"); |
| </script> |
