scroll-timeline-default-iframe.html (2035B)
1 <!DOCTYPE HTML> 2 <html class="reftest-wait"> 3 <title>The default scroll() timeline in the iframe</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 6 <meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> 7 <link rel="match" href="scroll-timeline-default-iframe-ref.html"> 8 9 <iframe id="target" width="400" height="400" srcdoc=' 10 <html> 11 <style> 12 @keyframes update { 13 from { transform: translateY(0px); } 14 to { transform: translateY(200px); } 15 } 16 html { 17 min-height: 100%; 18 padding-bottom: 100px; 19 } 20 #box { 21 width: 100px; 22 height: 100px; 23 background-color: green; 24 animation: update 1s linear; 25 animation-timeline: scroll(); 26 } 27 #covered { 28 width: 100px; 29 height: 100px; 30 background-color: red; 31 } 32 33 * { 34 margin-top: 0px; 35 margin-bottom: 0px; 36 } 37 </style> 38 <script src="/web-animations/testcommon.js"></script> 39 <script> 40 window.addEventListener("load", async function() { 41 const scroller = document.scrollingElement; 42 43 // Move the scroller to the halfway point. 44 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 45 scroller.scrollTop = 0.5 * maxScroll; 46 47 await waitForCompositorReady(); 48 await waitForNextFrame(); 49 await waitForNextFrame(); 50 51 window.parent.postMessage("success", "*"); 52 }); 53 </script> 54 <body> 55 <div id="box"></div> 56 <div id="covered"></div> 57 </body> 58 </html> 59 '></iframe> 60 <script src="/web-animations/testcommon.js"></script> 61 <script> 62 async function finishTest() { 63 await waitForCompositorReady(); 64 await waitForNextFrame(); 65 await waitForNextFrame(); 66 document.documentElement.classList.remove("reftest-wait"); 67 } 68 window.addEventListener("message", event => { 69 if (event.data == "success") { 70 finishTest(); 71 } 72 }, false); 73 </script>