last-successful-change-fallbacks-position-area.html (1987B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: changing position-try-fallbacks to the same position-area value does not invalidate last successful position fallback</title> 3 <link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 #container { 10 position: relative; 11 width: 600px; 12 height: 300px; 13 background: teal; 14 } 15 #anchor { 16 position: relative; 17 top: 100px; 18 left: 100px; 19 width: 100px; 20 height: 100px; 21 background: red; 22 anchor-name: --a; 23 } 24 #anchored { 25 position-anchor: --a; 26 position-try-fallbacks: right center; 27 position: absolute; 28 width: 200px; 29 height: 100px; 30 position-area: left center; 31 background: lime; 32 } 33 </style> 34 <div id="container"> 35 <div id="anchor"></div> 36 <div id="anchored"></div> 37 </div> 38 <script> 39 promise_test(async () => { 40 await waitUntilNextAnimationFrame(); 41 await waitUntilNextAnimationFrame(); 42 assert_equals(anchored.offsetLeft, 200); 43 }, "Starts rendering with fallback"); 44 45 promise_test(async () => { 46 anchor.style.left = "300px"; 47 anchored.style.positionTryFallbacks = "right center"; 48 await waitUntilNextAnimationFrame(); 49 await waitUntilNextAnimationFrame(); 50 assert_equals(anchored.offsetLeft, 400); 51 }, "Both base and fallback works, position-try-fallbacks is set to the same value, keeps fallback"); 52 53 promise_test(async () => { 54 anchored.style.positionTryFallbacks = "right top"; 55 await waitUntilNextAnimationFrame(); 56 await waitUntilNextAnimationFrame(); 57 assert_equals(anchored.offsetLeft, 100); 58 }, "position-try-fallbacks is set to a different value, both base and fallback works, uses base because last successful position option is invalidated"); 59 </script>