overlay-transition-in-rendering.html (942B)
1 <!DOCTYPE html> 2 <title>CSS Positioned Layout Module Test: 'overlay' transitioning in not 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 #transition-in, #green { 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 #green { 16 background-color: green; 17 } 18 #transition-in { 19 transition: overlay 60s step-end; 20 transition-behavior: allow-discrete; 21 background-color: red; 22 } 23 </style> 24 <div id="green" popover="manual"></div> 25 <div id="transition-in" popover="manual"></div> 26 <script> 27 document.querySelector("#green").showPopover(); 28 document.querySelector("#transition-in").showPopover(); 29 </script>