last-successful-fallback-to-base-style.html (1983B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: switch from using fallback style to base style</title> 3 <meta name="description" content="Tests a bug in WebKit where if a fallback is initially used, then the base style is used, WebKit will remember the fallback to be the last successful position fallback instead of the base style."> 4 <link rel="author" title="Kiet Ho" href="mailto:kiet.ho@apple.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#last-successful-position-fallback"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/test-common.js"></script> 9 <style> 10 #container { 11 position: relative; 12 width: 600px; 13 height: 300px; 14 background: teal; 15 } 16 #anchor { 17 position: relative; 18 top: 100px; 19 left: 100px; 20 width: 100px; 21 height: 100px; 22 background: red; 23 anchor-name: --a; 24 } 25 #anchored { 26 position-anchor: --a; 27 position-try-fallbacks: flip-inline; 28 position: absolute; 29 width: 200px; 30 height: 100px; 31 position-area: left center; 32 background: lime; 33 } 34 </style> 35 <div id="container"> 36 <div id="anchor"></div> 37 <div id="anchored"></div> 38 </div> 39 <script> 40 promise_test(async () => { 41 await waitUntilNextAnimationFrame(); 42 await waitUntilNextAnimationFrame(); 43 assert_equals(anchored.offsetLeft, 200); 44 }, "Starts rendering with flip-inline fallback"); 45 46 promise_test(async () => { 47 anchor.style.left = "350px"; 48 await waitUntilNextAnimationFrame(); 49 await waitUntilNextAnimationFrame(); 50 assert_equals(anchored.offsetLeft, 150); 51 }, "Base position without fallback now successful"); 52 53 promise_test(async () => { 54 anchor.style.left = "300px"; 55 await waitUntilNextAnimationFrame(); 56 await waitUntilNextAnimationFrame(); 57 assert_equals(anchored.offsetLeft, 100); 58 }, "Both base position and flip-inline works, keep base position since it's the last successful option"); 59 </script>