273996 2024-05-10 02:57:10 -0700 Relative Color Syntax doesn't work with `light-dark()` CSS function 2024-08-06 09:07:10 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview Mac (Apple Silicon) macOS 14 RESOLVED FIXED 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 InRadar P2 Major --- 1 dev webkit-unassigned akeerthi dev heycam m_dubet ntim sam webkit-bug-importer oldest_to_newest 2034504 0 471355 dev 2024-05-10 02:57:10 -0700 Created attachment 471355 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. 2035975 1 webkit-bug-importer 2024-05-17 02:58:21 -0700 <rdar://problem/128260951> 2050921 2 dev 2024-08-06 09:07:10 -0700 Fixed in this issue: https://bugs.webkit.org/show_bug.cgi?id=245970#c6 471355 2024-05-10 02:57:10 -0700 2024-05-10 02:57:10 -0700 Bug reproduction with and without `light-dark()` CSS function css-colors-5.html text/html 1704 dev PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImZyIiBkaXI9ImF1dG8iPgogICAgPGhlYWQ+CiAg ICAgICAgPG1ldGEgY2hhcnNldD0idXRmLTgiPgogICAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0 IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgdmlld3BvcnQt Zml0PWNvdmVyIj4KICAgICAgICA8bWV0YSBuYW1lPSJjb2xvci1zY2hlbWUiIGNvbnRlbnQ9Imxp Z2h0IGRhcmsiPgogICAgICAgIDxtZXRhIG5hbWU9InRoZW1lLWNvbG9yIiBtZWRpYT0iKHByZWZl cnMtY29sb3Itc2NoZW1lOiBsaWdodCkiIGNvbnRlbnQ9ImhzbCgyMDAgMTAlIDk5JSkiPgogICAg ICAgIDxtZXRhIG5hbWU9InRoZW1lLWNvbG9yIiBtZWRpYT0iKHByZWZlcnMtY29sb3Itc2NoZW1l OiBkYXJrKSIgY29udGVudD0iaHNsKDAgMCUgMCUpIj4KICAgICAgICA8dGl0bGU+Q1NTIENvbG9y cyA1PC90aXRsZT4KICAgICAgICA8c3R5bGU+CiAgICAgICAgICAgIDpyb290IHsKICAgICAgICAg ICAgICAgIC0tYmFja2dyb3VuZC1jb2xvcjogb2tsY2goNjUuNzQlIDAuMiAzNC40MSk7CiAgICAg ICAgICAgICAgICAtLWJhY2tncm91bmQtY29sb3ItbGlnaHQtZGFyazogbGlnaHQtZGFyayhva2xj aCg2NS43NCUgMC4yIDM0LjQxKSwgb2tsY2goMzUuNzQlIDAuMiAzNC40MSkpOyAKICAgICAgICAg ICAgfQogICAgICAgICAgICBzZWN0aW9uIHsKICAgICAgICAgICAgICAgIHAgewogICAgICAgICAg ICAgICAgICAgIHBhZGRpbmc6IDFyZW07CiAgICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZC1j b2xvcjogb2tsY2goZnJvbSB2YXIoLS1iYWNrZ3JvdW5kLWNvbG9yLWxpZ2h0LWRhcmspIGwgYyBo IC8gLjUpOwogICAgICAgICAgICAgICAgICAgIHNwYW4gewogICAgICAgICAgICAgICAgICAgICAg ICBmb250LWZhbWlseTogbW9ub3NwYWNlOwogICAgICAgICAgICAgICAgICAgIH0KICAgICAgICAg ICAgICAgICAgICAmOmZpcnN0LWNoaWxkIHsKICAgICAgICAgICAgICAgICAgICAgICAgYmFja2dy b3VuZC1jb2xvcjogb2tsY2goZnJvbSB2YXIoLS1iYWNrZ3JvdW5kLWNvbG9yKSBsIGMgaCAvIC41 KTsKICAgICAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0K ICAgICAgICA8L3N0eWxlPgogICAgPC9oZWFkPgogICAgPGJvZHk+CiAgICAgICAgPG1haW4+CiAg ICAgICAgICAgIDxzZWN0aW9uPgogICAgICAgICAgICAgICAgPHA+PHNwYW4+YGJhY2tncm91bmQt Y29sb3I6IG9rbGNoKGZyb20gdmFyKC0tYmFja2dyb3VuZC1jb2xvcikgbCBjIGggLyAuNSlgPC9z cGFuPiB3b3JrcyB3aGVuIEN1c3RvbSBQcm9wZXJ0eSBpcyBhc3NpZ25lZCB3aXRoIDxzcGFuPmBv a2xjaCgpYDwvc3Bhbj4gQ1NTIGNvbG9yIGZ1bmN0aW9uPC9wPgogICAgICAgICAgICAgICAgPHA+ PHNwYW4+YGJhY2tncm91bmQtY29sb3I6IG9rbGNoKGZyb20gdmFyKC0tYmFja2dyb3VuZC1jb2xv ci1saWdodC1kYXJrKSBsIGMgaCAvIC41KWA8L3NwYW4+IG5vdCBhcHBsaWVkIG9uIFNhZmFyaSBh bmQgY3Jhc2ggb24gQ2hyb21lIHdoZW4gdGhlIEN1c3RvbSBQcm9wZXJ0eSBpcyBhc3NpZ25lZCB3 aXRoIDxzcGFuPmBsaWdodC1kYXJrKClgPC9zcGFuPiBDU1MgZnVuY3Rpb24uPC9wPgogICAgICAg ICAgICA8L3NlY3Rpb24+CiAgICAgICAgPC9tYWluPgogICAgPC9ib2R5Pgo8L2h0bWw+