transform-014.html (1971B)
1 <!DOCTYPE html> 2 <title>Animated anchor transform in iframe</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#determining-position"> 5 <iframe id="iframe" style="width:300px; height:400px;" srcdoc=' 6 <style> 7 #anchor { 8 anchor-name: --a; 9 width: 200px; 10 height: 200px; 11 translate: 0; 12 background: hotpink; 13 } 14 #anchored { 15 position: absolute; 16 position-anchor: --a; 17 position-area: bottom right; 18 width: 100%; 19 height: 100%; 20 background: cyan; 21 } 22 @keyframes anim { 23 from { translate: 0; } 24 to { translate: 100px; } 25 } 26 body { margin: 0; } 27 </style> 28 <div id="anchor"></div> 29 <div id="anchored"></div> 30 <script> 31 const done = Promise.withResolvers(); 32 let got_halfway = false; 33 const observer = new ResizeObserver((entries)=> { 34 const inlineSize = entries[0].contentBoxSize[0].inlineSize; 35 if (inlineSize > 30 && inlineSize < 90) { 36 got_halfway = true; 37 done.resolve(); 38 } 39 }); 40 anchor.onanimationend = ()=> { done.reject(); } 41 42 async function runTest() { 43 await new Promise(resolve => { window.onmessage = resolve; }); 44 anchor.style.animation = "2000ms linear anim"; 45 try { 46 observer.observe(anchored); 47 await done.promise; 48 observer.unobserve(anchored); 49 anchor.style.animation = "none"; 50 } catch (e) {} 51 window.top.postMessage(got_halfway); 52 } 53 runTest(); 54 </script> 55 '></iframe> 56 <script src="/resources/testharness.js"></script> 57 <script src="/resources/testharnessreport.js"></script> 58 <script> 59 promise_test(async t => { 60 await new Promise(resolve => { window.onload = resolve; }); 61 iframe.contentWindow.postMessage("go"); 62 let success = await new Promise(resolve => { 63 window.onmessage = function(e) { resolve(e.data); }; 64 }); 65 assert_true(success, "animation frame somewhere in the middle"); 66 }, "Animation being updated"); 67 </script>