view-timeline-range-update-reversed-animation.html (1947B)
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>Update timeline range on reversed animation refTest</title> 7 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/#named-timeline-range"> 8 <link rel="match" href="./animation-update-ref.html?translate=60px"> 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 } 22 #target { 23 margin-bottom: 800px; 24 margin-top: 800px; 25 margin-left: 10px; 26 margin-right: 10px; 27 width: 100px; 28 height: 100px; 29 z-index: -1; 30 background-color: green; 31 animation: anim auto linear; 32 animation-timeline: --timeline; 33 view-timeline: --timeline; 34 } 35 #target.exit-range { 36 animation-range-start: exit 0%; 37 animation-range-end: exit 100%; 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 // If animation-duration:auto is not supported, getAnimations() may not 55 // return this animation. 56 if (typeof anim !== 'undefined') { 57 anim.playbackRate = -1; 58 59 // Scroll to exit 60%. 60 scroller.scrollTop = 860; 61 await waitForNextFrame(); 62 63 // Update the animation range. 64 target.classList.add('exit-range'); 65 await waitForNextFrame(); 66 } 67 68 // Make sure change to animation range was properly picked up. 69 document.documentElement.classList.remove("reftest-wait"); 70 } 71 </script> 72 </body> 73 </html>