[csswg-drafts] [css-properties-values-api] Are fallbacks provided for registered properties validated by the CP syntax? (#10455)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-properties-values-api] Are fallbacks provided for registered properties validated by the CP syntax? ==
Take a look at this codepen, which is surprisingly interoperable across UAs: https://codepen.io/leaverou/pen/oNRpEGO



`--color` is defined as:

```css
@property --color {
 syntax: "lime | yellowgreen";
 initial-value: yellowgreen;
 inherits: false;
}
```

| Actual | Expected |
|--------|--------|
| <img width="574" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/3efe4fa0-00b4-4956-9385-e4aa42acc821"> | <img width="497" alt="image" src="https://github.com/w3c/csswg-drafts/assets/175836/68d4d378-28f8-437f-9f7b-8bc8cb27a489">

Given that…
1. Registered properties become IACVT when they are given a value that does not parse with their defined syntax, 
2. IACVT properties behave as if their value is `unset` and properties that do not inherit handle `unset` as `intiial` 
3. `--color`’s initial value is `yellowgreen`
4. `--color` is defined to not inherit

…I would have expected `yellowgreen`, not `transparent`. It is especially weird that this only happens when a fallback value is provided that does *not* match the property syntax.

Given the behavior is interoperable, @kizu assumed there must be a WPT test about this, but could not find a test that would test this interaction. The only place he found that tests the fallback not applying when the variable uses its fallback value is here: https://github.com/web-platform-tests/wpt/blob/master/css/css-pseudo/highlight-cascade/highlight-cascade-003.html#L8-L14
But there is no test (or we can't find it) that covers this weird behavior.

I guess, if anything describes what should happen, then it is https://drafts.csswg.org/css-variables/#invalid-variables

> Either the property’s inherited value or its initial value depending on whether the property is inherited or not, respectively, as if the property’s value had been specified as the unset keyword.

However, that is not what is happening in the second test. Changing whether the property inherits and setting `--color: lime` on the parent does not change the outcome of the second test, only the others: https://codepen.io/leaverou/pen/oNRpEGO

It should be clarified in the specs whether the value of the fallback used in the `var()` should also be validated by the custom property syntax or treated as an unregistered token stream that is validated at the point of usage (I would vote for the latter, but no strong opinion) and what the behavior is in that case.

Also tagging as Agenda+ since `@property` usage is going to pick up soon now that Firefox has implemented, and authors are soon going to start hitting this.

_Thanks to @kizu for his help in tracking this down_

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10455 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 17 June 2024 14:29:56 UTC