position-try-dynamic.html (966B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning Test: Dynamically change position via position-try-fallbacks property</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 body { margin: 0; } 8 9 @position-try --fallback1 { 10 left: anchor(--a1 right); 11 } 12 #anchor { 13 anchor-name: --a1; 14 width: 100px; 15 height: 100px; 16 } 17 #anchored { 18 position: absolute; 19 left: 999999px; /* Force fallback */ 20 width: 100px; 21 height: 100px; 22 } 23 </style> 24 <div id="anchor"></div> 25 <div id="anchored"></div> 26 <script> 27 test(() => { 28 assert_equals(anchored.offsetLeft, 999999); 29 }, "Initial static left position is 0"); 30 31 test(() => { 32 anchored.style.positionTryFallbacks = "--fallback1"; 33 assert_equals(anchored.offsetLeft, 100); 34 }, "Left position set to right edge of anchor with @position-try"); 35 </script>