<!DOCTYPE html> <html class="reftest-wait"> <title> Opacity transition winning over !important rule creates a stacking context </title> <style> span { height: 100px; width: 100px; position: fixed; background: green; top: 50px; } #test { width: 100px; height: 100px; background: blue; /* * On the compositor we use a previous vsync time stamp rather than the * current time stamp, as a result sometimes transition may be still in * before phase after waiting a frame. To compose the same opacity value * regardless of whether the transition is in before or active phase, we use * steps(1, end) here. */ transition: opacity 100s steps(1, end); opacity: 1 ! important; } </style> <span></span> <div id="test"></div> <script> window.addEventListener("load", () => { var target = document.getElementById("test"); getComputedStyle(target).opacity; target.style.setProperty("opacity", "0", "important"); getComputedStyle(target).opacity; document.documentElement.classList.remove("reftest-wait"); }); </script>