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

_I assigned some values to the steps to make sure I am not getting lost somewhere._

-----

For `color-mix(in hsl, transparent, hsl(30deg 30% 40%))`

- `transparent` is `rgb(0 0 0 / 0)` 
- `hsl(30deg 30% 40%)` is already in `hsl`

1. check, for both colors, if each component has an analogous component in the destination color space

`rgb(0 0 0 / 0)` -> no analogous components

---------

2. convert both colors to destination color space

`rgb(0 0 0 / 0)` -> `hsl(0deg 0 0 / 0)`

---------

3. set the analogous component to missing in the output colors

no analogous components -> `hsl(0deg 0 0 / 0)`

---------

4. fill in missing components with components from the other color

no missing components -> nothing is filled in

---------

5. convert powerless components to missing components

`lightness` is `0` -> `hsl(none none 0 / 0)` [^1]

---------

6. premultiply with alpha

-> `hsl(none none 0 / 0)`

---------

7. linear interpolation between the two colors

- `hsl(30deg 30% 40%)`
- `hsl(none none 0%)`

In my implementation this becomes : `hsl(30deg 30% 20%)`
But this is most likely an implementation bug.

I expect `none` to be resolved at this point because `fill in missing components with components from the other color` is usually done later.

My interpolation function :

```js
function interpolate(start: number, end: number, p: number): number {
 if (Number.isNaN(start)) {
  return end;
 }

 if (Number.isNaN(end)) {
  return start;
 }

 return (start * p) + end * (1 - p);
}
```

---------

8. un-premultiply

- `hsl(30deg 60% 40%)`

---------

With the interpolated alpha the outcome is `hsl(30deg 60% 40% / 0.5)`, which is a totally different color.


[^1]: the specification was rewritten to change which components become powerless, but there was no resolution or agreement on that, so I am ignoring that change in this example.

-- 
GitHub Notification of comment by romainmenke
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8612#issuecomment-1577042345 using your GitHub account


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

Received on Monday, 5 June 2023 15:42:57 UTC