stacking-context-transform-changing-target.html (725B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <title> 4 Transform 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({ transform: ['none', 'none'] }, { 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>