Bug 243247 - Assign "guaranteed-invalid value (initial)" to css variable from another variable does not work
Summary: Assign "guaranteed-invalid value (initial)" to css variable from another vari...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 15
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-07-27 04:34 PDT by Leif Marcus
Modified: 2022-08-03 04:35 PDT (History)
4 users (show)

See Also:

Attachments
Example of the implementation (97.00 KB, image/png)
2022-07-27 04:34 PDT, Leif Marcus 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Leif Marcus 2022-07-27 04:34:14 PDT 
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.
Comment 1 Leif Marcus 2022-07-27 04:47:57 PDT 
It will actually work, if "--switch-prop: initial" will work as expected.
Comment 2 Radar WebKit Bug Importer 2022-08-03 04:35:16 PDT 
<rdar://problem/98042784>