stacking-context-opacity-changing-effect.html (736B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <title> 4 Opacity 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, { opacity: [1, 1] }, 100000); 26 anim.ready.then(function() { 27 anim.effect = newEffect; 28 requestAnimationFrame(function() { 29 document.documentElement.classList.remove("reftest-wait"); 30 }); 31 }); 32 </script> 33 </html>