Introduce FocusOptions.focusVisible.

As per: * whatwg/html#7830 * whatwg/html#8087 Replace the internal preventFocusRing with the new flag. Differential Revision: https://phabricator.services.mozilla.com/D151326 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1765083 gecko-commit: 570b38756541697f8b5c3b8084b5a2fb438eeca9 gecko-reviewers: smaug, pip-reviewers
web-platform-tests · Jul 11, 2022 · 0b37e58 · 0b37e58
1 parent 25ac31f
commit 0b37e58
Showing 1 changed file with 65 additions and 0 deletions.
diff --git a/html/interaction/focus/processing-model/focusVisible.html b/html/interaction/focus/processing-model/focusVisible.html
@@ -0,0 +1,65 @@
+<!doctype html>
+
+<title>focus(options) - focusVisible</title>
+<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>
+
+<style>
+  div {
+    height: 10px;
+    border: 1px solid black;
+  }
+</style>
+
+<button>ABC</button>
+<input>
+<div id="contenteditable" contenteditable></div>
+<div id="tabindex" tabindex=0></div>
+<div id="not_focusable"></div>
+
+<div id="reset_focus" tabindex=0></div>
+
+<script>
+const reset_focus = document.getElementById("reset_focus");
+
+async function check_focus_visible(element, options, { shouldBeVisible, shouldBeFocused }) {
+  // Reset focus by clicking on a div, which should not show focus rings.
+  await test_driver.click(reset_focus);
+
+  assert_equals(document.activeElement, reset_focus, "Reset should be focused");
+  assert_true(reset_focus.matches(":focus"), "Clicking focusable div should match :focus");
+  assert_false(reset_focus.matches(":focus-visible"), "Clicking focusable div shouldn't match :focus-visible");
+
+  element.focus(options);
+
+  assert_equals(document.activeElement, shouldBeFocused ? element : reset_focus, "activeElement");
+  assert_equals(element.matches(":focus"), shouldBeFocused, ":focus");
+  assert_equals(element.matches(":focus-visible"), shouldBeVisible, ":focus-visible");
+}
+
+for (let selector of ["button", "input", "#contenteditable", "#tabindex", "#not_focusable"]) {
+  promise_test(async function() {
+    const takesKeyboardInput = selector == "#contenteditable" || selector == "input";
+    const shouldBeFocused = selector != "#not_focusable";
+
+    const element = document.querySelector(selector);
+
+    await check_focus_visible(element, {}, {
+      shouldBeVisible: takesKeyboardInput,
+      shouldBeFocused,
+    });
+
+    await check_focus_visible(element, { focusVisible: true }, {
+      shouldBeVisible: shouldBeFocused,
+      shouldBeFocused,
+    });
+    await check_focus_visible(element, { focusVisible: false }, {
+      shouldBeVisible: false,
+      shouldBeFocused,
+    });
+  }, "FocusOptions.focusVisible: " + selector);
+}
+</script>