last-successful-change-try-rule.html (1802B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: changing @position-try rules invalidates last successful position fallback</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/test-common.js"></script> 7 <style id="anchor_sheet"> 8 #container { 9 position: relative; 10 width: 400px; 11 height: 400px; 12 background: teal; 13 } 14 #anchor { 15 position: relative; 16 top: 100px; 17 left: 100px; 18 width: 100px; 19 height: 100px; 20 background: red; 21 anchor-name: --a; 22 } 23 #anchored { 24 position-anchor: --a; 25 position-try-fallbacks: --try; 26 position: absolute; 27 width: 100px; 28 height: 200px; 29 position-area: top center; 30 background: lime; 31 } 32 @position-try --try { 33 position-area: bottom center; 34 } 35 </style> 36 <div id="container"> 37 <div id="anchor"></div> 38 <div id="anchored"></div> 39 </div> 40 <script> 41 promise_test(async () => { 42 await waitUntilNextAnimationFrame(); 43 await waitUntilNextAnimationFrame(); 44 assert_equals(anchored.offsetTop, 200); 45 }, "Starts rendering with --try"); 46 47 promise_test(async () => { 48 anchor.style.top = "150px"; 49 await waitUntilNextAnimationFrame(); 50 await waitUntilNextAnimationFrame(); 51 assert_equals(anchored.offsetTop, 200); 52 }, "No successful position, keep --try"); 53 54 promise_test(async () => { 55 // Changing @position-try --try {} 56 anchor_sheet.sheet.cssRules[3].style.positionArea = "bottom"; 57 await waitUntilNextAnimationFrame(); 58 await waitUntilNextAnimationFrame(); 59 assert_equals(anchored.offsetTop, 0); 60 }, "No successful position, last successful invalidated by @position-try change"); 61 </script>