stacking-context-opacity-removing-important-in-delay.html (1106B)
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 Opacity0 { 16 from, to { opacity: 0 } 17 } 18 #test { 19 width: 100px; height: 100px; 20 background: blue; 21 animation: Opacity0 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("opacity", "0.1", "important"); 30 31 requestAnimationFrame(() => { 32 // Now the target opacity style should be 0.1 because of !important rule. 33 34 // Apply 100% opacity without important directive. 35 target.style.setProperty("opacity", "1", ""); 36 requestAnimationFrame(() => { 37 // The CSS animation is no longer overridden but it's still in delay 38 // phase, so we should create a stacking context for 100% opacity style. 39 document.documentElement.classList.remove("reftest-wait"); 40 }); 41 }); 42 }); 43 </script>