Skip to content

[css-variables] Substitution of invalid variables into other variables #4075

Closed
@andruud

Description

@andruud

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value, as explained above, or if it uses a valid custom property, but the property value, after substituting its var() functions, is invalid. When this happens, the computed value of the property is 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.

I have found nothing in the spec that says the above does not apply to custom property declarations themselves. If I'm not mistaken, this means that the following:

<style>
  #outer { --y:foo; }
  #inner { --y:var(--x); }
</style>
<div id="outer">
   <div id="inner"></div>
</div>

... will for #inner produce a computed value foo for --y. This is because --y is an inherited property, and per the spec text above the value is treated as unset.

Chrome and FF currently treat --y as the 'invalid at computed-value time'-value, and we have WPT that verify this seemingly incompliant behavior.

Is my interpretation of the spec correct? If yes, do we change the spec or fix WPT?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions