[selectors] Add tests for :focus-visible in the default UA style sheet

This patch adds 2 new tests to verify that the default UA style sheet uses `:focus-visible { outline: auto; }`. See: whatwg/html#6256 & w3c/csswg-drafts#4278 * focus-visible-017.html: This test checks that when you focus an element via script, it show a focus ring with `outline-style: auto`. 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 test is specifically checking for `:focus-visible` support). * focus-visible-018.html: This test checks that when you click an element to focus it, it doesn't show any kind of focus ring. Currently Firefox passes this test, by Chromium fails it because Chromium is using `:focus` on the default UA stylesheet and is adding an outline on the element, despite it doesn't match `:focus-visible` (see https://crbug.com/1162070).
web-platform-tests · Jan 22, 2021 · 8f365a5 · 8f365a5
1 parent 289878d
commit 8f365a5
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 0 deletions.
diff --git a/css/selectors/focus-visible-017.html b/css/selectors/focus-visible-017.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Test (Selectors): By default initial programatic focus matches :focus-visible and it 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" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  #warning {
+    display: none;
+    background: red;
+  }
+
+  @supports not (selector(:focus-visible)) {
+    #instructions {
+      display: none;
+    }
+
+    #warning {
+      display: block;
+    }
+  }
+</style>
+
+<p>This test checks that by default, if using JavaScript to focus an element triggers <code>:focus-visible</code> matching, then the element should show a focus ring with <code>outline-style: auto</code>.</p>
+<ol id="instructions">
+  <li>If the element below that says "Target" show a focus ring with <code>outline-style: auto</code>, then the test result is SUCCESS.</li>
+</ol>
+<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>
+<div id="target" tabindex="0">Target</div>
+<script>
+  async_test(function(t) {
+    // Check that :focus-visible is supported.
+    test_valid_selector(':focus-visible');
+
+    target.addEventListener("focus", t.step_func(function() {
+      assert_equals(getComputedStyle(target).outlineStyle, "auto", `outline-style for ${target.tagName}#${target.id} should be auto`);
+      t.done();
+    }));
+    target.focus();
+  }, "By default initial programatic focus matches ':focus-visible', so the element shows a focus ring with 'outline-style: auto'");
+</script>
diff --git a/css/selectors/focus-visible-018.html b/css/selectors/focus-visible-018.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<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>
+<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>
+<script src="/css/support/parsing-testcommon.js"></script>
+<style>
+  #warning {
+    display: none;
+    background: red;
+  }
+
+  @supports not (selector(:focus-visible)) {
+    #instructions {
+      display: none;
+    }
+
+    #warning {
+      display: block;
+    }
+  }
+</style>
+
+<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>Click on the element below that says "Click me."</li>
+  <li>If the element does not have a focus ring, then the test result is SUCCESS.</li>
+</ol>
+<p id="warning">Your user-agent does not support <code>:focus-visible</code> pseudo-class, please SKIP this test.</p>
+<div id="target" tabindex="0">Click me.</div>
+<script>
+  setup({ explicit_done: true });
+
+  async_test(function(t) {
+    // Check that :focus-visible is supported.
+    test_valid_selector(':focus-visible');
+
+    target.addEventListener("focus", t.step_func(function() {
+      assert_equals(getComputedStyle(target).outlineStyle, "none", `outline-style for ${target.tagName}#${target.id} should be none`);
+      t.done();
+    }));
+    test_driver.click(target).then(() => done());
+  }, "Mouse focus does not show a focus ring by default");
+</script>