popover-light-dismiss-flat-tree.html (2179B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test that popover light dismiss uses the flat tree.</title> 6 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 7 </head> 8 <body> 9 <p>Test passes if the inner popover opens after clicking the inner toggle.</p> 10 <button popovertarget="outerPopover" popovertargetaction="toggle" id="outerPopoverToggle">Toggle</button> 11 <div id="outerPopover" popover> 12 <template shadowrootmode="open"> 13 Outer 14 <button popovertarget="innerPopover" popovertargetaction="toggle" id="innerPopoverToggle">Toggle</button> 15 <div id="innerPopover" popover> 16 Inner 17 </div> 18 </template> 19 </div> 20 <script src="/resources/testharness.js"></script> 21 <script src="/resources/testharnessreport.js"></script> 22 <script src="/resources/testdriver.js"></script> 23 <script src="/resources/testdriver-actions.js"></script> 24 <script src="/resources/testdriver-vendor.js"></script> 25 <script src="resources/popover-utils.js"></script> 26 <script> 27 promise_test(async () => { 28 const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle"); 29 const innerPopover = outerPopover.shadowRoot.querySelector("#innerPopover"); 30 31 assert_false(outerPopover.matches(":popover-open"), "outer popover is initially hidden"); 32 assert_false(innerPopover.matches(":popover-open"), "inner popover is initially hidden"); 33 34 await clickOn(outerPopoverToggle); 35 36 assert_true(outerPopover.matches(":popover-open"), "outer popover is open after clicking the toggle"); 37 assert_false(innerPopover.matches(":popover-open"), "inner popover is initially hidden"); 38 39 await clickOn(innerPopoverToggle); 40 41 assert_true(outerPopover.matches(":popover-open"), "outer popover is not dismissed after clicking the second toggle"); 42 assert_true(innerPopover.matches(":popover-open"), "inner popover is open after clicking the second toggle"); 43 }, "Popover light dismiss uses the flat tree"); 44 </script> 45 </body> 46 </html>