<!DOCTYPE html> <html class="reftest-wait"> <title>Update styles when iteration composition changed from replace to accumulate</title> <script src="animation-utils.js"></script> <style> #test { width: 100px; height: 100px; background: blue; } </style> <div id="test"></div> <script> var anim = document.getElementById("test") .animate({ marginLeft: [ "0px", "100px" ] }, { duration: 100000, delay: -99999, // For starting right before second iteration. easing: "steps(1, start)", iterations: 2, iterationComposite: "replace" }); waitForIterationChange(anim).then(() => { // Changing iterationComposite updates the element style. anim.effect.iterationComposite = "accumulate"; requestAnimationFrame(() => { // Now margin-left of the element should be 200px. document.documentElement.classList.remove("reftest-wait"); }); }); </script>