Bug 243247 – Assign "guaranteed-invalid value (initial)" to css variable from another variable does not work

• Status: NEW
• Component: CSS

[Leif Marcus]

Created attachment 461241 [details]
Example of the implementation

In order to implement the so called "Space Toggle" approach, you might create a "--ON: initial;" and a "--OFF: ;" variable inside the ":root" element, in order to reuse it globally.

When assigning this value to another variable "--switch-prop: var(--ON)" it will not get the initial value. This works for all other modern browsers, but not in the latest Safari (v15.5).

This implementation of the "guaranteed invalid value" is described here: https://www.w3.org/TR/css-variables-1/#guaranteed-invalid.
These approach of using this kind of implementations is mentioned in this video: Lea Verou | CSS Variable Secrets | CSS Day 2022 (https://www.youtube.com/watch?v=ZuZizqDF4q8)

The expected behavior would be that the "--switch-prop" will be set to initial, if the var "--ON" is assigned.

[Leif Marcus]

It will actually work, if "--switch-prop: initial" will work as expected.

[Radar WebKit Bug Importer]

<rdar://problem/98042784>