Bug 273996 - Relative Color Syntax doesn't work with `light-dark()` CSS function
Summary: Relative Color Syntax doesn't work with `light-dark()` CSS function
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 14
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2024-05-10 02:57 PDT by Roman Czerkies
Modified: 2024-08-06 09:07 PDT (History)
7 users (show)

See Also:


Attachments
Bug reproduction with and without `light-dark()` CSS function (1.66 KB, text/html)
2024-05-10 02:57 PDT, Roman Czerkies
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Czerkies 2024-05-10 02:57:10 PDT
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.
Comment 1 Radar WebKit Bug Importer 2024-05-17 02:58:21 PDT
<rdar://problem/128260951>
Comment 2 Roman Czerkies 2024-08-06 09:07:10 PDT
Fixed in this issue: https://bugs.webkit.org/show_bug.cgi?id=245970#c6