[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 12, 2021 · 9165d54 · 9165d54
1 parent bc4c6ba
commit 9165d54
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/css/selectors/focus-visible-013.html b/css/selectors/focus-visible-013.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
-<title>CSS Test (Selectors): Mouse focus does not match :focus-visible</title>
+<title>CSS Test (Selectors): Mouse focus does not show a focus ring by default</title>
 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
 <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
 <script src="/resources/testharness.js"></script>
@@ -24,7 +24,7 @@
   }
 </style>
 
-<p>This test checks that using the mouse to focus an element does not trigger <code>:focus-visible</code> matching, and the element doesn't show any focus ring.</p>
+<p>This test checks that by default, using the mouse to focus a generic element does not show a focus ring (because it does not trigger <code>:focus-visible</code> matching).</p>
 <ol id="instructions">
   <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
   <li>Click on the element below that says "Click me."</li>
@@ -42,5 +42,5 @@
       t.done();
     }));
     test_driver.click(target).then(() => done());
-  }, "Mouse focus should not match :focus-visible and should not show a focus ring");
+  }, "Mouse focus does not show a focus ring by default");
 </script>
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): By default a programatic focus that matches :focus-visible shows an auto focus ring</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
+<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 by default, if using JavaScript to focus an element triggers ':focus-visible' matching, then the element should show 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();
+  }, "By default if programatic focus matches ':focus-visible', it shows a focus ring with 'outline-style: auto'");
+</script>