Assert computed colors using hex notation

[jsha]

Right now, as far as I can tell, colors have to be asserted like this:

assert-css: ("#impl", {"color": "rgb(197, 197, 197)", "background-color": "rgba(255, 236, 164, 0.06)"})

But if the corresponding CSS specified those colors with hex codes, it's hard to see whether this is correct or not. It should be possible to assert:

assert-css: ("#impl", {"color": "#e1e1e1", "background-color": "#ab20de"})

[MizuhoOkimoto]

Hi, I would like to work on it. My understanding is changing rgba to hex. Is that correct?

[jsha]

Thanks! Close, but not quite.

browse-UI-test presumably calls window.getComputedStyle(..) to figure out styles, including color. When you get the computer color, it shows up as rgba(...), so that's what tests have to compare against.

We'd like tests to be able to assert using either the rgba form or the hex form.

If a test says, for instance, assert-css: ("#impl", {"color": "#e1e1e1"}), you should convert e1e1e1 to rgba form before comparing it to the output of getComputedStyle.

[GuillaumeGomez]

It'd be super nice to have comparison between any kind of color representation (rgb, rgba and hex to start).

@MizuhoOkimoto Don't hesitate to give it a try but it's not an easy thing to do, colors can be in different places depending on the CSS property (background can have more than one color for example). So in any case, window.getCumputedStyle returns a rgba format for colors. You'll need to then convert the color provided by the user into rgba (or the other way around).

[GuillaumeGomez]

Note for myself: this NPM package seems to allow to convert between colors formats: first we need to convert user input to RGBA and then, convert back in case of failure into the original format (which is a bit more tricky apparently). An alternative could this package.

In any case, it'll require writing a small parser for CSS property to extract the colors (should be pretty straightforward). To make this whole easier, the best would be to return the CSS values outside of the browser so we don't have to inject this JS into each webpage.