light-dark() doesn’t work with Relative Colors (particularly when referenced as a CSS variable)
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: andrey, Unassigned, NeedInfo)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:128.0) Gecko/20100101 Firefox/128.0
Steps to reproduce:
This CSS don’t work but should work (at least it works in Safari Preview).
.broken {
--dynamic-bg: light-dark(oklch(70% 0 0), oklch(30% 0 0));
background: oklch(from var(--dynamic-bg) l 0.05 160); /* browsers ignore it */
}
Reproduction:
Actual results:
2 blocks
Expected results:
3 blocks
|
||
Comment 1•3 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•3 months ago
|
||
Hmm, it sort-of works if I manually expand the CSS variable -- e.g. if I edit your codepen to replace
var(--dynamic-bg)
...with:
light-dark(oklch(70% 0 0), oklch(30% 0 0))
...then the top rect shows up at least. But it's gray, so I'm not sure it's actually working. (I see it being a greenish color in Safari Tech Preview)
Here's a codepen with that edit, though, for what it's worth:
https://codepen.io/dholbert/pen/ZEdQYoz
Tiaan, could you take a look when you get a chance?
|
|
||
Comment 3•3 months ago
•
|
||
Aha, this is related to bug 1899295 it looks like. That bug is about from light-dark(... at least.
Marking this as depending-on that one, rather than a duplicate, since it's not clear to me whether this is entirely the same vs. if the behavior with the CSS-variable-expansion is another distinct layer of brokenness per comment 2.
Description
•