stacking-context-opacity-lose-to-animation.html (1180B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Opacity transition and animation overridden by !important rule creates a 5 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 Opacity0 { 16 from, to { opacity: 0; } 17 } 18 #test { 19 width: 100px; height: 100px; 20 background: blue; 21 opacity: 0 ! important; 22 transition: opacity 100s steps(1, start); 23 animation: Opacity0 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).opacity; 32 33 // Change the opacity style to 100%. 34 target.style.setProperty("opacity", "1", "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 opacity style here should be 100% 38 // specified by the important rule, but we should create a stacking 39 // context for it because there are animations. 40 41 getComputedStyle(target).opacity; 42 document.documentElement.classList.remove("reftest-wait"); 43 }); 44 </script>