Bug 276223 - The `initial-value` descriptor when registering Custom Properties can be optional
Summary: The `initial-value` descriptor when registering Custom Properties can be opti...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: BrowserCompat, InRadar
Depends on:
Blocks:
 
Reported: 2024-07-04 04:28 PDT by Bramus
Modified: 2024-07-08 20:39 PDT (History)
4 users (show)

See Also:


Attachments
rendering in safari, firefox, chrome (2.68 MB, image/png)
2024-07-07 23:40 PDT, Karl Dubost
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Bramus 2024-07-04 04:28:19 PDT
# Demo

The following page uses a CSS Space Toggle to color the page green or red. It should color the page green when the engine used has `@property` support and red when the engine used does not support `@property`.

URL: https://codepen.io/bramus/pen/bGjQVEm

Code:

```css
@property --registered {
  syntax: '*';
  initial-value: ;
  inherits: false;
}

body {
  --bg-when-supported: var(--registered) green;
  --bg-when-not-supported: var(--registered, red);
  background: var(--bg-when-supported, var(--bg-when-not-supported));
}
```

# Results

Actual Result: The page colors red in Safari
Expected Result: The page colors green in Safari
Other browsers: The page colors green in Chrome 119+ [^1] and Firefox Nightly.

# The problem

WebKit seems to ignore this part of the spec [^2]

> If the value of the syntax descriptor is the universal syntax definition, then the initial-value descriptor is optional. If omitted, the initial value of the property is the guaranteed-invalid value.

[^1]: This commit enabled that: https://chromium-review.googlesource.com/c/chromium/src/+/4890262
[^2]: https://drafts.css-houdini.org/css-properties-values-api/#initial-value-descriptor
Comment 1 Karl Dubost 2024-07-07 23:40:44 PDT
Created attachment 471833 [details]
rendering in safari, firefox, chrome
Comment 2 Radar WebKit Bug Importer 2024-07-07 23:41:13 PDT
<rdar://problem/131288198>
Comment 3 Karl Dubost 2024-07-07 23:42:01 PDT
tested in 
Safari Technology Preview  198          20619.1.20.7
Firefox Nightly            129.0a1       12924.7.4
Google Chrome Canary       128.0.6582.0  6582.0