[css-variables] Custom property declaration invalid at computed-value time

https://drafts.csswg.org/css-variables/#invalid-variables

> 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.

If that property happens to be a custom property, this text says that it 
should get its inherited value. (Since all custom properties are inherited.)

Firefox however gives it its initial value.

Test case: http://dabblet.com/gist/1f0d2d5a086181e41887

   html { --a: green; color: red; }
   body { --a: var(--b); color: var(--a); }

--a on body is invalid at computed value time.

Per the spec, it gets its inherited value green and body text is colored 
green.

In Firefox, --a on body seems to get its initial value, which makes 
color on body invalid at computed-value time as well, causing the body 
text to be colored red, the inherited color value.

I found this spec behavior mildly surprising compared to how dependency 
cycles are resolved (all custom properties involved get their initial 
value), but I don’t have a strong preference.

-- 
Simon Sapin

Received on Thursday, 23 July 2015 15:10:27 UTC