[css-ui] Proposal: Allow `outline-offset` to reflect the effective offset for `outline-style: auto`

[sb3nder]

Problem

When outline-style: auto is used, browsers apply a UA-specific visual offset, and when outline-offset is used its value is summed to that UA-specific offset, because the initial value of outline-offset is 0px.
(effective offset = specified outline-offset + UA internal auto offset)

As a result, explicitly specified offsets may not correspond to the effective rendered offset, and results are much different between UAs.

Current effective offset, with outline-style: auto and outline-offset: 0px:

• Chrome: -1.5px
• Firefox: 0px
• WebKit: 2px

Or with outline-offset: 2px:

• Chrome: 0.5px
• Firefox: 2px
• WebKit: 4px

Solution

Change outline-offset initial value to auto:

• When outline-style is not auto, outline-offset: auto computes to 0px
• When outline-style: auto and outline-offset: auto, getComputedStyle().outlineOffset returns 0px to avoid fingerprinting

This would allow UAs to interpret outline-offset as the effective rendered offset
(effective offset = specified outline-offset)

Some examples:
outline-offset: auto: (effective offset = UA internal auto offset)
outline-offset: 0px: (effective offset = specified outline-offset(0px))
outline-offset: 2px: (effective offset = specified outline-offset(2px))

This would allow developers to rely on outline-offset for style auto focus rings, especially in scenarios involving overflow.