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