[css-forms-1] Standardize mechanism for styling <meter> based on value

[lukewarlow]

In CSS Forms we have a shape for the elements of a meter:

<meter>
├─ ::slider-track
 │  └─ ::slider-fill

However, for this to be useful for styling we need some way to style based on how optimal the value of the meter element is.

WebKit (and blink) uses different pseudo elements instead of a single :slider-fill equivalent and their naming is ::-webkit-meter-even-less-good-value, ::-webkit-meter-suboptimum-value and ::-webkit-meter-optimum-value.

Firefox has a single ::-moz-meter-bar pseudo element and instead applies pseudo classes to <meter> these are :-moz-meter-sub-sub-optimum, :-moz-meter-sub-optimum and :-moz-meter-optimum.

Using pseudo classes seems the better approach between the two. I suspect we can drop the meter prefix and just go with something like :sub-sub-optimum, :sub-optimum, :optimum? But naming would need bikeshedding as neither Firefox's nor WebKit's seem great.

[lukewarlow]

Turns out we also need to actually standardise the algorithm for determining how optimal a value is because Firefox and Chromium seem to disagree. See whatwg/html#3520 for details.

[lukewarlow]

Based on discussions in OpenUI and during one of the joint task force calls I think we're in agreement these states should be reflected via pseudo classes rather than pseudo elements (aka Firefox approach not WebKit/Chrome approach). The question then becomes what names to use.

[lukewarlow]

https://drafts.csswg.org/css-forms/#targeting-different-meter-states-the-low-value-high-value-optimal-value-pseudo-classes - I don't think these pseudo-classes in their current form can be used to replicate the existing states of a <meter>.

The algorithms between Firefox and WebKit/Blink are subtely different but I'll try to explain what the algorithm for three possible pseudo classes could look like (based on Firefox):

If optimum < low:
    if value < low:
         match `:optimal-value`
    else if value <= high
         match `:sub-optimal-value`
    else
         match `:sub-sub-optimal-value`
else if optimum > high
    if value > high
         match `:optimal-value`
    else if value >= low
         match `:sub-optimal-value`
    else
         match `:sub-sub-optimal-value`
else
    if value >= low && value <= high
         match `:optimal-value`
    else
         match `:sub-optimal-value`

it's possible that a :low-value and a :high-value pseudo class would also be useful but they wouldn't work for styling as browsers currently do (unless I'm missing some interesting combination of them to achieve what I mention above).

[lukewarlow]

I also worry that :low-value and :high-value might be expected to match inputs who's value is below or above range.

[mfreed7]

FYI, a bit more discussion here: openui/open-ui#1130