1833431 - [css-ui] outline-color should work with outline-style: auto

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Luke Warlow]

+++ This bug was initially created as a clone of Bug #1791051 +++

Steps to reproduce:

Load this JSFiddle for a demo: https://jsfiddle.net/0h72m4dw/1/

Actual results:

In Firefox:

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

In Safari:

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

In Chrome

1. Green outline.
2. Green outline.
3. Black outline.
4. Green outline.

The red is my system accent colour on macOS.

Expected results based on https://github.com/w3c/csswg-drafts/issues/7761 :

I would expect to see the following.

1. Green outline.
2. Green outline.
3. Purple outline.
4. Green outline.

Comment 1

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

Attachment: testcase 1 (from reporter)

Comment 2

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

Confirming bug. The CSSWG resolution was:

RESOLVED: outline-style: auto outlines, if influenced by an author color, are influenced by outline-color, which itself gets a new initial value keyword 'auto' which computes to 'currentColor' when outline-style is not auto and otherwise represents the 'accent-color'

In this case, the first element has (via a shorthand):

outline-color: green;
outline-style: auto;

So per the csswg resolution, it should be "influenced by outline-color", i.e. it should draw green.