Bug 243247

Summary:

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

Product:

WebKit

Reporter:

Leif Marcus <hello>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

koivisto, mmaxfield, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 15

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
Example of the implementation	none

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>