1382687 - stylo: Outline missing on styled form buttons with focus

Status: RESOLVED DUPLICATE of bug 1382222

(Core :: CSS Parsing and Computation, defect)

Description

[Simon Sapin (:SimonSapin)]

I first noticed this on https://www.reddit.com/r/rust/comments/6o7cqf/this_week_in_rust_191/

Steps to reproduce:

* Enable Stylo
* Navigate to data:text/html,<input><input type=submit style=border:none>
* Click inside the text field to give it focus
* Press the Tab key once

Expected result (and result with Stylo disabled): the button gets focus, which is made visible by a dotted border/outline.

Actual result in 56.0a1 (2017-07-20): the button gets focus (pressing Enter would submit the form if there were one), but there is no visual indication of that.

(At least on Linux, border:none forces the button to be rendered entirely by Gecko and with CSS rather than as a "native" or native-looking widget. The visual indication appears correctly on "native" buttons, even with Stylo.)

It looks like the CSS rules responsible for this visual indication are in layout/style/res/forms.css. Simplified:

    input[type="submit"]::-moz-focus-inner {
      border: 1px dotted transparent;
    }

    input[type="submit"]:-moz-focusring::-moz-focus-inner {
      border-color: ButtonText;
    }

Messing with obj-x86_64-pc-linux-gnu/dist/bin/chrome/toolkit/res/forms.css in a local build, I found that both :-moz-focusring and ::-moz-focus-inner appear to be working correctly when used independently, but a rule with :-moz-focusring::-moz-focus-inner is never applied.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Yup, this is pretty much https://bugzilla.mozilla.org/show_bug.cgi?id=1382222