| Summary: | Relative Color Syntax doesn't work with `light-dark()` CSS function | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Roman Czerkies <dev> | ||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | RESOLVED FIXED | ||||||
| Severity: | Major | CC: | akeerthi, dev, heycam, m_dubet, ntim, sam, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari Technology Preview | ||||||
| Hardware: | Mac (Apple Silicon) | ||||||
| OS: | macOS 14 | ||||||
| See Also: |
https://bugs.webkit.org/show_bug.cgi?id=266889 https://bugs.webkit.org/show_bug.cgi?id=262914 https://bugs.webkit.org/show_bug.cgi?id=245970 |
||||||
| Attachments: |
|
||||||
Fixed in this issue: https://bugs.webkit.org/show_bug.cgi?id=245970#c6 |
Created attachment 471355 [details] Bug reproduction with and without `light-dark()` CSS function When Custom Properties is assigned from the `light-dark()` CSS function, the CSS Relative Color Syntax doesn't work. ``` css :root { --background-color-light-dark: light-dark(oklch(65.74% 0.2 34.41), oklch(35.74% 0.2 34.41)); } p { background-color: oklch(from var(--background-color-light-dark) l c h / .5); /* doesn't work */ } ``` Bug reproduced with and without `light-dark()` CSS function in the attachment.