[css-conditional-5][css-color] Define `style()` color comparison in more precise terms

[LeaVerou]

https://drafts.csswg.org/css-conditional-5/#container-rule

Unless I missed it, the way values are expected to match in style() queries is largely left undefined, with some non-normative prose around matching computed values. As a result, implementations vary dramatically in how they handle this, which is particularly noticeable in color values.

Here are some tests that compare certain color values to black: https://codepen.io/leaverou/pen/WbwMOOW?editors=1100

Blink:

WebKit:

(Gecko shows all red, @emilio might know why — yes the about:config option is on)

But even where they agree, the results are nonsensical. From an author perspective all of these should be green, because they are all exactly the same color! The only one that could plausibly not match is rgb(-10 0 0) and that matches in both impls. The reasons they don't match are largely spec/implementation details and should not be leaking into usage like this.

I suspect we can still fix this as style() is only now rolling out in Gecko, and authors are hesitant to use it until it does. Chrome’s use counter shows 0.4% for style queries but only a small subset of those are going to be registered colors. Time is of the essence though.

I propose we define a rule similar to interpolation in which we first convert colors to the same color space and compare component-wise following powerless component rules too.

cc @svgeesus @tabatkins

[SebastianZ]

(Gecko shows all red, @emilio might know why — yes the about:config option is on)

The current implementation is incomplete, see https://bugzil.la/1945342.

Sebastian