Bug 98303 – Parsing of media queries: 'all and(color)' should be invalid

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Simon Sapin]

Example 20 of the Media Queries gives this invalid media query:

   @media all and(color) { … }

The lack of space in 'and(' makes it tokenize as a FUNCTION, and thus the query should parse as invalid.

http://www.w3.org/TR/css3-mediaqueries/#error-handling

A test case:

    /* The body should not be red */
    @media all and(color) { body { background: red } }

Or see it in action: http://dabblet.com/gist/3829879

I have this bug in Chromium 22 on Archlinux x86_64, but smfr just confirmed on IRC that it had been fixed in Safari 6.0.1 but regressed in the current trunk.

[Simon Sapin]

If the User-Agent string is to be trusted, my Chromium build uses WebKit 537.4.

[Simon Sapin]

Created attachment 166964 [details]
Require some whitespace after 'and' in a media query.

Sorry, untested patch. (I have yet to manage a build.) Other files might need to be changed, but this looks like the right area of the code.

[Simon Sapin]

The patch is wrong, white space is not actually required. This is valid: "all and/*wooo!*/(color)".
http://lists.w3.org/Archives/Public/www-style/2012Oct/0099.html

[karl]

David Baron in 
https://bugzilla.mozilla.org/show_bug.cgi?id=1031966#c7

> The CSSWG has had multiple extensive discussions 
> of this issue; in the last one we actually resolved 
> to require the whitespace (i.e., disallow "and/**/("):
> 
> http://lists.w3.org/Archives/Public/www-style/2013Jul/0082.html

And in 

> MQ4 says, in http://dev.w3.org/csswg/mediaqueries/#mq-syntax :
> 
> Whitespace must be present between a ')' character and 
> a not, and, or or keyword, and between a not, and, or 
> or keyword and a '(' character.

The parsing of "and(" fails in Opera (blink), IE11, Chrome, and Firefox.
Safari (to the best of my knowledge is the only one to parse it).

[karl]

Related to this bug https://bugs.webkit.org/show_bug.cgi?id=45017

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.