forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
WebKit export: [popover] Using shadow DOM wrongly auto-hides popover …
…by light dismiss (web-platform-tests#41251) https://bugs.webkit.org/show_bug.cgi?id=259261
- Loading branch information
1 parent
e5d6279
commit 0b66671
Showing
1 changed file
with
47 additions
and
0 deletions.
There are no files selected for viewing
47 changes: 47 additions & 0 deletions
47
html/semantics/popovers/popover-light-dismiss-flat-tree.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Test that popover light dismiss uses the flat tree.</title> | ||
| <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> | ||
| </head> | ||
| <body> | ||
| <p>Test passes if the inner popover opens after clicking the inner toggle.</p> | ||
| <button popovertarget="outerPopover" popovertargetaction="toggle" id="outerPopoverToggle">Toggle</button> | ||
| <div id="outerPopover" popover> | ||
| <template shadowrootmode="open"> | ||
| Outer | ||
| <button popovertarget="innerPopover" popovertargetaction="toggle" id="innerPopoverToggle">Toggle</button> | ||
| <div id="innerPopover" popover> | ||
| Inner | ||
| </div> | ||
| </template> | ||
| </div> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/resources/testdriver.js"></script> | ||
| <script src="/resources/testdriver-actions.js"></script> | ||
| <script src="/resources/testdriver-vendor.js"></script> | ||
| <script src="/resources/declarative-shadow-dom-polyfill.js"></script> | ||
| <script src="resources/popover-utils.js"></script> | ||
| <script> | ||
| promise_test(async () => { | ||
| const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle"); | ||
| const innerPopover = outerPopover.shadowRoot.querySelector("#innerPopover"); | ||
|
|
||
| assert_false(outerPopover.matches(":popover-open"), "outer popover is initially hidden"); | ||
| assert_false(innerPopover.matches(":popover-open"), "inner popover is initially hidden"); | ||
|
|
||
| await clickOn(outerPopoverToggle); | ||
|
|
||
| assert_true(outerPopover.matches(":popover-open"), "outer popover is open after clicking the toggle"); | ||
| assert_false(innerPopover.matches(":popover-open"), "inner popover is initially hidden"); | ||
|
|
||
| await clickOn(innerPopoverToggle); | ||
|
|
||
| assert_true(outerPopover.matches(":popover-open"), "outer popover is not dismissed after clicking the second toggle"); | ||
| assert_true(innerPopover.matches(":popover-open"), "inner popover is open after clicking the second toggle"); | ||
| }, "Popover light dismiss uses the flat tree"); | ||
| </script> | ||
| </body> | ||
| </html> |