1903397 - Incorrect behavior of some combinations of custom properties and CSS-wide keywords

Status: UNCONFIRMED

(Core :: Layout, defect)

Description

[Roman Komarov]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5666.197 Safari/537.36

Steps to reproduce:

I did some tests with the way custom properties (unregistered, and registered as inheritable and non-inheritable) interact with the CSS-wide keywords, and I found a few issues in Safari and Firefox (Chrome rendering everything as I expected).

To reproduce, run the tests from the https://github.com/web-platform-tests/wpt/pull/46814 PR (related wpt-sync: https://bugzilla.mozilla.org/show_bug.cgi?id=1903353) or open https://codepen.io/kizu/pen/rNgpXwL?editors=1100

Actual results:

Here is a list of issues I saw in my testing in Firefox Nightly (5 failing out of 30 cases from the WPT PR):

1. When we pass the revert-layer as the fallback value for a custom property, it does not work (like var(--foo, revert-layer)). There are three similar cases like this.
2. It does not work when we pass initial as the fallback for a registered custom property with inherits: true (instead of using the value defined in initial-value, it uses the inherited value).
3. It does not work when we pass inherit as the fallback for a registered custom property with inherits: false (instead of using the inherited value from the parent, it uses the initial-value).

Expected results:

All tests should pass.

Main spec we are working with is the css-variables one, specifically in places where it defines how custom properties should interact with CSS-wide keywords: https://drafts.csswg.org/css-variables/#ref-for-css-wide-keywords%E2%91%A0 (see also other places in the same spec searching in-page for “css-wide”).

In short, those CSS-wide keywords should work with the custom properties exactly like with regular properties:

The CSS-wide keywords can be used in custom properties, with the same meaning as in any another property.

Note: That is, they’re interpreted at cascaded-value time as normal, and are not preserved as the custom property’s value, and thus are not substituted in by the corresponding variable.

and

If a declaration, once all var() functions are substituted in, contains only a CSS-wide keyword (and possibly whitespace), its value is determined as if that keyword were its specified value all along.

Example 14: While a var() function can’t get a CSS-wide keyword from the custom property itself—​if you tried to specify that, like --foo: initial;, it would just trigger explicit defaulting for the custom property—​it can have a CSS-wide keyword in its fallback

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:boris, could you have a look please?

For more information, please visit BugBot documentation.

Comment 3

[Boris Chiou [:boris]]

This sounds like a duplicate (or dependency) of Bug 1533327 and Bug 1870370.