From 02a14e998924f167d6fea810b1e0e56c3cfe353a Mon Sep 17 00:00:00 2001 From: Manuel Rego Casasnovas Date: Tue, 26 Jan 2021 16:30:16 +0000 Subject: [PATCH] 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 --- .../css/selectors/focus-visible-017.html | 44 +++++++++++++++++ .../css/selectors/focus-visible-018.html | 49 +++++++++++++++++++ 2 files changed, 93 insertions(+) create mode 100644 testing/web-platform/tests/css/selectors/focus-visible-017.html create mode 100644 testing/web-platform/tests/css/selectors/focus-visible-018.html diff --git a/testing/web-platform/tests/css/selectors/focus-visible-017.html b/testing/web-platform/tests/css/selectors/focus-visible-017.html new file mode 100644 index 0000000000000..21b7528f4e060 --- /dev/null +++ b/testing/web-platform/tests/css/selectors/focus-visible-017.html @@ -0,0 +1,44 @@ + + +CSS Test (Selectors): By default initial programatic focus matches :focus-visible and it shows an auto focus ring + + + + + + + + +

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.

+
    +
  1. If the element below that says "Target" show a focus ring with outline-style: auto, then the test result is SUCCESS.
    2. +
+

Your user-agent does not support :focus-visible pseudo-class, please SKIP this test.

+
Target
+ diff --git a/testing/web-platform/tests/css/selectors/focus-visible-018.html b/testing/web-platform/tests/css/selectors/focus-visible-018.html new file mode 100644 index 0000000000000..3f3ea8832c0bf --- /dev/null +++ b/testing/web-platform/tests/css/selectors/focus-visible-018.html @@ -0,0 +1,49 @@ + + +CSS Test (Selectors): Mouse focus does not show a focus ring by default + + + + + + + + + + +

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 :focus-visible matching).

+
    +
  1. Click on the element below that says "Click me."
    2. +
  2. If the element does not have a focus ring, then the test result is SUCCESS.
    3. +
+

Your user-agent does not support :focus-visible pseudo-class, please SKIP this test.

+
Click me.
+