stacking-context-transform-none-animation-before-appending-element.html (937B)
1 <!DOCTYPE html> 2 <html class="reftest-wait reftest-no-flush"> 3 <!-- 4 reftest-no-flush above is necessary to make invalidation changes happen. 5 Without it, reftest harness takes the snapshot on the next frame after the 6 frame that a paint for appending the element happened. 7 --> 8 <title>Transform animation whose target is not initially associated with any document creates a stacking context even if it has only 'transform:none' in its keyframe</title> 9 <style> 10 span { 11 height: 100px; 12 width: 100px; 13 position: fixed; 14 background: green; 15 top: 50px; 16 } 17 div { 18 width: 100px; height: 100px; 19 background: blue; 20 } 21 </style> 22 <span></span> 23 <script> 24 var div = document.createElement("div") 25 var anim = div.animate({ transform: ['none', 'none'] }, 26 { duration: 100000 }); 27 anim.ready.then(() => { 28 document.body.appendChild(div); 29 document.documentElement.classList.remove("reftest-wait"); 30 }); 31 </script>