no-stacking-context-transform-removing-animation-in-delay.html (1290B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Removing CSS animation in delay phase destroys stacking context 5 </title> 6 <style> 7 span { 8 height: 100px; 9 width: 100px; 10 position: fixed; 11 background: green; 12 top: 50px; 13 } 14 @keyframes TransformNone { 15 from, to { transform: none } 16 } 17 #test { 18 width: 100px; height: 100px; 19 background: blue; 20 transform: none ! important; 21 } 22 </style> 23 <span></span> 24 <div id="test"></div> 25 <script> 26 window.addEventListener("load", () => { 27 var target = document.getElementById("test"); 28 target.style.animation = "TransformNone 100s 100s"; 29 30 // We need to wait for MozAfterPaint instead of requestAnimationFrame to 31 // ensure the stacking context has been updated on the compositor. 32 window.addEventListener("MozAfterPaint", function() { 33 // Here we have CSS animation on transform:none style element, so 34 // there should be a stacking context. 35 36 target.style.animation = ""; 37 // This time we don't need to wait for MozAfterPaint because reftest tool 38 // will be received MozAferPaint event. 39 requestAnimationFrame(() => { 40 // Now we have only transform:none style, so we should not create any 41 // stacking context. 42 document.documentElement.classList.remove("reftest-wait"); 43 }); 44 }, {once: true}); 45 }); 46 </script>