stacking-context-transform-changing-target-in-delay.html 924 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. <!DOCTYPE html>
  2. <html class="reftest-wait">
  3. <title>
  4. Changing target to an element that does not overrider transform animations
  5. creates a stacking context even if the animation is delay phase
  6. </title>
  7. <style>
  8. span {
  9. height: 100px;
  10. width: 100px;
  11. position: fixed;
  12. background: green;
  13. top: 50px;
  14. }
  15. #first {
  16. width: 100px; height: 100px;
  17. background: blue;
  18. transform: none ! important;
  19. }
  20. #second {
  21. width: 100px; height: 100px;
  22. background: blue;
  23. }
  24. </style>
  25. <span></span>
  26. <div id="first"></div>
  27. <div id="second"></div>
  28. <script>
  29. var anim = document.getElementById("first")
  30. .animate({ transform: ['translateX(0px)', 'translateX(100px)'] },
  31. { delay: 100000, duration: 100000 });
  32. anim.ready.then(function() {
  33. anim.effect.target = document.getElementById("second");
  34. requestAnimationFrame(function() {
  35. document.documentElement.classList.remove("reftest-wait");
  36. });
  37. });
  38. </script>