scroll-animation-initial-offset.html (1684B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Composited scroll-linked animation with initial scroll offset</title> 4 <link rel="help" href="https://drafts.csswg.org/scroll-animations-1/"> 5 <link rel="match" href="scroll-animation-initial-offset-ref.html"> 6 <style> 7 8 #scroller { 9 overflow-y: auto; 10 height: 200px; 11 border: 2px solid green; 12 position: relative; 13 background: gray; 14 } 15 16 .spacer { 17 height: 1000px; 18 } 19 20 @keyframes anim { 21 0% { transform: translateY(0); } 22 100% { transform: translateY(800px); } 23 } 24 25 #align { 26 box-sizing: border-box; 27 width: 100%; 28 height: 50px; 29 background: rgba(0, 0, 200, 0.2); 30 color: white; 31 position: absolute; 32 border: 1px solid white; 33 animation: anim linear 10s; 34 animation-timeline: scroll(); 35 will-change: transform; 36 } 37 38 #marker { 39 width: 100%; 40 height: 50px; 41 background: #640; 42 position: absolute; 43 top: 350px; 44 } 45 46 </style> 47 <div id="scroller"> 48 <div id="align">TOP</div> 49 <div class="spacer"></div> 50 <div id="marker">BOTTOM</div> 51 </div> 52 <script> 53 54 // Test that a scroll-linked animation of a composited property reacts 55 // correctly to a programmatic scroll early during the page load. 56 // 57 // The scroll offset will change before the animation is "started" on the 58 // compositor, so it needs to be able to handle a non-zero initial offset. 59 // 60 scroller.scrollTo(0, 200); 61 62 </script> 63 <script src="/web-animations/testcommon.js"></script> 64 <script> 65 66 document.documentElement.addEventListener('TestRendered', async () => { 67 await waitForCompositorReady(); 68 await waitForNextFrame(); 69 await waitForNextFrame(); 70 document.documentElement.classList.remove("reftest-wait"); 71 }, { once: true }); 72 73 </script>