123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!DOCTYPE html>
- <html class="reftest-wait">
- <title>
- Removing !important rule during delay phase of animation creates
- a stack context for correct style
- </title>
- <style>
- span {
- height: 100px;
- width: 100px;
- position: fixed;
- background: green;
- top: 50px;
- }
- @keyframes Transform100px {
- from, to { transform: translate(100px) }
- }
- #test {
- width: 100px; height: 100px;
- background: blue;
- animation: Transform100px 100s 100s;
- }
- </style>
- <span></span>
- <div id="test"></div>
- <script>
- window.addEventListener("load", () => {
- var target = document.getElementById("test");
- target.style.setProperty("transform", "translateX(200px)", "important");
- requestAnimationFrame(() => {
- // Now the target transform style should be translateX(200px) because of
- // !important rule.
- // Apply transform:none without important directive.
- target.style.setProperty("transform", "none", "");
- requestAnimationFrame(() => {
- // The CSS animation is no longer overridden but it's still in delay
- // phase, so we should create a stacking context for transform:none style.
- document.documentElement.classList.remove("reftest-wait");
- });
- });
- });
- </script>
|