From 9165d54290f412c2d0cf705289cf6b0b2fa154ea Mon Sep 17 00:00:00 2001 From: Manuel Rego Casasnovas Date: Fri, 8 Jan 2021 12:54:37 +0100 Subject: [PATCH] [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). --- css/selectors/focus-visible-013.html | 6 ++--- css/selectors/focus-visible-017.html | 36 ++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 3 deletions(-) create mode 100644 css/selectors/focus-visible-017.html diff --git a/css/selectors/focus-visible-013.html b/css/selectors/focus-visible-013.html index c12ee73d9179129..f65fed7d8f211e6 100644 --- a/css/selectors/focus-visible-013.html +++ b/css/selectors/focus-visible-013.html @@ -1,6 +1,6 @@ -CSS Test (Selectors): Mouse focus does not match :focus-visible +CSS Test (Selectors): Mouse focus does not show a focus ring by default @@ -24,7 +24,7 @@ } -

This test checks that using the mouse to focus an element does not trigger :focus-visible matching, and the element doesn't show any focus ring.

+

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. If the user-agent does not claim to support the :focus-visible pseudo-class then SKIP this test.
  2. Click on the element below that says "Click me."
    3. @@ -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"); diff --git a/css/selectors/focus-visible-017.html b/css/selectors/focus-visible-017.html new file mode 100644 index 000000000000000..b8642860ec60c89 --- /dev/null +++ b/css/selectors/focus-visible-017.html @@ -0,0 +1,36 @@ + + +CSS Test (Selectors): By default a programatic focus that matches :focus-visible shows an auto focus ring + + + + + + + + +
    Target
    +