popover-light-dismiss-flat-tree-nested.html (2531B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test that popover light dismiss uses the flat tree when nested shadow roots.</title> 6 <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> 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 id="innerPopoverToggle">Toggle</button> 15 <div id="innerContainer"> 16 <template shadowrootmode="open"> 17 <div id="innerPopover" popover> 18 Inner 19 </div> 20 </template> 21 </div> 22 </template> 23 </div> 24 25 <script src="/resources/testharness.js"></script> 26 <script src="/resources/testharnessreport.js"></script> 27 <script src="/resources/testdriver.js"></script> 28 <script src="/resources/testdriver-actions.js"></script> 29 <script src="/resources/testdriver-vendor.js"></script> 30 <script src="resources/popover-utils.js"></script> 31 <script> 32 promise_test(async () => { 33 const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle"); 34 const innerContainer = outerPopover.shadowRoot.querySelector('#innerContainer'); 35 const innerPopover = innerContainer.shadowRoot.querySelector("#innerPopover"); 36 innerPopoverToggle.onclick = () => { 37 innerPopover.togglePopover(); 38 } 39 40 assert_false(outerPopover.matches(":popover-open"), "outer popover is initially hidden"); 41 assert_false(innerPopover.matches(":popover-open"), "inner popover is initially hidden"); 42 43 await clickOn(outerPopoverToggle); 44 45 assert_true(outerPopover.matches(":popover-open"), "outer popover is open after clicking the toggle"); 46 assert_false(innerPopover.matches(":popover-open"), "inner popover is initially hidden"); 47 48 await clickOn(innerPopoverToggle); 49 50 assert_true(outerPopover.matches(":popover-open"), "outer popover is not dismissed after clicking the second toggle"); 51 assert_true(innerPopover.matches(":popover-open"), "inner popover is open after clicking the second toggle"); 52 }, "Popover light dismiss uses the flat tree when nested shadow root"); 53 </script> 54 </body> 55 </html>