at-position-try-invalidation.html (1540B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Dynamically change @position-try rules</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> 4 <meta name="viewport" content="width=device-width, initial-scale=1"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 body { margin: 0; } 9 10 #anchor { 11 anchor-name: --a; 12 margin-left: 100px; 13 width: 100px; 14 height: 100px; 15 } 16 17 #anchored { 18 position: absolute; 19 width: 100px; 20 height: 100px; 21 position-try-fallbacks: --pf; 22 left: 999999px; /* force fallback */ 23 } 24 </style> 25 26 <style id="to-enable" media="print"> 27 @position-try --pf { 28 left: anchor(--a left); 29 } 30 </style> 31 32 <div> 33 <div id="anchor">anchor</div> 34 <div id="anchored">anchored</div> 35 </div> 36 37 <script> 38 test(() => { 39 assert_equals(anchored.offsetLeft, 999999); 40 }, "position-try-fallbacks initially not matching any rules"); 41 42 test(() => { 43 document.getElementById("to-enable").media = ""; 44 assert_equals(anchored.offsetLeft, 100); 45 }, "Enable @position-try rule stylesheet"); 46 47 const sheet = document.getElementById("to-enable").sheet; 48 49 test(() => { 50 sheet.insertRule( 51 `@position-try --pf { 52 left: anchor(--a right); 53 }`, 1); 54 assert_equals(anchored.offsetLeft, 200); 55 }, "Insert overriding @position-try rule"); 56 57 test(() => { 58 sheet.disabled = "true"; 59 assert_equals(anchored.offsetLeft, 999999); 60 }, "Disable the @position-try rules"); 61 62 </script>