Bug 1684366 [wpt PR 27015] - [selectors] Add tests for :focus-visible…

… in the default UA style sheet, a=testonly Automatic update from web-platform-tests [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). -- wpt-commits: 08069be5028d00518abd36e132275252937a34d3 wpt-pr: 27015 UltraBlame original commit: 990ee1b12d5a1243273aa37a90bd99326eb8dcf8
marco-c · Feb 3, 2021 · e850b56 · e850b56
1 parent cc5094d
commit e850b56
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-017.html b/testing/web-platform/tests/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: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" />
+<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>
+  // Check that :focus-visible is supported.
+  test_valid_selector(':focus-visible');
+
+  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`);
+      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/testing/web-platform/tests/css/selectors/focus-visible-018.html b/testing/web-platform/tests/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:rego@igalia.com">
+<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 });
+
+  // Check that :focus-visible is supported.
+  test_valid_selector(':focus-visible');
+
+  async_test(function(t) {
+    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>