<!DOCTYPE html> <html class="reftest-wait"> <title> Transform 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 transform value * regardless of whether the transition is in before or active phase, we use * steps(1, end) here. */ transition: transform 100s steps(1, end); transform: none ! important; } </style> <span></span> <div id="test"></div> <script> window.addEventListener("load", () => { var target = document.getElementById("test"); getComputedStyle(target).transform; target.style.setProperty("transform", "translateX(200px)", "important"); getComputedStyle(target).transform; document.documentElement.classList.remove("reftest-wait"); }); </script>