last-successful-iframe.html (1942B)
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 8 <iframe id="iframe" srcdoc=' 9 <style> 10 #container { 11 position: relative; 12 width: 400px; 13 height: 400px; 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-block; 28 position: absolute; 29 width: 100px; 30 height: 200px; 31 position-area: top center; 32 background: lime; 33 } 34 </style> 35 <div id="container"> 36 <div id="anchor"></div> 37 <div id="anchored"></div> 38 </div> 39 '></iframe> 40 <script> 41 // Wait for the iframe to load: 42 onload = function() { 43 const doc = iframe.contentWindow.document; 44 const container = doc.getElementById('container'); 45 const anchor = doc.getElementById('anchor'); 46 const anchored = doc.getElementById('anchored'); 47 48 promise_test(async () => { 49 await waitUntilNextAnimationFrame(); 50 await waitUntilNextAnimationFrame(); 51 assert_equals(anchored.offsetTop, 200); 52 }, "Starts rendering with flip-block"); 53 54 promise_test(async () => { 55 anchor.style.top = "150px"; 56 await waitUntilNextAnimationFrame(); 57 await waitUntilNextAnimationFrame(); 58 assert_equals(anchored.offsetTop, 200); 59 }, "No successful position, keep flip-block"); 60 61 promise_test(async () => { 62 anchor.style.top = "200px"; 63 await waitUntilNextAnimationFrame(); 64 await waitUntilNextAnimationFrame(); 65 assert_equals(anchored.offsetTop, 0); 66 }, "Base position without fallback now successful"); 67 } 68 </script>