stacking-context-transform-none-animation-before-appending-element.html 704 B

123456789101112131415161718192021222324252627
  1. <!DOCTYPE html>
  2. <html class="reftest-wait">
  3. <title>Transform animation whose target is not initially associated with any document creates a stacking context even if it has only 'transform:none' in its keyframe</title>
  4. <style>
  5. span {
  6. height: 100px;
  7. width: 100px;
  8. position: fixed;
  9. background: green;
  10. top: 50px;
  11. }
  12. div {
  13. width: 100px; height: 100px;
  14. background: blue;
  15. }
  16. </style>
  17. <span></span>
  18. <script>
  19. var div = document.createElement("div")
  20. var anim = div.animate({ transform: ['none', 'none'] },
  21. { duration: 100000 });
  22. document.body.appendChild(div);
  23. anim.ready.then(function() {
  24. document.documentElement.classList.remove("reftest-wait");
  25. });
  26. </script>