layout/reftests/web-animations/stacking-context-opacity-changing-target-in-delay.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <title>
   4 Changing target to an element that does not override opacity 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   opacity: 1 ! 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({ opacity: [0, 1] },
  31              { delay: 100000, duration: 100000 });
  32   anim.ready.then(function() {
  33     anim.effect.target = document.getElementById("second");
  34     document.documentElement.classList.remove("reftest-wait");
  35   });
  36 </script>