stacking-context-transform-removing-important-in-delay.html 1.2 KB

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