view-timeline-range-update.html (1687B)
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 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=40px"> 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 // Scroll to exit 60%. 54 scroller.scrollTop = 860; 55 await waitForNextFrame(); 56 57 // Update the animation range. 58 target.classList.add('exit-range'); 59 await waitForNextFrame(); 60 61 // Make sure change to animation range was properly picked up. 62 document.documentElement.classList.remove("reftest-wait"); 63 } 64 </script> 65 </body> 66 </html>