change-animation-name-to-other-in-rule.html (624B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <style> 4 #target { 5 animation: red 100s; 6 } 7 @keyframes red { 8 0% { background-color: red; } 9 100% { background-color: red; } 10 } 11 @keyframes green { 12 0% { background-color: green; } 13 100% { background-color: green; } 14 } 15 div { 16 background-color: green; 17 width: 100px; 18 height: 100px; 19 } 20 </style> 21 <div id="target"></div> 22 <script> 23 document.addEventListener('MozReftestInvalidate', () => { 24 requestAnimationFrame(() => { 25 document.styleSheets[0].cssRules[0].style.animationName = 'green'; 26 document.documentElement.classList.remove('reftest-wait'); 27 }); 28 }, false); 29 </script>