1730147 - `appearance: menulist-button` on <select> elements disregards background-color property

Status: REOPENED

(Core :: Layout: Form Controls, defect)

Description

[Simon Pieters [:zcorpan]]

Gecko doesn't quite match the spec for how CSS 'appearance' should work.

Spec change:
https://github.com/whatwg/html/pull/7004
https://github.com/w3c/csswg-drafts/pull/6537

Tests:
https://github.com/web-platform-tests/wpt/pull/30267

Test failures:
/css/css-ui/compute-kind-widget-generated/*
The <meter> and <progress> elements get a different style, which isn't per spec.
The <select> and <select style="appearance: menulist-button"> elements have different rendering when 'background-color' (or other) is applied, which isn't per spec, and is different from what Chromium does.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

(In reply to Simon Pieters (:zcorpan) from comment #0)

The <meter> and <progress> elements get a different style, which isn't per spec.

Can you clarify what do you mean by this? They both report a computed style of auto. You mean that they get different UA styles? (If so, that's right, <progress> gets a linear-gradient background-image while meter gets a solid color, but not sure that's what you meant).

The <select> and <select style="appearance: menulist-button"> elements have different rendering when 'background-color' (or other) is applied, which isn't per spec, and is different from what Chromium does.

Can you elaborate? I see two elements with the same rendering if I paste this into the address bar:

data:text/html,<select style="background-color: white"><option>abc</option></select><select style="background-color: white; appearance: menulist-button"><option>abc</option></select>

What am I missing?

Comment 2

[Simon Pieters [:zcorpan]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #1)

(In reply to Simon Pieters (:zcorpan) from comment #0)

The <meter> and <progress> elements get a different style, which isn't per spec.

Can you clarify what do you mean by this? They both report a computed style of auto. You mean that they get different UA styles? (If so, that's right, <progress> gets a linear-gradient background-image while meter gets a solid color, but not sure that's what you meant).

Yes, the latter. https://github.com/w3c/csswg-drafts/pull/6537/files#diff-cc2f666bf7d93dcefcc3fffc4761793a54fba00c03b53b9dbdf81f5056f0b56eR2198-R2204 doesn't provide fallback.

The <select> and <select style="appearance: menulist-button"> elements have different rendering when 'background-color' (or other) is applied, which isn't per spec, and is different from what Chromium does.

Can you elaborate? I see two elements with the same rendering if I paste this into the address bar:

data:text/html,<select style="background-color: white"><option>abc</option></select><select style="background-color: white; appearance: menulist-button"><option>abc</option></select>

What am I missing?

I mean: with 'background-color' is different appearance than without 'background-color'.

data:text/html,<select><option>abc</option></select><select style="background-color:white"><option>abc</option></select>

and

data:text/html,<style>select { appearance: menulist-button }</style><select><option>abc</option></select><select style="background-color:white"><option>abc</option></select>

Comment 3

[Simon Pieters [:zcorpan]]

Oh, for progress and meter, I don't mean that progress has different style than meter. I mean <progress> and <progress style="background-color: white"> have different appearance (narrow bar with rounded corners vs wider bar with square corners).

data:text/html,<progress value=0.5></progress><progress value=0.5 style="background-color:white"></progress>

Comment 4

[Simon Pieters [:zcorpan]]

and

data:text/html,<meter%20value=0.5></meter><meter%20value=0.5%20style="background-color:white"></meter>

For meter, Chromium has the same rendering between the two, while WebKit and Gecko have different rendering. But for progress all browsers seem to agree to have different appearances (the second being like appearance: none).

This could be tweaked in the spec. It's not defined yet how an appearance: none progress or meter should render. I guess we need to spec a pseudo-element to be able to style the "value" part.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

(In reply to Simon Pieters (:zcorpan) from comment #2)

I mean: with 'background-color' is different appearance than without 'background-color'.

That's also true in Chromium. background-color disables native appearance, just like border properties.

For meter, Chromium has the same rendering between the two, while WebKit and Gecko have different rendering. But for progress all browsers seem to agree to have different appearances (the second being like appearance: none).

I think ~all browsers agree on disabling native styling when backgrounds/borders are specified on ~all html-exposed widgets except checkboxes and radios. So I'm not sure why meter would be different, so I think Gecko/WebKit behavior is slightly better.

Comment 6

[Simon Pieters [:zcorpan]]

OK so that means changing the spec, let's move the discussion over to https://github.com/w3c/csswg-drafts/pull/6537 :-)

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Moved to https://github.com/w3c/csswg-drafts/pull/6537 as per comment 6 (Thanks Simon)

Comment 8

[Simon Pieters [:zcorpan]]

Spec and tests fixed.

This bug is still valid for <select> and <select style="appearance: menulist-button"> however. Should this bug be reopened or would you like a new bug?

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Okay, sorry for my misunderstanding. I am reopening this bug for reuse the select element issue.

Comment 10

[Hiroyuki Ikezoe (:hiro)]

Hmm I'd like to attach the test case Simon commented in comment 2 as an attachment in this bug, but I do forget the way...

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Attachment: Select vs select with background-color.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

Attachment: Menulist-button select vs. menulist-button select with background-color.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

I'm still a bit confused, what is the behavior change you'd like to see here? I guess I don't understand the bug. In all browsers specifying background on a <select> (regardless of appearance) disables the "native" appearance.

It seems Chrome is also removing native appearance with appearance: menulist-button. That's not against the spec afaict, but neither is our behavior. The spec only says that we should honor backgrounds and borders, and we do, not that we must disable native appearance. So what am I missing?

Comment 14

[Simon Pieters [:zcorpan]]

It is confusing, and I made a mistake, but there is a bug (per spec).

My mistake is that <select> and <select style="background-color: initial"> are allowed to have a different appearance. The first one should be like appearance: menulist and the second like appearance: menulist-button.

The bug is that Firefox makes appearance: menulist-button look the same as menulist, but a 'background-color' changes the appearance.

The spec has 3 different possible renderings for <select>:

• menulist which is the default
• menulist-button which you get if you specify a background-color
• none which removes the "dropdown" button

Since an explicit appearance: menulist-button doesn't do anything in Firefox, there would need to be another value to describe the "dropdown but support changing background-color" appearance.

That is, the two selects in https://bugzilla.mozilla.org/attachment.cgi?id=9248577 should look the same.

https://github.com/w3c/csswg-drafts/pull/6537/files#diff-cc2f666bf7d93dcefcc3fffc4761793a54fba00c03b53b9dbdf81f5056f0b56eR2189-R2191