| 12345678910111213141516171819202122232425262728293031323334353637383940414243 |
- <!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;
- requestAnimationFrame(() => {
- document.documentElement.classList.remove("reftest-wait");
- });
- });
- </script>
|
