Specify primitive appearance for <meter>

[domenic]

What is the issue with the HTML Standard?

This issue is the HTML-side counterpart of https://github.com/w3c/csswg-drafts/issues/356.

After https://groups.google.com/a/chromium.org/g/blink-dev/c/UquTxWTNON0, all browsers seem to have specified an appearance for <meter> when appearance: none is specified on it. That appearance seems to be some combination of:

meter {
    appearance: auto;
    box-sizing: border-box;
    display: inline-block;
    block-size: 1em;
    inline-size: 5em;
    vertical-align: -0.2em;
}

plus some stuff that is not in the UA stylesheet to style the inner parts of the meter in specific colors as linear gradients. (Which, at least eyeballing them, seem to be the same colors across all browsers.)

In Firefox I cannot find evidence of this being in the UA stylesheet, but instead these properties seem to show up as applied to <meter> in some other way.

---

The HTML spec currently says:

meter { appearance: auto; }

The meter element is a devolvable widget. Its expected native appearance is to render as an 'inline-block' box with a 'block-size' of '1em' and a 'inline-size' of '5em', a 'vertical-align' of '-0.2em', and with its contents depicting a gauge.

[...]

Need to detail the expected primitive appearance.

which covers some of the above but not all. Note the "native appearance": this supposedly only applies for the appearance: auto case, not the appearance: none case. And it uses "expected to render" wording, seems closer to Firefox's behavior than to Safari/Chrome; the latter use the actual UA stylesheet.

I think an appropriate set of changes here would be:

• Expand the UA stylesheet to cover the above CSS snippet, removing that information from being "native appearance" specific.
• Detail the primitive appearance by giving a specification for how to render the inner parts of the meter. This could be quite detailed, e.g. specific linear gradients and colors.
• Detail the native appearance more vaguely, essentially "with its contents depicting a gauge". (Although maybe we need to say something about how the contents are depicted if various UA styles are overridden? E.g. if inline-size/block-size are changed, presumably the meter should stretch.)

I'm unsure if this fits the exact intent of how the CSS UI spec intends to integrate with HTML, but I think it's right.

/cc @tcaptan-cr @zcorpan @dizhang168 @frivoal @tabatkins

[tcaptan-cr]

In Firefox I cannot find evidence of this being in the UA stylesheet, but instead these properties seem to show up as applied to in some other way.

Firefox seems to define some of these (like the vertical-align and the fallback gradients) in forms.css

[zcorpan]

The suggested changes make sense to me and seems in line with what CSS UI expects.

Last I checked there was no standardized pseudo-element for meter. That seems necessary to specify the primitive appearance (and allow authors to change the style without relying on vendor-prefixed pseudos).

[annevk]

cc @nt1m @pxlcoder @whatwg/css