stacking-context-transform-wins-over-important-style.html (1087B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Transform transition winning over !important rule creates a stacking context 5 </title> 6 <style> 7 span { 8 height: 100px; 9 width: 100px; 10 position: fixed; 11 background: green; 12 top: 50px; 13 } 14 #test { 15 width: 100px; height: 100px; 16 background: blue; 17 /* 18 * On the compositor we use a previous vsync time stamp rather than the 19 * current time stamp, as a result sometimes transition may be still in 20 * before phase after waiting a frame. To compose the same transform value 21 * regardless of whether the transition is in before or active phase, we use 22 * steps(1, end) here. 23 */ 24 transition: transform 100s steps(1, end); 25 transform: none ! important; 26 } 27 </style> 28 <span></span> 29 <div id="test"></div> 30 <script> 31 window.addEventListener("load", () => { 32 var target = document.getElementById("test"); 33 getComputedStyle(target).transform; 34 35 target.style.setProperty("transform", "translateX(200px)", "important"); 36 getComputedStyle(target).transform; 37 38 document.documentElement.classList.remove("reftest-wait"); 39 }); 40 </script>