commit ad1638c431d208f9807e51a505d10df4e7a06abb
parent 3770f4f163edd07cff7e5251b6f78a4f248938b1
Author: Mason Freed <masonf@chromium.org>
Date: Tue, 23 Dec 2025 08:30:29 +0000
Bug 2007420 [wpt PR 56898] - Move keyboard focusable scrollers out to WPT, a=testonly
Automatic update from web-platform-tests
Move keyboard focusable scrollers out to WPT
See this issue for more context:
https://github.com/web-platform-tests/interop/issues/1089
These tests were previously Chromium-internal web_tests,
and this CL just moves them to WPT, still in a `tentative`
directory.
Change-Id: Ibad02415885175550a8d031ae66bc513bd02ab1a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7275628
Auto-Submit: Mason Freed <masonf@chromium.org>
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1561862}
--
wpt-commits: 1bc26a07af04bc2bf260880c915e5a998ecee79f
wpt-pr: 56898
Diffstat:
4 files changed, 221 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-navigation-scroller-delegatesFocus.html b/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-navigation-scroller-delegatesFocus.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<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/shadow-dom.js'></script>
+<script src='../resources/focus-utils.js'></script>
+
+<style>
+div.scroll {
+ overflow: auto;
+ width: 20em;
+ height: 5em;
+ display: block;
+}
+div.long {
+ width: 40em;
+ height: 40em;
+}
+</style>
+
+<button id="start">START</button>
+
+<div id="host-no-delegates-focus" class="scroll">
+ <template shadowrootmode="open">
+ <p>Scroller shadow root has delegatesFocus false.</p>
+ <button id="A">BUTTON A</button>
+ <slot></slot>
+ </template>
+ <div class=long></div>
+</div>
+
+<div id="host-no-delegates-focus-2" class="scroll">
+ <template shadowrootmode="open">
+ <p>Scroller shadow root has delegatesFocus false.</p>
+ <slot></slot>
+ </template>
+ <div class=long></div>
+</div>
+
+<div id="host-delegates-focus" class="scroll">
+ <template shadowrootmode="open" shadowrootdelegatesfocus>
+ <p>Scroller shadow root has delegatesFocus true.</p>
+ <button id="B">BUTTON B</button>
+ <slot></slot>
+ </template>
+ <div class=long></div>
+</div>
+
+<div id="host-delegates-focus-2" class="scroll">
+ <template shadowrootmode="open" shadowrootdelegatesfocus>
+ <p>Scroller shadow root has delegatesFocus true.</p>
+ <slot></slot>
+ </template>
+ <div class=long></div>
+</div>
+
+<button id="end">END</button>
+
+<script>
+
+ promise_test(async () => {
+ let elements = [
+ 'start',
+ 'host-no-delegates-focus/A',
+ 'host-no-delegates-focus-2',
+ 'host-delegates-focus/B',
+ 'end'
+ ];
+
+ assert_focus_navigation_bidirectional(elements);
+}, 'Should focus on scroller across shadow boundaries depending on delegatesFocus value.');
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-navigation-scroller-interactive-child.html b/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-navigation-scroller-interactive-child.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<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/focus-utils.js'></script>
+
+<button id="start">START</button>
+<div id="scroller" style="overflow:scroll; width:50px; height:50px;">
+ <div style="height:100px"></div>
+ <button id="submit" disabled>submit</button>
+</div>
+<button id="end">END</button>
+
+<script>
+promise_test(async () => {
+ const start = document.getElementById('start');
+ const scroller = document.getElementById('scroller');
+ const submit = document.getElementById('submit');
+ const end = document.getElementById('end');
+
+ start.focus();
+ assert_equals(document.activeElement, start);
+ await navigateFocusForward();
+
+ assert_equals(document.activeElement, scroller, 'scroller should be keyboard focusable');
+ assert_true(submit.disabled, 'button should be disabled');
+ submit.disabled = false;
+ assert_false(submit.disabled, 'button should be enabled');
+ assert_equals(document.activeElement, scroller, 'focus should stay on scroller');
+
+ await navigateFocusForward();
+ assert_equals(document.activeElement, submit);
+ await navigateFocusForward();
+ assert_equals(document.activeElement, end);
+ await navigateFocusBackward();
+ assert_equals(document.activeElement, submit);
+ await navigateFocusBackward();
+ assert_equals(document.activeElement, start,'After focus leaves the scroller, it should no longer be focusable');
+}, 'While focusing a keyboard-focusable scroller, adding interactive content should not cancel focusability');
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-navigation-scroller-tabindex.html b/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-navigation-scroller-tabindex.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<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/shadow-dom.js'></script>
+<script src='../resources/focus-utils.js'></script>
+
+<style>
+div.scroll {
+ overflow: auto;
+ width: 20em;
+ height: 5em;
+ display: block;
+ border: 1px solid lightgray;
+}
+div.long {
+ width: 40em;
+ height: 40em;
+}
+</style>
+
+<button id="start">START</button>
+
+<div id="scroller-tabindex" class="scroll" tabindex="0">
+ <p>Scroller has tabindex=0.</p>
+ <button id="A">BUTTON A</button>
+ <div class="long"></div>
+</div>
+
+<div id="scroller-tabindex-2" class="scroll" tabindex="0">
+ <p>Scroller has tabindex=0.</p>
+ <div class="long"></div>
+</div>
+
+<div id="scroller-none" class="scroll">
+ <p>Scroller has no tabindex.</p>
+ <button id="B">BUTTON B</button>
+ <div class="long"></div>
+</div>
+
+<div id="scroller-none-2" class="scroll">
+ <p>Scroller has no tabindex.</p>
+ <div class="long"></div>
+</div>
+
+<div id="scroller-negative" class="scroll" tabindex="-1">
+ <p>Scroller has tabindex=-1.</p>
+ <button id="C">BUTTON C</button>
+ <div class="long"></div>
+</div>
+
+<div id="scroller-negative-2" class="scroll" tabindex="-1">
+ <p>Scroller has tabindex=-1.</p>
+ <div class="long"></div>
+</div>
+
+<button id="end">END</button>
+
+<script>
+
+promise_test(async () => {
+ let elements = [
+ 'start',
+ 'scroller-tabindex',
+ 'A',
+ 'scroller-tabindex-2',
+ 'B',
+ 'scroller-none-2',
+ 'C',
+ 'end',
+ ];
+
+ assert_focus_navigation_bidirectional(elements);
+}, 'Should focus on scroller depending on tabindex value.');
+
+</script>
diff --git a/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-scroller-layout-update.html b/testing/web-platform/tests/shadow-dom/focus-navigation/tentative/focus-scroller-layout-update.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<script src='../resources/focus-utils.js'></script>
+
+<button id="button">Button</button>
+<div id="scroller" style="overflow:scroll; width:50px; height:50px;">
+ <div style="height:100px"></div>
+</div>
+
+<script>
+promise_test(async () => {
+ const button = document.getElementById('button');
+ const scroller = document.getElementById('scroller');
+
+ scroller.focus();
+ assert_equals(document.activeElement, scroller);
+
+ button.focus();
+ assert_equals(document.activeElement, button);
+
+ scroller.style.height = '200px';
+ scroller.focus();
+ assert_equals(document.activeElement, button, 'Should not focus on scroller since it is no longer scrollable');
+}, 'When checking that element is a scroller, layout information should be up to date.');
+</script>
