[csswg-drafts] [css-color-4] [css-color-5] Mixing with `transparent` seems broken in implementations (#8612)

romainmenke has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-4] [css-color-5] Mixing with `transparent` seems broken in implementations ==
https://drafts.csswg.org/css-color-4/#interpolation-alpha

https://drafts.csswg.org/css-color-5/#color-mix-with-alpha

> This example is 25% semi-opaque red and 75% semi-opaque green. mixed in sRGB. Both the correct (premultiplied) and incorrect (non-premultiplied) workings are shown.
> color-mix(in srgb, rgb(100% 0% 0% / 0.7) 25%, rgb(0% 100% 0% / 0.2));
> The calcuation is as follows:
> 
>  rgb(100% 0% 0% / 0.7) when premultiplied, is [0.7, 0, 0]
> 
>  rgb(0% 100% 0% / 0.2) when premultiplied, is [0, 0.2, 0]
> 
> the premultiplied, interpolated result is [0.7 * 0.25 + 0 * (1 - 0.25), 0 * 0.25 + 0.2 * (1 - 0.25), 0 * 0.25 + 0 * (1 - 0.25)] which is [0.175, 0.150, 0]
> 
> the interpolated alpha is 0.7 * 0.25 + 0.2 * (1 - 0.25) = 0.325
> 
> the un-premultiplied result is [0.175 / 0.325, 0.150 / 0.325, 0 / 0.325] which is [0.53846, 0.46154, 0]
> 
> so the mixed color is  color(srgb 0.53846 0.46154 0 / 0.325)

As best as I can work out this algorithm will always cause any mix with `transparent` to be the other color but with a different alpha value.

It should be impossible to get a color change from mixing with `transparent`.

Yet in browsers you can get very large hue shifts by mixing with `transparent`.

https://codepen.io/romainmenke/pen/zYJLRQJ

<img width="512" alt="Screenshot 2023-03-18 at 22 52 53" src="https://user-images.githubusercontent.com/11521496/226142261-22551715-e0f3-4234-a826-73ed6b8835da.png">

------

If I am reading all relevant bits correctly the steps should be :
- premultiply with own alpha
- interpolate
- un premultiply with interpolated alpha

Unless `transparent` isn't zero in all components in all colorspaces we always interpolate with `[0 0 0]`

The ratio between the two colors is the inverse of the value used when un premultiplying.
So you always end up with the non `transparent` input color.

_This might also be the result of implementations not handling powerless/missing components correctly : https://github.com/w3c/csswg-drafts/issues/8609_

---------

Questions :

- is this likely the same problem as I reported in the other issue but with `transparent` instead of `white`?
- is `transparent` always `0` or `none` for all components in all color spaces?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8612 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 18 March 2023 22:05:18 UTC