effectively-infinite-timing-parameters.html (1004B)
1 <!DOCTYPE html> 2 <html class='test-wait'> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Starting an animation with an effectively infinite timing parameters 7 </title> 8 </head> 9 <!-- crbug.com/400741639 --> 10 <body> 11 <div id="target">test</div> 12 </body> 13 <script> 14 async function raf(n) { 15 return new Promise(resolve => { 16 const tick = () => { 17 if (--n) { 18 requestAnimationFrame(tick); 19 } else { 20 resolve(); 21 } 22 } 23 requestAnimationFrame(tick); 24 }); 25 }; 26 27 window.onload = async () => { 28 const target = document.getElementById('target'); 29 const anim = target.animate([ 30 {"transform": "scale(2)"}, 31 {"transform": "none"} 32 ], { 33 duration: 95903184853313357582278077554606, 34 iterationStart: 3.165661661777848e+19, 35 }); 36 await anim.ready; 37 await raf(5); 38 document.documentElement.classList.remove('test-wait'); 39 }; 40 </script> 41 </html>