Add -webkit-appearance:meter and make that the default for <meter> for compatibility with other UAs

RESOLVED FIXED in Firefox 65

Status

()

P3
normal
RESOLVED FIXED
5 months ago
a month ago

People

(Reporter: mats, Assigned: mats)

Tracking

({dev-doc-complete, testcase})

Trunk
mozilla65
dev-doc-complete, testcase
Points:
---

Firefox Tracking Flags

(firefox65 fixed)

Details

Attachments

(2 attachments)

(Assignee)

Description

5 months ago
Posted file Testcase
We should add a new 'meter' value to '-webkit-appearance' in
the style system, and make the existing 'meterbar' value an
alias for 'meter'.

We should also replace any existing 'meterbar' values in our
UA sheets with 'meter'.  In particular, the default value
for <meter>.

Chrome uses '-webkit-appearance:meter' on the <meter> element.
Setting '-webkit-appearance:none' removes the theme and it
renders its contents instead.  Setting display:inline appears
to work but it appears they use an inner anonymous block
to render the contents, so it ends up as a block-in-inline.
display:contents works as display:none.

Edge, on the other hand, uses '-webkit-appearance:none'
by default on <meter> and it never renders its contents.
display:contents appears to have no effect.
Setting the 'background' doesn't seem to work at all.

https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element
says:
"Content model:
    Phrasing content, but there must be no meter element descendants."
...
"Authors are encouraged to include a textual representation of the gauge's state in the element's contents, for users of user agents that do not support the meter element."
(Assignee)

Comment 1

5 months ago
> Edge, ... display:contents appears to have no effect.

Oh right, I forgot - they don't support it, LOL.
(Assignee)

Comment 2

5 months ago
Safari also has '-webkit-appearance:meter' on <meter>.
It renders the test somewhat like Firefox - not rendering
its contents in particular.  We should probably try to
avoid emulating that part Chrome's behavior if we can
(and file a bug on Chrome instead).
Note that chrome has something similar for <progress> and it's not fun:

  https://bugs.chromium.org/p/chromium/issues/detail?id=853558

I don't know if they have the same bug with <meter>, but it wouldn't surprise me.
(Assignee)

Comment 4

5 months ago
Yeah, technically it's a violation of the HTML spec since they do
support <meter>.   I read the spec text as only applying to UAs
that don't support the <meter> element at all, in which case
the contents will render naturally.
(Assignee)

Comment 6

4 months ago
Keep our old value 'meterbar' as an alias for now, but unship 'meterchunk'
by restricting it to UA/chrome sheets only.
Attachment #9023257 - Flags: review?(jwatt)
Attachment #9023257 - Flags: review?(jwatt) → review+

Comment 7

4 months ago
Pushed by mpalmgren@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/06421db62f78
Add -webkit-appearance:meter and make that the default for <meter> for compatibility with other UAs.  r=jwatt

Comment 8

4 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/06421db62f78
Status: NEW → RESOLVED
Last Resolved: 4 months ago
status-firefox65: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla65

Updated

4 months ago
Keywords: dev-doc-needed
(Assignee)

Updated

4 months ago
Duplicate of this bug: 1481649
Note to MDN writers:

I've added a note to the Fx65 rel notes to cover this:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/65#CSS

As for the docs, this should be a simple matter of adding the value to the appearance reference page and the compat data.

Comment 11

a month ago

Updated the table to add meter support for FF, made it standard, and added comment on meterbar to use meter instead. https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

Keywords: dev-doc-needed → dev-doc-complete
You need to log in before you can comment on or make changes to this bug.