Closed Bug 1031664 Opened 10 years ago Closed 5 years ago

Enable rendering of outline-style:auto by default


(Core :: Layout, enhancement, P3)




Tracking Status
firefox74 --- fixed


(Reporter: MatsPalmgren_bugz, Assigned: emilio)


(Blocks 1 open bug)


(Keywords: dev-doc-complete)


(4 files)

It was disabled due to issues in some Gnome environments, bug 1031662.
We should fix that and then enable it by default again.
Depends on: 427928
No longer depends on: 427928
Blocks: 1034018
Priority: -- → P3
Blocks: 1311444

With the gtk fix in place is there any reason not to do this?

I'll send an intent if so. Let me know if you want to keep it on nightly /
early beta for a while, too.

Assignee: nobody → emilio
See Also: → 1607846

It's been quite a while since this was implemented though... we should probably verify that it works as intended on all platforms before enabling it. I seem to recall there was some issue on some version of Windows, but I don't recall exactly what it was...

Ok, wdyt of enabling nightly/early-beta for now after I test it looks sane on Windows / Mac?

Flags: needinfo?(mats)

This is probably what I was thinking about:
That said, it's probably not a blocking issue... but it be nice if someone could test it on Win7 and Win10 and post screenshots.

Flags: needinfo?(mats)

I seem to recall it was working correctly on Mac, but yeah, probably worth re-testing that as well. I can try that later unless someone beats me to it...

We should also test this in "dark mode" on all platforms. That feature didn't exist back when this was implemented, so we should verify that it works correctly.

I did a quick test on macOS Catalina (10.15.2) and it does seem to work reasonably well there. data:text/html,<div style="outline:auto">xxx</div> renders a light-blue outline. We use the same color in Light and Dark mode though, unlike native applications which get a slightly darker blue-ish color in Dark mode (I compared with the Search input control in System Preferences).

This is the rendering of data:text/html,<input type="text"><br><a style="outline: 1px solid" href="">Foo</a><br><a style="outline: auto" href="">Foo</a>

That is not quite amazing...

Other apps in Win10 seem to have thicker outlines from what I can see...

Seems like a 1 CSS pixel solid outline with a slight radius (irrespective of outline-width). They recently enabled their form-controls-refresh, but this looks similar both with it enabled and disabled. Only the color of the outline in the focused input changes.

Mats, not sure about your thoughts on the above... We could change the Windows rendering only... Do you know what other browsers do in mac?

Flags: needinfo?(mats)

Edge (pre-chromium) doesn't parse outline-style: auto

Were the <input>s focused when you took those screenshots? (I seem to recall Windows has a blue-ish focus border, but perhaps that's just Win7?)

Only the color of the outline in the focused input changes.

outline:auto should definitely use the same color as a focused <input> IMO. That's the whole point of this feature. That said, last I checked the spec it said "do whatever you want" basically.

For data:text/html,<div style="outline:auto red 10px;">xxx</div>, Chrome ignores the width but not the color. It seems like a bug to me that they don't ignore the color too. Safari ignores both color and width and render a blue-ish color.

Flags: needinfo?(mats)

(In reply to Mats Palmgren (:mats) from comment #13)

Were the <input>s focused when you took those screenshots? (I seem to recall Windows has a blue-ish focus border, but perhaps that's just Win7?)

Yeah, at least win10 focused border is black. Active border is blueish.

Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla74
Regressions: 1609195
Regressions: 1624436
You need to log in before you can comment on or make changes to this bug.