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