stacking-context-transform-changing-target-in-delay.html (875B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Changing target to an element that does not overrider transform 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 transform: none ! 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({ transform: ['translateX(0px)', 'translateX(100px)'] }, 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>