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

On Thu, Jul 16, 2015 at 6:33 AM, Simon Sapin <simon.sapin@exyr.org> wrote:
> 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.

I just talked with Levi, our implementor, and he said that we match
FF's behavior here, and will throw out #2 as invalid at parse time.
So I'll just update the spec to match.

~TJ

Received on Thursday, 16 July 2015 18:36:14 UTC