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

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