1 files changed, 55 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-flat-tree-nested.html b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-flat-tree-nested.html
new file mode 100644
index 0000000000..ef3b35aea4
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-light-dismiss-flat-tree-nested.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Test that popover light dismiss uses the flat tree when nested shadow roots.</title>
+    <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev">
+</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 id="innerPopoverToggle">Toggle</button>
+            <div id="innerContainer">
+               <template shadowrootmode="open">
+                    <div id="innerPopover" popover>
+                        Inner
+                    </div>
+                </template>
+           </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/popover-utils.js"></script>
+    <script>
+        promise_test(async () => {
+            const innerPopoverToggle = outerPopover.shadowRoot.querySelector("#innerPopoverToggle");
+            const innerContainer = outerPopover.shadowRoot.querySelector('#innerContainer');
+            const innerPopover = innerContainer.shadowRoot.querySelector("#innerPopover");
+            innerPopoverToggle.onclick = () => {
+                innerPopover.togglePopover();
+            }
+
+            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 when nested shadow root");
+    </script>
+</body>
+</html>