1634739 - getComputedStyle of <button>:focus does not report correct outline-style

Status: RESOLVED INVALID

(Core :: DOM: CSS Object Model, defect)

Description

[Andrew Benson]

Attachment: test.html

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0

Steps to reproduce:

I've attached a test HTML page to help with repro'ing.

1. Open page in Firefox.
2. Open console to view output.
3. Click the 'Start test!' button.
4. See console output. (The test focuses a <a>, reports getComputedStyle(a).outlineStyle, then focuses a <button>, and reports getComputedStyle(button).outlineStyle.)

Actual results:

The <a>'s outlineStyle was 'dotted', matching https://github.com/mozilla/gecko-dev/blob/master/layout/style/res/html.css.

The <button>'s outlineStyle was 'none', not matching https://github.com/mozilla/gecko-dev/blob/master/layout/style/res/html.css.

(In Chrome, both return 'auto', matching https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css.)

Expected results:

I expected both to return 'dotted' since that's visually what I see. (Context for why I'm doing this: I was messing with the focus ring on a <button> in a website and wanted to programmatically check in unit tests that the focus ring still existed.)

From a first glance, I think I see why it works in Chrome but not Firefox - Chrome's default user agent stylesheet sets outline for all :focus elements, while Firefox's default user agent stylesheet only sets outline for particular elements (including <a>, not including <button>), depending on the underlying widget to draw the outline itself (?).

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Yeah, this is expected given the UA sheet. The focus in the button is not an outline, is a windows-style inner "border" which is represented by the ::-moz-focus-inner pseudo-element: https://searchfox.org/mozilla-central/rev/710d6e1015d03343b067b92e6f1f775a0b1cad6f/layout/style/res/forms.css#704-713

There is a list of bugs I need to eventually get to (bug 1583381, bug 1580935, and more importantly bug 1311444) which will probably make all these elements have outline-style: auto.

But given the current CSS this is expected. You can maybe test getComputedStyle(button, "::-moz-focus-inner").borderStyle or such? Not ideal.

Closing as INVALID as in "this is working as expected, given the current state of affairs", but as mentioned the behavior will probably be changed in those bugs.