1771863 - Firefox does not revert outline-color but initialize.

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect, P3)

Description

[no-yan]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Steps to reproduce:

Revert keyword should show its default value but Firefox shows its initial value in outline-color.

Minimal reproduction: https://codepen.io/no-yan/pen/BaYrova

1. Open https://codepen.io/no-yan/pen/BaYrova on Firefox.
2. Check there is outline-color:revert.
3. Focus on each element.
4. Check outline has the same color as the text.

Optional
4. Check it via other browsers to confirm they show outline-color blue(default focus-ring color).
5. Check it occurs in Firefox nightly.

Actual results:

Outline-color has same color as the text.

Expected results:

Expected color of default focus-ring.

We expect reverted properties to show their default values, not initial values.
When properties reverted, it should show its default style(User Agent Style).

If the cascaded value of a property is the revert keyword, the behavior depends on the cascade origin to which the declaration belongs:

user origin
Rolls back the cascaded value to the user-agent level, so that the specified value is calculated as if no author-origin or user-origin rules were specified for this property on this element.
https://drafts.csswg.org/css-cascade/#default

As to outline-color, its default color is blue (in button, anchor), and its initial value is currentColor. This is the reason, in this case, focus-ring has same color as the text.

So, I think Firefox mistakenly behaves as if outline-color is "initialized".

If the UA does not support the invert value, then it must reject that value at parse-time, and the initial value of the outline-color property is the currentColor keyword.

I Confirmed this in Firefox nightly too.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Hiroyuki Ikezoe (:hiro)]

So, I am guessing a relevant part is this UA style. It specifies outline: 1px auto; so that we unintentionally use the initial value as if it's defined?

Comment 3

[no-yan]

we unintentionally use the initial value as if it's defined?

I guess so.
I don't understand the reason why the focus-ring color is blue (on Mac) when no color is set to the outline. I may be wrong, but I think blue is set somehow, and this default color is the color revert keyword should refer.

Comment 4

[Emilio Cobos Álvarez [:emilio]]

This works in other browsers because they don't follow the spec. The blue comes from outline-style: auto. Other browsers have:

https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css;l=1164;drc=ee67ee8e3ec9423a38f983787945fc24a8f01cf8

https://html.spec.whatwg.org/#phrasing-content-3 has:

:focus-visible { outline: auto }

Which is arguably closer to what we do.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

I filed https://github.com/whatwg/html/issues/7993 about this.

As of right now, we're following the spec with regards to the color. When that issue resolves we might want to use -moz-accent-color in our UA sheet, or a standard color in https://github.com/w3c/csswg-drafts/issues/5900.