[selectors] Add new test for :focus-visible

This test checks that when you focus an element via script, it show a focus ring with `outline-style: auto`. See: w3c/csswg-drafts#4278 & whatwg/html#6256 Currently Chromium passes this test, because despite they don't use `:focus-visible` in the UA stylesheet, it's painting an auto style outline when an element is focused. However Firefox fails it, because even when it uses `:-moz-focusring` (the equivalent to `:focus-visible`) in the UA stylesheet, it uses dotted style for the outline. WebKit doesn't support `:focus-visible` yet an it fails, thought it's painting an auto style outline (the background color doesn't match on the test).
mrego · Jan 8, 2021 · a564b7e · a564b7e
1 parent bc4c6ba
commit a564b7e
Showing 1 changed file with 36 additions and 0 deletions.
diff --git a/css/selectors/focus-visible-017.html b/css/selectors/focus-visible-017.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Test (Selectors): Programatic focus matches :focus-visible</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
+<link rel="help" href="https://html.spec.whatwg.org/#phrasing-content-3" />
+<meta name="assert" content="This test checks that using JavaScript to focus an element triggers ':focus-visible' matching, and the element shows a focus ring with 'outline-style: auto'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  @supports not (selector(:focus-visible)) {
+    :focus {
+      background-color: red;
+    }
+  }
+
+  :focus-visible {
+    background-color: lime;
+  }
+
+  :focus:not(:focus-visible) {
+    background-color: red;
+  }
+</style>
+
+<div id="target" tabindex="0">Target</div>
+<script>
+  async_test(function(t) {
+    target.addEventListener("focus", t.step_func(function() {
+      assert_equals(getComputedStyle(target).outlineStyle, "auto", `outline-style for ${target.tagName}#${target.id} should be auto`);
+      assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${target.tagName}#${target.id} should be lime`);
+      t.done();
+    }));
+    target.focus();
+  }, "Programatic focus should match :focus-visible and should show a focus ring with 'outline-style: auto'");
+</script>