stacking-context-transform-changing-effect-on-table.html (853B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Transform animation on a display:table element creates a stacking context 5 after changing effects 6 </title> 7 <style> 8 span { 9 height: 100px; 10 width: 100px; 11 position: fixed; 12 background: green; 13 top: 50px; 14 } 15 div { 16 display: table; 17 width: 100px; 18 height: 100px; 19 background: blue; 20 } 21 </style> 22 <span></span> 23 <div id="test"></div> 24 <script> 25 var elem = document.getElementById("test"); 26 var anim = elem.animate(null, { duration: 100000 }); 27 var newEffect = new KeyframeEffect(elem, 28 { transform: ['none', 'none']}, 29 100000); 30 anim.ready.then(function() { 31 anim.effect = newEffect; 32 requestAnimationFrame(function() { 33 document.documentElement.classList.remove("reftest-wait"); 34 }); 35 }); 36 </script> 37 </html>