stacking-context-transform-removing-important-in-delay.html (1183B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Removing !important rule during delay phase of animation creates 5 a stack context for correct style 6 </title> 7 <style> 8 span { 9 height: 100px; 10 width: 100px; 11 position: fixed; 12 background: green; 13 top: 50px; 14 } 15 @keyframes Transform100px { 16 from, to { transform: translate(100px) } 17 } 18 #test { 19 width: 100px; height: 100px; 20 background: blue; 21 animation: Transform100px 100s 100s; 22 } 23 </style> 24 <span></span> 25 <div id="test"></div> 26 <script> 27 window.addEventListener("load", () => { 28 var target = document.getElementById("test"); 29 target.style.setProperty("transform", "translateX(200px)", "important"); 30 31 requestAnimationFrame(() => { 32 // Now the target transform style should be translateX(200px) because of 33 // !important rule. 34 35 // Apply transform:none without important directive. 36 target.style.setProperty("transform", "none", ""); 37 requestAnimationFrame(() => { 38 // The CSS animation is no longer overridden but it's still in delay 39 // phase, so we should create a stacking context for transform:none style. 40 document.documentElement.classList.remove("reftest-wait"); 41 }); 42 }); 43 }); 44 </script>