[css-syntax] value grammar, <value> type and browser implementations

Hi all,

 

I noticed [css-syntax] was being discussed at Tuscon F2F. While you're at it, I propose to rationalize the <value> syntax. Right now, browsers don't seem to get it right, and even independent parsers like JSCSSP seems to diverge from the actual spec in this regard.

 

While the CSSWG revises the syntax, it's maybe a good time to rationalize all this in something simpler. My concern is that Webkit and Trident (the only browser having partial implementation of custom properties) don't seem to accept all valid <value> as a valid value for CSS Custom Properties. 

 

============

TEST CASE

============

 

Beside the tricky "t5" test, all other property values are (I believe) valid instances of <value> as defined in CSS 2.1.

    .t0 {

        content: media;

        my-content: media;

        -webkit-var-content: media;

        clip: rect(0,0,0,0);

    }

    .t1 {

        content: { a:a; b:b; };

        my-content: { a:a; b:b; };

        -webkit-var-content: { a:a; b:b; };

        clip: rect(0,0,0,0);

    }

    .t2 {

        content: @media;

        my-content: @media;

        -webkit-var-content: @media;

        clip: rect(0,0,0,0);

    }

    .t3 {

        content: @media { a:a; b:b; };

        my-content: @media { a:a; b:b; };

        -webkit-var-content: @media { a:a; b:b; };

        clip: rect(0,0,0,0);

    }

    .t4 {

        content: @media { a{} };

        my-content: @media { a{} };

        -webkit-var-content: @media { a{} };

        clip: rect(0,0,0,0);

    }

    .t5 {

        content: f(a));

        my-content: f(a));

        -webkit-var-content: f(a));

        clip: rect(0,0,0,0);

    }

 

============

RESULTS

============

 

All browsers are able to recognize the "clip" declarations, to invalidate the 'content' declaration.

IE and Chrome both do recognize the ".t0 { -webkit-var-content }" declaration.

In addition, IE does recognize the ".t0 { my-content }" declaration.

 

Neither IE nor Chrome does accept the other valid values like @media or {a:a}.

 

JSCSSP does recognize all declarations including the faulty 't5' ones, but I believe it just goes through a kind of error recovery mode in about every case, and is just re-emitting the tokens previously seen.

 

=============

PROPOSAL

=============

 

I propose to use a behavior close the JSCSSP one for the next iteration of [css-syntax].

 

any: 

    [ 

        IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING

        | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES

        | FUNCTION S* any* ')' | DASHMATCH 

    ] S*; // removed blocks from any

 

arg-value: 

    [

        value 

        | unused S* // not a syntax error, we just accept anything

        | ';' S* 

    ]*

 

value: 

    [ 

        any 

        | '[' arg-value ']' 

        | '{' arg-value '}' 

        | '(' arg-value ')' 

        | unused S* // a syntax error (error-handling, declaration will be dropped)

    ]+

 

unused:

    [

         (all tokens except ')', ']', '}', ';' and tokes included in S)

         | ')' | ']' // a syntax error (error-handling, declaration will be dropped)

    ]

 

 

 

 

This is much simpler that the current syntax which allows     x: {a:a}     but not    x: {a}     or     x: {"a":"a"}.

 

Any reaction about that?

François