#6408

Take <progress> as an example, it has a position property (which is probably more useful than the value one for this CSS func as it handles the maths between value and max to determine actual progress value) between 0 and 1. This is useful for sizing the fill portion of the control, but for that we'd need a way to make it a (percentage) length instead.

progress::fill {
    inline-size: convert(calc(content-value(type(<number>)) * 100), type(<length>), "%");
}

Alternatively if we could pass other types into content-value() and the browser could do the conversion for us that'd also work?

progress::fill {
    inline-size: calc(content-value(type(<length>), "%") * 100);
}

Either of these could also help with styling the color input too (along with #11837 )

The default style could be something like:

input[type=color]::color-swatch {
     background-color: content-value(type(<color>)); /* or convert(content-value(), type(<color>)) */
}