stacking-context-transform-lose-to-animation.html (1248B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Transform transition and animation overridden by !important rule create 5 a stacking context 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: translateX(100px); } 17 } 18 #test { 19 width: 100px; height: 100px; 20 background: blue; 21 transform: translateX(200px) ! important; 22 transition: transform 100s steps(1, start); 23 animation: Transform100px 100s; 24 } 25 </style> 26 <span></span> 27 <div id="test"></div> 28 <script> 29 window.addEventListener("load", () => { 30 var target = document.getElementById("test"); 31 getComputedStyle(target).transform; 32 33 // Change the transform style to 'none'. 34 target.style.setProperty("transform", "none", "important"); 35 // Important style is changed but there is a CSS animation, 36 // so transition won't be visible and the CSS animation is overridden by 37 // the !important rule. As a result transform style here should be 'none' 38 // specified by the important rule, but we should create a stacking 39 // context for it because there are animations. 40 41 getComputedStyle(target).transform; 42 document.documentElement.classList.remove("reftest-wait"); 43 }); 44 </script>