stacking-context-transform-changing-display-property.html (662B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <title> 4 Transform animation creates a stacking context when changing its display style 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 display: none; 18 } 19 </style> 20 <span></span> 21 <div id="test"></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.style.display = 'block'; 27 document.documentElement.classList.remove("reftest-wait"); 28 }); 29 </script>