style-updates-on-current-iteration-changed.html (769B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Update styles when current iteration changed</title> 4 <script src="animation-utils.js"></script> 5 <style> 6 #test { 7 width: 100px; height: 100px; 8 background: blue; 9 } 10 </style> 11 <div id="test"></div> 12 <script> 13 var anim = document.getElementById("test") 14 .animate({ marginLeft: [ "0px", "100px" ] }, 15 { duration: 100000, 16 delay: -99999, // For starting right before second iteration. 17 easing: "steps(1, start)", 18 iterations: 2, 19 iterationComposite: "accumulate" }); 20 21 waitForIterationChange(anim).then(() => { 22 // Wait for painting the result of the second iteration. 23 document.documentElement.classList.remove("reftest-wait"); 24 }); 25 </script>