cancel-animation-with-selector-matching.html (601B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Discard cancelled animation styles</title> 4 <style> 5 #test { 6 width: 100px; height: 100px; 7 background-color: white; 8 } 9 .changed { 10 color: red; 11 } 12 13 </style> 14 <div id="test"></div> 15 <script> 16 var target = document.getElementById("test"); 17 var anim = target.animate({ backgroundColor: [ "red", "red" ] }, 100000); 18 19 anim.ready.then(() => { 20 anim.cancel(); 21 // Add a class name to cause selector matching in a subsequent restyle. 22 target.classList.add("changed"); 23 24 document.documentElement.classList.remove("reftest-wait"); 25 }); 26 </script>