W3C home > Mailing lists > Public > www-style@w3.org > July 2015

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

From: Simon Sapin <simon.sapin@exyr.org>
Date: Thu, 23 Jul 2015 17:09:47 +0200
To: www-style <www-style@w3.org>
Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Cameron McCormack <cam@mcc.id.au>
Message-ID: <55B103BB.4040303@exyr.org>
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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:18 UTC