scroll-timeline-default-quirks-mode.html (1585B)
1 <html class="reftest-wait"> 2 <title>The default scroll() timeline in quirks mode</title> 3 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#scroll-notation"> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-timeline"> 5 <meta name="assert" content="CSS animation correctly updates values when using the default scroll() timeline"> 6 <link rel="match" href="scroll-timeline-default-ref.html"> 7 8 <style> 9 @keyframes update { 10 from { transform: translateY(0px); } 11 to { transform: translateY(200px); } 12 } 13 14 html { 15 min-height: 100%; 16 padding-bottom: 100px; 17 } 18 19 #box { 20 width: 100px; 21 height: 100px; 22 background-color: green; 23 animation: update 1s linear; 24 animation-timeline: scroll(); 25 } 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 39 <div id="box"></div> 40 <div id="covered"></div> 41 <script src="/web-animations/testcommon.js"></script> 42 <script> 43 document.documentElement.addEventListener('TestRendered', async () => { 44 runTest(); 45 }, { once: true }); 46 47 async function runTest() { 48 const scroller = document.scrollingElement; 49 50 await waitForCompositorReady(); 51 52 // Move the scroller to the halfway point. Then advance to the next frame 53 // to pick up the new timeline time. 54 const maxScroll = scroller.scrollHeight - scroller.clientHeight; 55 scroller.scrollTop = 0.5 * maxScroll; 56 57 await waitForNextFrame(); 58 await waitForNextFrame(); 59 60 document.documentElement.classList.remove("reftest-wait"); 61 } 62 63 </script>