overlay-transition.html (1822B)
1 <!DOCTYPE html> 2 <title>CSS Positioned Layout Module Test: 'overlay' is transitioned in and out of 'auto'</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 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #transition-in, #transition-out { 9 /* Force display:block both popover open or closed to not rely on 10 @starting-style or display transitions. */ 11 display: block; 12 } 13 .enable-transitions :is(#transition-in, #transition-out) { 14 transition: overlay 60s step-end; 15 transition-behavior: allow-discrete; 16 } 17 </style> 18 <div id="container"> 19 <div id="transition-in" popover></div> 20 <div id="transition-out" popover></div> 21 </div> 22 <script> 23 let transition_in = document.querySelector("#transition-in"); 24 let transition_out = document.querySelector("#transition-out"); 25 26 test(() => { 27 transition_out.showPopover(); 28 assert_equals(getComputedStyle(transition_in).overlay, "none"); 29 assert_equals(getComputedStyle(transition_out).overlay, "auto"); 30 }, "Open the popover to be closed and verify computed overlay for both popovers"); 31 32 container.className = "enable-transitions"; 33 34 test(() => { 35 assert_true(transition_out.matches(':popover-open')); 36 assert_false(transition_in.matches(':popover-open')); 37 transition_in.showPopover(); 38 assert_true(transition_in.matches(':popover-open')); 39 assert_false(transition_out.matches(':popover-open')); 40 assert_equals(getComputedStyle(transition_in).overlay, "none", 41 'Transition in should be delayed'); 42 assert_equals(getComputedStyle(transition_out).overlay, "auto", 43 'Transition out should be delayed'); 44 }, "Transition overlays"); 45 </script>