set-timeline-undefined-progress.html (1179B)
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>Set timeline when effect end is infinite. 7 </title> 8 <!-- crbug.com/440368332 --> 9 </head> 10 <style> 11 #target { 12 background-color: green; 13 width: 200px; 14 height: 200px; 15 } 16 </style> 17 <script> 18 </script> 19 <body> 20 <div id="target"></div> 21 </body> 22 <script> 23 window.onload = async () => { 24 const anim = 25 target.animate(null, { duration: 2000, iterations: Infinity }); 26 // Setting an infinite playback rate combined with a future start time, puts 27 // current time infinitely in the past. 28 anim.playbackRate = Number.MAX_VALUE; 29 anim.startTime = performance.now() + 1000; 30 // When setting a new timeline, we compute the current progress on the old 31 // timeline in case we need to match the progress on the new timeline to 32 // avoid a jump. In this case, current progress is: 33 // currentTime / EffectEnd = -infinity / infinity = undefined. 34 anim.timeline = null; 35 requestAnimationFrame(() => { 36 document.documentElement.classList.remove('test-wait'); 37 }); 38 } 39 </script> 40 </html>