stacking-context-opacity-changing-target.html 711 B

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