scroll-timeline-update-reversed-animation.html (1801B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Attach a scroll timeline to a reversed animation refTest</title> 7 <link rel="help" src="https://www.w3.org/TR/scroll-animations-1/#scroll-timeline-name"> 8 <link rel="match" href="./animation-update-ref.html?translate=55px&scroll=825"> 9 <script src="/web-animations/testcommon.js"></script> 10 </head> 11 <style type="text/css"> 12 @keyframes anim { 13 from { transform: translateX(100px) } 14 to { transform: translateX(0px) } 15 } 16 #scroller { 17 border: 1px solid black; 18 overflow: hidden; 19 width: 300px; 20 height: 200px; 21 scroll-timeline: --timeline; 22 } 23 #target { 24 margin-bottom: 800px; 25 margin-top: 800px; 26 margin-left: 10px; 27 margin-right: 10px; 28 width: 100px; 29 height: 100px; 30 z-index: -1; 31 background-color: green; 32 animation: anim 10s linear paused; 33 } 34 #target.update { 35 animation-play-state: running; 36 animation-timeline: --timeline; 37 animation-duration: auto; 38 } 39 </style> 40 <body> 41 <div id="scroller"> 42 <div id="target"></div> 43 </div> 44 </body> 45 <script type="text/javascript"> 46 document.documentElement.addEventListener('TestRendered', async () => { 47 runTest(); 48 }, { once: true }); 49 50 async function runTest() { 51 await waitForCompositorReady(); 52 53 const anim = target.getAnimations()[0]; 54 anim.playbackRate = -1; 55 await anim.ready; 56 57 // Scroll to 55% of maximum scroll while paused. 58 scroller.scrollTop = 825; 59 await waitForNextFrame(); 60 61 target.classList.add('update'); 62 await waitForNextFrame(); 63 64 // Make sure change to animation range was properly picked up. 65 document.documentElement.classList.remove("reftest-wait"); 66 } 67 </script> 68 </body> 69 </html>