Description
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?