scroll-timeline-resize.html (1104B)
1 <!DOCTYPE html> 2 <html class="test-wait"> 3 <title>This test passes if it does not crash when resizing the scroller</title> 4 <link rel="help" src="https://drafts.csswg.org/scroll-animations-1/"> 5 <script src="/web-animations/testcommon.js"></script> 6 <style> 7 @keyframes scrolling { 8 from, to { background: lightblue; } 9 } 10 #box { 11 width: 200px; 12 height: 50px; 13 overflow: auto; 14 animation: scrolling; 15 animation-timeline: scroll(self); 16 } 17 </style> 18 <body onload="run()"> 19 <div id="box"> 20 <h3>Resize this box!</h3> 21 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus elit sed ultricies semper. Proin faucibus sollicitudin nisi, id pellentesque lectus iaculis id.</p> 22 </div> 23 </body> 24 <script> 25 async function run() { 26 let anims = document.getAnimations(); 27 if (anims.length == 0) { 28 // Make this timeout. 29 return; 30 } 31 await anims[0].ready; 32 // Wait for some frames to wait for the setup of compositor animations. 33 await waitForAnimationFrames(2); 34 box.style.height = "200px"; 35 await waitForAnimationFrames(2); 36 document.documentElement.className = ""; 37 } 38 </script>