1791051 - outline-color should work with outline-style: auto

Status: RESOLVED MOVED

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

Description

[Luke Warlow]

Steps to reproduce:

Load this JSFiddle for a demo: https://jsfiddle.net/ht85jacp/

Actual results:

In Firefox:

1. Red outline.
2. Purple outline.
3. Green outline.

In Safari:

1. Red outline.
2. Red outline.
3. Green outline.

In Chrome

1. Green outline.
2. Green outline.
3. Green outline.

The red is my system accent colour on macOS.

As all 3 browser behave different behaviour this is an interop issue that would be nice to resolve.

Expected results:

I would expect to see the following.

1. Green outline.
2. Green or purple outline (I can see why accent-color would override)
3. Green outline.

As Firefox already allows a custom colour without losing the default style it would be nice if this was controllable from outline-color aswell as accent-color. This would also partially match how Chrome behaves so would go some of the way to solving the interop issue.

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

[Emilio Cobos Álvarez (:emilio)]

This probably needs an issue in the spec instead. Implementing this is sort of straight-forward. I used accent-color intentionally tho. outline: auto should not render a black outline, that's pretty unfortunate IMHO :/

Comment 3

[Luke Warlow]

Since the csswg resolved to support both outline-color and accent-color is it worth reopening this issue or should I make a new one (if one hasn't been automatically made already)

Comment 4

[Daniel Holbert [:dholbert] (PTO until 2/24)]

(In reply to Luke from comment #3)

should I make a new one (if one hasn't been automatically made already)

closing the loop: Luke filed bug 1833431 as a new bug to cover the behavior-change for the csswg resolution (thanks, Luke!)