layout/reftests/web-animations/stacking-context-transform-changing-keyframe-in-delay.html

   1 <!DOCTYPE html>
   2 <html class="reftest-wait">
   3 <title>
   4 Changing keyframes to transform frames creates a stacking context even if the
   5 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 #test {
  16   width: 100px; height: 100px;
  17   background: blue;
  18 }
  19 </style>
  20 <span></span>
  21 <div id="test"></div>
  22 <script>
  23   var anim = document.getElementById("test")
  24     .animate({ width: ['100px', '100px'] },
  25              { delay: 100000, duration: 100000 });
  26   anim.ready.then(function() {
  27     anim.effect.setKeyframes(
  28       { transform: ['translate(0px)', 'translate(0px)'] });
  29     document.documentElement.classList.remove("reftest-wait");
  30   });
  31 </script>