Bug 288070 – Safari- Relative Colors + Keywords

• Status: NEW
• Component: New Bugs

I am using Live Server/VS Code on macOs Sonoma Version 14.6.1 (23G93), Safari 17.6. 

In my stylesheet, I am also using @layers which may or may not be relevant. 

I assigned these relevant styles: 

```css
@layer reset, elements, base, project-styles, scroll-styles;
@layer reset {
:root {
    --clr-bg-body: canvas;
    --clr-bg-card: oklch(from var(--clr-bg-body) calc(l - 0.02) c h / 1);
}
html {color-scheme: dark;}
.card { background-color: var(--clr-bg-card); }
}
``` 
Seems to work in chrome fine but in Safari, I always get the computed value for background color as `rgb( 0, 0, 0 , 0)`; 
I checked support:
```css
@supports (color: rgb(from red r g b) ) {
:root {
--clr-bg-card: hotpink;
}
} ```

This passed. I then tried color-mix
```css
:root {
--clr-bg-card: color-mix(in oklch, canvas, black 20%);
--clr-bg-card: color-mix(in oklch, var(--clr-bg-body), black 20%);
} ```

Both passed and color-mix worked with the keywords; 

No matter what color space I use (rgb, hsl, oklch) , and no matter whether i refer to custom properties (e.g. `--clr-bg-body`) or just use the `canvas` or `canvasText` or `currentColor` keywords, my computed value of this color is transparent, or more specifically `rgba(0,0,0,0)`.  NOTE: I also removed all the @layer styles to check if they were interfering - same results.

[Alexey Proskuryakov]

Thank you for the report! Could you please attach a full reproducible case, is that one could simply click to verify if the issue is already fixed, without re-creating it from description? Safari 17.6 is quite old at this point.

[Radar WebKit Bug Importer]

<rdar://problem/145720683>

(In reply to Alexey Proskuryakov from comment #1)
> Thank you for the report! Could you please attach a full reproducible case,
> is that one could simply click to verify if the issue is already fixed,
> without re-creating it from description? Safari 17.6 is quite old at this
> point.

Thank you for your attention to this matter.
Should I attach html/css files in a GH repo or will a [codepen suffice](https://codepen.io/Miss-Fox/pen/dPyOVEz?editors=1100)? 
I dont use safari often except for testing and this is the version I have

[Alexey Proskuryakov]

In both Chrome and latest Safari, the card background is darker than the canvas. Although the shades of gray are not the same in these browsers.

Does this mean that this issue has been already fixed?