last-successful-basic.html (1599B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: basic 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> 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: flip-block; 26 position: absolute; 27 width: 100px; 28 height: 200px; 29 position-area: top center; 30 background: lime; 31 } 32 </style> 33 <div id="container"> 34 <div id="anchor"></div> 35 <div id="anchored"></div> 36 </div> 37 <script> 38 promise_test(async () => { 39 await waitUntilNextAnimationFrame(); 40 await waitUntilNextAnimationFrame(); 41 assert_equals(anchored.offsetTop, 200); 42 }, "Starts rendering with flip-block"); 43 44 promise_test(async () => { 45 anchor.style.top = "150px"; 46 await waitUntilNextAnimationFrame(); 47 await waitUntilNextAnimationFrame(); 48 assert_equals(anchored.offsetTop, 200); 49 }, "No successful position, keep flip-block"); 50 51 promise_test(async () => { 52 anchor.style.top = "200px"; 53 await waitUntilNextAnimationFrame(); 54 await waitUntilNextAnimationFrame(); 55 assert_equals(anchored.offsetTop, 0); 56 }, "Base position without fallback now successful"); 57 </script>