stacking-context-transform-changing-keyframe.html 668 B

1234567891011121314151617181920212223242526272829
  1. <!DOCTYPE html>
  2. <html class="reftest-wait reftest-no-flush">
  3. <title>Changing keyframes to transform frames creates a stacking context</title>
  4. <style>
  5. span {
  6. height: 100px;
  7. width: 100px;
  8. position: fixed;
  9. background: green;
  10. top: 50px;
  11. }
  12. #test {
  13. width: 100px; height: 100px;
  14. background: blue;
  15. }
  16. </style>
  17. <span></span>
  18. <div id="test"></div>
  19. <script>
  20. var anim = document.getElementById("test")
  21. .animate({ }, { duration: 100000 });
  22. anim.ready.then(function() {
  23. anim.effect.setKeyframes({ transform: ['none', 'none'] });
  24. requestAnimationFrame(function() {
  25. document.documentElement.classList.remove("reftest-wait");
  26. });
  27. });
  28. </script>