commit a2222778a3b74752c74e7d34a3e215378a327463
parent 7ffd35a1ea10ea1631090b6cdd9bb4fb56cd84a7
Author: Peng Zhou <zhoupeng.1996@bytedance.com>
Date: Wed, 15 Oct 2025 08:24:51 +0000
Bug 1993647 [wpt PR 55346] - Restrict InclusiveAncestorOpenPopoverWithInvoker to same TreeScope, a=testonly
Automatic update from web-platform-tests
Restrict InclusiveAncestorOpenPopoverWithInvoker to same TreeScope
Consider the following test case:
<div popover id=foo>
<template shadowrootmode="open">
<input type="checkbox">
<input type="checkbox">
</template>
</div>
When the popover is open and focus is on the first checkbox, pressing
Tab should move focus to the next checkbox. Previously,
`InclusiveAncestorOpenPopoverWithInvoker` returned the popover invoker
without checking TreeScope, which could skip elements inside a shadow
tree during focus navigation. This change restricts the lookup to
invokers within the same TreeScope as the element.
Bug: 443031270, 436071735
Change-Id: If9100b0218acc72de49a6aabccac23faefe7c190
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6984447
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Peng Zhou <zhoupeng.1996@bytedance.com>
Cr-Commit-Position: refs/heads/main@{#1527926}
--
wpt-commits: dfac927c83dd54d2f609d6318c996203a07ad00c
wpt-pr: 55346
Diffstat:
4 files changed, 207 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-focus-across-slot.html b/testing/web-platform/tests/html/semantics/popovers/popover-focus-across-slot.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Popover focus behaviors in form control elements</title>
+<meta name="timeout" content="long" />
+<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<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="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
+<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>
+<script src="resources/popover-utils.js"></script>
+
+<div popover id="popover">
+ <div id="host">
+ <template shadowrootmode="open">
+ <div>
+ <div>
+ <div>
+ <slot></slot>
+ <button id="close">Close popover</button>
+ </div>
+ </div>
+ </div>
+ </template>
+ <div>
+ <input type="checkbox" id="target1" />
+ <input type="checkbox" id="target2" />
+ </div>
+ </div>
+</div>
+<button popovertarget="popover" id="invoker">Open popover</button>
+<button id="after">
+ This button is where focus should land after traversing this popover
+</button>
+
+<script>
+promise_test(async () => {
+ // Open popover
+ invoker.focus();
+ assert_equals(document.activeElement, invoker);
+ invoker.click();
+ assert_true(popover.matches(":popover-open"));
+
+ await assert_focus_navigation_bidirectional([
+ 'invoker',
+ 'target1',
+ 'target2',
+ 'host/close',
+ 'after',
+ ]);
+});
+</script>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-focus-form-control.html b/testing/web-platform/tests/html/semantics/popovers/popover-focus-form-control.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Popover focus behaviors in form control elements</title>
+<meta name="timeout" content="long" />
+<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<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="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
+<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>
+<script src="resources/popover-utils.js"></script>
+
+<div>
+ <button popovertarget="popover" id="invoker">Open popover</button>
+ <div popover id="popover">
+ <input type="checkbox" id="target1" />
+ <input type="checkbox" id="target2" />
+ <my-element id="host">
+ <template shadowrootmode="open">
+ <input type="checkbox" id="target3" />
+ <input type="checkbox" id="target4" />
+ </template>
+ </my-element>
+ <button id="close">Close popover</button>
+ </div>
+ <button id="after">
+ This button is where focus should land after traversing this popover
+ </button>
+</div>
+
+<script>
+promise_test(async () => {
+ // Open popover
+ invoker.focus();
+ invoker.click();
+ assert_true(popover.matches(":popover-open"));
+ assert_equals(document.activeElement, invoker);
+
+ await assert_focus_navigation_bidirectional([
+ 'invoker',
+ 'target1',
+ 'target2',
+ 'host/target3',
+ 'host/target4',
+ 'close',
+ 'after',
+ ]);
+}, 'Focus navigation for form controls contained in a popover');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-focus-inside-shadow-dom.html b/testing/web-platform/tests/html/semantics/popovers/popover-focus-inside-shadow-dom.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Popover focus behaviors inside shadow DOM</title>
+<meta name="timeout" content="long" />
+<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<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="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
+<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>
+<script src="resources/popover-utils.js"></script>
+
+<my-element id="host">
+ <template shadowrootmode="open">
+ <button popovertarget="popover" id="invoker">Open popover</button>
+ <div popover id="popover">
+ <input type="checkbox" id="target1" />
+ <input type="checkbox" id="target2" />
+ <button id="close">Close popover</button>
+ </div>
+ <button id="after">
+ This button is where focus should land after traversing this popover
+ </button>
+ </template>
+</my-element>
+
+<script>
+promise_test(async () => {
+ const shadowRoot = host.shadowRoot;
+ const invoker = shadowRoot.getElementById('invoker');
+ const popover = shadowRoot.getElementById('popover');
+ // Open popover
+ invoker.focus();
+ invoker.click();
+ assert_true(popover.matches(":popover-open"));
+ assert_equals(document.activeElement, host);
+ assert_equals(document.activeElement.shadowRoot.activeElement, invoker);
+
+ await assert_focus_navigation_bidirectional([
+ 'host/invoker',
+ 'host/target1',
+ 'host/target2',
+ 'host/close',
+ 'host/after',
+ ]);
+}, 'Focus behavior of popover elements inside shadow DOM');
+</script>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-focus-inside-slot.html b/testing/web-platform/tests/html/semantics/popovers/popover-focus-inside-slot.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8" />
+<title>Popover focus behaviors inside shadow DOM</title>
+<meta name="timeout" content="long" />
+<link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com">
+<link rel=help href="https://open-ui.org/components/popover.research.explainer">
+<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="/shadow-dom/focus-navigation/resources/focus-utils.js"></script>
+<script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script>
+<script src="resources/popover-utils.js"></script>
+
+<div>
+ <template shadowrootmode="open">
+ <slot name=invoker></slot>
+ <slot name=popover></slot>
+ <slot name=after></slot>
+ </template>
+ <button slot=invoker popovertarget="popover" id="invoker">Open
+ popover</button>
+ <div slot=popover popover id="popover">
+ <input type="checkbox" id="target1" />
+ <input type="checkbox" id="target2" />
+ <button id="close">Close popover</button>
+ </div>
+ <button slot=after id="after">
+ This button is where focus should land after traversing this popover
+ </button>
+</div>
+
+<script>
+promise_test(async () => {
+ // Open popover
+ invoker.focus();
+ invoker.click();
+ assert_true(popover.matches(":popover-open"));
+ assert_equals(document.activeElement, invoker);
+
+ await assert_focus_navigation_bidirectional([
+ 'invoker',
+ 'target1',
+ 'target2',
+ 'close',
+ 'after',
+ ]);
+}, 'Focus behavior of popover elements inside slot');
+</script>
