| <!DOCTYPE html> |
| <title>CSS Anchor Positioning Test: Dynamically change @position-fallback rules</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> |
| <style> |
| body { margin: 0; } |
| |
| #anchor { |
| anchor-name: --a; |
| margin-left: 100px; |
| width: 100px; |
| } |
| |
| #anchored { |
| position: absolute; |
| position-fallback: --pf; |
| } |
| </style> |
| |
| <style id="to-enable" media="print"> |
| @position-fallback --pf { |
| @try { left: anchor(--a left); } |
| } |
| </style> |
| |
| <div> |
| <div id="anchor">anchor</div> |
| <div id="anchored">anchored</div> |
| </div> |
| |
| <script> |
| test(() => { |
| assert_equals(anchored.offsetLeft, 0); |
| }, "Position-fallback initially not matching any rules"); |
| |
| test(() => { |
| document.getElementById("to-enable").media = ""; |
| assert_equals(anchored.offsetLeft, 100); |
| }, "Enable @position-fallback rule stylesheet"); |
| |
| const sheet = document.getElementById("to-enable").sheet; |
| |
| test(() => { |
| sheet.insertRule( |
| `@position-fallback --pf { |
| @try { left: anchor(--a right); } |
| }`, 1); |
| assert_equals(anchored.offsetLeft, 200); |
| }, "Insert overriding @position-fallback rule"); |
| |
| test(() => { |
| sheet.disabled = "true"; |
| assert_equals(anchored.offsetLeft, 0); |
| }, "Disable the @position-fallback rules"); |
| |
| </script> |
