Use :focus-visible in "Phrasing Content" section. #6256
Conversation
This matches Firefox, and the intent of this CSS pseudo-class, see w3c/csswg-drafts#4278.
annevk
added
topic: rendering
normative change
needs implementer interest
|
cc @whatwg/css |
|
Interesting that this differs so much from https://chromium-review.googlesource.com/c/chromium/src/+/2602429/ . The The tests at web-platform-tests/wpt#27015 don't seem like they test the default stylesheet though. In particular there should be a test that the value of /cc @mrego |
Yeah, Blink has a lot of focus rules as well... Gecko's rules are much simpler.
Well, they do test the computed styles (or lack thereof on this case). In particular, they test that a focused element via mouse (which should match focus but not focus-visible) has no outline, which is the desired behavior and a behavior difference from this patch. |
It's the "lack thereof" that I'm concerned about. I'd like to have a test which distinguishes between |
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 and WebKit pass this test, because despite they don't use `:focus-visible` in the UA stylesheet, they're 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.
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).
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).
|
Regarding the Chromium default stylesheet and the complicated rules there, I guess that's something out of the scope of this PR. Probably a Chromium bug is the proper place to discuss that. Regarding the tests, the initial test in web-platform-tests/wpt#27015 ( |
Well, if we think the spec should be changed, we'll want a spec bug. (But I'm not sure whether we do.) I agree it's out of scope for this PR.
Perfect. Could you link to the test pull request? |
I've put both test files on the same PR: web-platform-tests/wpt#27015. |
There was a problem hiding this comment.
Awesome. I guess we should wait for an answer to https://bugs.chromium.org/p/chromium/issues/detail?id=1162070#c7 before merging, to make sure there isn't some objection from other Chromium style folks. (But, I'm pretty sure there won't be.)
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).
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).
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).
|
Yes, thank you for the ping! Let's get this merged. |
domenic
added
topic: focus
and removed
needs implementer interest
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).
… 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
… 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
… 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
… 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
… 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
This matches Firefox, and the intent of this CSS pseudo-class, see
w3c/csswg-drafts#4278.
:focusdirectly either because of Shadow DOM, but doesn't support:focus-visibleyet.We should also specify that
object,embed, andiframedon't have outlines on focus by default, as that's the behavior Firefox, Chromium and WebKit have, but that's a separate patch / issue./rendering.html ( diff )