overlay-transition-finished.html (1364B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Positioned Layout Module Test: 'overlay' rendering on top after transition finished</title> 4 <link rel="help" href="https://drafts.csswg.org/css-position-4/#overlay"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/popover.html"> 6 <link rel="match" href="green-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 #transition-in, #red { 10 /* Force display:block both popover open or closed to not rely on 11 @starting-style or display transitions. */ 12 display: block; 13 border: none; 14 width: 100vw; 15 height: 100vh; 16 } 17 #red { 18 position: fixed; 19 background-color: red; 20 } 21 #transition-in { 22 transition: overlay 0.1s step-end; 23 transition-behavior: allow-discrete; 24 background-color: green; 25 } 26 </style> 27 <div id="transition-in" popover></div> 28 <div id="red"></div> 29 <script> 30 let transition_in = document.querySelector("#transition-in"); 31 transition_in.addEventListener("transitionend", () => takeScreenshot()); 32 // Force style update to have before-change style for overlay transition. 33 transition_in.offsetTop; 34 transition_in.showPopover(); 35 if (getComputedStyle(transition_in).overlay != "none") { 36 // Transition didn't start, force a fail condition. 37 transition_in.style.backgroundColor = "pink"; 38 takeScreenshot(); 39 } 40 </script>