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 <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1378872}
web-platform-tests · Nov 6, 2024 · caa5c5b · caa5c5b
1 parent a39ccae
commit caa5c5b
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git a/css/css-ui/interactivity-inert-click.html → .../interactivity-inert-click.tentative.html b/css/css-ui/interactivity-inert-click.html → .../interactivity-inert-click.tentative.html
@@ -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>
diff --git a/css/css-ui/interactivity-inert-focus.tentative.html b/css/css-ui/interactivity-inert-focus.tentative.html
@@ -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>