Bug 1929504 [wpt PR 48997] - Add interactivity:inert focus() test, a=testonly

Automatic update from web-platform-tests
Add interactivity:inert focus() test

Test that focus() does not work for input in interactivity:inert. Also
test that flipping back to interactivity:auto in an inert subtree allows
focusing again.

Also modified test not tentative and still referring to visibility.

Bug: 370065759
Change-Id: I0a7d592f85566e550ef04028e7e0d734c831166a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5993677
Reviewed-by: Daniil Sakhapov <sakhapov@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1378872}

--

wpt-commits: caa5c5bb7d86612b0f3f291b208d4189bb521697
wpt-pr: 48997
This commit is contained in:
Rune Lillesveen
2024-11-07 04:37:22 +00:00
committed by moz-wptsync-bot
parent f03f34f4c9
commit dd0602d278
2 changed files with 35 additions and 2 deletions

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: visibility:inert blocks click events</title>
<title>CSS Basic User Interface Test: interactivity:inert blocks click events</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10711#issuecomment-2379913684">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
@@ -32,5 +32,5 @@
inert.style.interactivity = 'auto';
await test_driver.click(inert);
assert_true(clicked);
}, "Click event should work after visibility change");
}, "Click event should work after interactivity change");
</script>

View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<title>CSS Basic User Interface Test: interactivity:inert blocks focus()</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10711#issuecomment-2379913684">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#inert { interactivity: inert; }
#non-inert { interactivity: auto; }
</style>
<input id="inp_outer">
<div id="inert">
<input id="inp_inert">
<div id="non-inert">
<input id="inp_non_inert">
</div>
</div>
<script>
test(() => {
inp_outer.focus();
assert_equals(document.activeElement, inp_outer);
}, "Focus outer input");
test(() => {
inp_inert.focus();
assert_equals(document.activeElement, inp_outer);
}, "Try focus inert input");
test(() => {
inp_non_inert.focus();
assert_equals(document.activeElement, inp_non_inert);
}, "Focus non-inert input inside inert ancestry");
</script>