stacking-context-transform-changing-keyframe.html (668B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <title>Changing keyframes to transform frames creates a stacking context</title> 4 <style> 5 span { 6 height: 100px; 7 width: 100px; 8 position: fixed; 9 background: green; 10 top: 50px; 11 } 12 #test { 13 width: 100px; height: 100px; 14 background: blue; 15 } 16 </style> 17 <span></span> 18 <div id="test"></div> 19 <script> 20 var anim = document.getElementById("test") 21 .animate({ }, { duration: 100000 }); 22 anim.ready.then(function() { 23 anim.effect.setKeyframes({ transform: ['none', 'none'] }); 24 requestAnimationFrame(function() { 25 document.documentElement.classList.remove("reftest-wait"); 26 }); 27 }); 28 </script>