1485922 - Fieldset default border color is not interoperable with other browsers

Status: RESOLVED WORKSFORME

(Core :: Layout, defect, P4)

Description

[Simon Pieters [:zcorpan]]

http://web-platform.test:8000/html/rendering/non-replaced-elements/the-fieldset-element-0/fieldset-default-style.html

Comment 1

[Mats Palmgren (inactive)]

What's wrong with our border color exactly?
The draft spec doesn't seem to require a specific color AFAICT:
https://whatpr.org/html/3934/rendering.html#the-fieldset-and-legend-elements

Yes, I see that our color is slightly lighter shade of grey than in Chrome,
but I don't consider that a bug per se, unless the spec requires a specific
color value. (Edge and Safari also renders the border differently).

Comment 2

[Mats Palmgren (inactive)]

(I tested Firefox/Chrome on Linux, BTW.  The colors might be different
on other platforms.)

Comment 3

[Simon Pieters [:zcorpan]]

The spec says that the "ThreeDFace" color is expected. In the test:

http://web-platform-tests.live/html/rendering/non-replaced-elements/the-fieldset-element-0/fieldset-default-style.html

it specifies this color on a div and compares the computed style of a fieldset and the ref div.

Comment 4

[Mats Palmgren (inactive)]

OK, it appears we use ThreeDLightShadow:
https://searchfox.org/mozilla-central/rev/c45b9755593ce6cc91f558b21e544f5165752de7/layout/style/res/forms.css#76

We intentionally changed it from ThreeDFace to ThreeDLightShadow
3 years ago because ThreeDFace didn't work well in high-contrast mode:
https://hg.mozilla.org/mozilla-central/rev/662737a36e01

I guess we would have to revert that and fix that problem
in a different way then.

Comment 5

[:Gijs (he/him)]

What do other browsers (esp. IE/Edge) do in high-contrast-mode?

Comment 6

[Simon Pieters [:zcorpan]]

An option would be to convince other browsers to switch to ThreeDLightShadow, if it works better.

Comment 7

[Boris Zbarsky [:bzbarsky]]

We need to figure out the answer to the question in comment 5 here.

Comment 8

[Simon Pieters [:zcorpan]]

Test: http://web-platform-tests.live/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html


On macOS in high contrast mode, Safari and Chrome still pass all tests. They report the color rgb(192, 192, 192)
both with and without high contrast mode, and I don't see any visual difference for a fieldset.


On Windows in normal mode, Edge (EdgeHTML 16) reports a black border color for fieldset from getComputedStyle, but it's not black visually. It's also visually different from a div with a 2px groove ThreeDFace or ThreeDLightShadow border.

On Windows in High Contrast #1, Edge reports that the border color is rgb(255, 255, 0) but visually it is the same as in normal mode. A div with ThreeDFace or ThreeDLightShadow border is yellow.

Comment 9

[Boris Zbarsky [:bzbarsky]]

> On macOS in high contrast mode

Not relevant to bug 452800, fwiw.  That bug was specifically about what colors Windows uses for the relevant system colors in high-contrast mode.

> On Windows in normal mode, Edge (EdgeHTML 16) reports a black border color for fieldset from getComputedStyle, but it's not black visually.

Interesting.

> On Windows in High Contrast #1, Edge reports that the border color is rgb(255, 255, 0) but visually it is the same as in normal mode. A div with ThreeDFace or ThreeDLightShadow border is yellow.

Exciting.  Sounds like they have some sort of fieldset-specific magic somewhere?  What does Chrome does in High Contrast mode on Windows?  What happens if you explicitly style the fieldset border as ThreeDFace or ThreeDLightShadow?

Comment 10

[Simon Pieters [:zcorpan]]

> What happens if you explicitly style the fieldset border as ThreeDFace or ThreeDLightShadow?

No visual difference in Edge.

> What does Chrome does in High Contrast mode on Windows?

It doesn't do anything, it seems. It offers to install an extension to enable high contrast mode in Chrome, which can invert colors, but doesn't change the colors as seen from script, AFAICT.

Comment 11

[Anna Yeddi [:ayeddi]]

(In reply to Simon Pieters [:zcorpan] from comment #8)

Test:
http://web-platform-tests.live/html/rendering/non-replaced-elements/the-
fieldset-and-legend-elements/fieldset-default-style.html

On macOS in high contrast mode, Safari and Chrome still pass all tests. They
report the color rgb(192, 192, 192)
both with and without high contrast mode, and I don't see any visual
difference for a fieldset.

On Windows in normal mode, Edge (EdgeHTML 16) reports a black border color
for fieldset from getComputedStyle, but it's not black visually. It's also
visually different from a div with a 2px groove ThreeDFace or
ThreeDLightShadow border.

On Windows in High Contrast #1, Edge reports that the border color is
rgb(255, 255, 0) but visually it is the same as in normal mode. A div with
ThreeDFace or ThreeDLightShadow border is yellow.

Hi Simon, it looks like this test has been passing WPT for some time now. Maybe this bug can be closed?
https://wpt.fyi/results/html/rendering/non-replaced-elements/the-fieldset-and-legend-elements/fieldset-default-style.html?label=master&label=experimental&aligned&q=fieldset

Comment 12

[Simon Pieters [:zcorpan]]

Yes. I don't have Windows available currently so can't easily test what happens with high-contrast. On macOS the test passes even with high contrast on.