animation-style-element-replaced-with-keyframes-rule-of-same-name.html (1440B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Changes to @keyframes rules</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-1/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/testcommon.js"></script> 8 <div id="log"></div> 9 <script> 10 'use strict'; 11 12 test(t => { 13 const div = addDiv(t); 14 15 const originalStyleElement = document.createElement("style"); 16 originalStyleElement.textContent = '@keyframes anim-custom { from, to { left: 100px } }'; 17 document.head.appendChild(originalStyleElement); 18 19 t.add_cleanup(() => originalStyleElement.remove()); 20 21 div.style.animation = 'anim-custom 100s'; 22 23 const computedStyle = getComputedStyle(div); 24 assert_equals(computedStyle.left, "100px", "The initial @keyframes rule is applied"); 25 26 // Remove the original style element and add a new one with an animation with the same name. 27 const newStyleElement = document.createElement("style"); 28 newStyleElement.textContent = '@keyframes anim-custom { from, to { left: 200px } }'; 29 originalStyleElement.replaceWith(newStyleElement); 30 31 t.add_cleanup(() => newStyleElement.remove()); 32 33 assert_equals(computedStyle.left, "200px", "The new @keyframes rule is applied"); 34 }, 'Replacing a <style> element with a new <style> element while both containing the different @keyframes rule with the same name dynamically updates running animations.'); 35 36 </script>