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

[css-variables] Behavior of `--foo: var(invalid var function)`

From: Simon Sapin <simon.sapin@exyr.org>
Date: Thu, 16 Jul 2015 15:33:24 +0200
To: www-style list <www-style@w3.org>
Cc: Cameron McCormack <cam@mcc.id.au>
Message-ID: <55A7B2A4.8030000@exyr.org>
What should happen when a custom property declaration contains a var() 
function that is not syntactically valid? Consider this test case:

body {
   /* #1 */ --foo: blue;
   /* #2 */ --foo: var(invalid var function);
   /* #3 */ color: red;
   /* #4 */ color: var(--foo);
}

The grammar for custom property values is <declaration-value> which #2 
matches. So my reading of the spec is that declaration #2 is valid and 
used instead of #1. It’s only when var(--foo) is substituted in #4 that 
#4 becomes invalid at computed-value time, and 'color' is inherited.

In Firefox however, #2 is invalid at parse time and #1 is used instead. 
'color' is blue.

http://dabblet.com/gist/1e54403c53ce06dc840c

In the definition of var(), the spec says:

http://dev.w3.org/csswg/css-variables/#using-variables
> If a property contains one or more var() functions, and those
> functions are syntactically valid, the entire property’s grammar must
> be assumed to be valid at parse time. It is only syntax-checked at
> computed-value time, after var() functions have been substituted.

But it doesn’t say what to do with var() functions that are *not* valid 
but still match the property’s value grammar.

I think that Firefox’s behavior is slightly more useful, and Tab said 
he’s willing to align the spec with it.


-- 
Simon Sapin
Received on Thursday, 16 July 2015 13:34:04 UTC

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