no-stacking-context-opacity-removing-animation-in-delay.html (1269B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title> 4 Removing CSS animation in delay phase destroys a 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 Opacity0 { 15 from, to { opacity: 0 } 16 } 17 #test { 18 width: 100px; height: 100px; 19 background: blue; 20 opacity: 1 ! 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 = "Opacity0 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 100% opacity style element, so 34 // there should be a stacking context. 35 36 target.style.animation = ""; 37 38 // This time we don't need to wait for MozAfterPaint because reftest tool 39 // will be received MozAferPaint event. 40 requestAnimationFrame(() => { 41 // Now we have only 100% opacity style, so we should not create any 42 // stacking context. 43 document.documentElement.classList.remove("reftest-wait"); 44 }); 45 }, {once: true}); 46 }); 47 </script>