overlay-transition-out-rendering.html (977B)
1 <!DOCTYPE html> 2 <title>CSS Positioned Layout Module Test: 'overlay' transitioning out still rendered in top layer</title> 3 <link rel="help" href="https://drafts.csswg.org/css-position-4/#overlay"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/popover.html"> 5 <link rel="match" href="green-ref.html"> 6 <style> 7 #green, #red { 8 /* Force display:block both popover open or closed to not rely on 9 @starting-style or display transitions. */ 10 display: block; 11 border: none; 12 width: 100vw; 13 height: 100vh; 14 } 15 #red { 16 background-color: red; 17 } 18 #green { 19 background-color: green; 20 } 21 #green.transition-enabled { 22 transition: overlay 60s step-end; 23 transition-behavior: allow-discrete; 24 } 25 </style> 26 <div id="red" popover="manual"></div> 27 <div id="green" popover="manual"></div> 28 <script> 29 red.showPopover(); 30 green.showPopover(); 31 document.body.offsetTop; 32 green.className = "transition-enabled"; 33 green.hidePopover(); 34 </script>