stacking-context-transform-changing-effect.html (823B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <title> 4 Transform animation creates a stacking context after changing effects 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; 16 height: 100px; 17 background: blue; 18 } 19 </style> 20 <span></span> 21 <div id="test"></div> 22 <script> 23 var elem = document.getElementById("test"); 24 var anim = elem.animate(null, { duration: 100000 }); 25 var newEffect = new KeyframeEffect(elem, 26 { transform: ['none', 'none']}, 27 100000); 28 anim.ready.then(function() { 29 anim.effect = newEffect; 30 requestAnimationFrame(function() { 31 document.documentElement.classList.remove("reftest-wait"); 32 }); 33 }); 34 </script> 35 </html>