Bug 98303

Summary: Parsing of media queries: 'all and(color)' should be invalid
Product: WebKit Reporter: Simon Sapin <simon-webkit>
Component: CSSAssignee: Nobody <webkit-unassigned>
Severity: Normal CC: bfulgham, karl+webkit, simon-webkit
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Unspecified   
OS: Unspecified   
URL: http://dabblet.com/gist/3829879
Description Flags
Require some whitespace after 'and' in a media query. none

Description Simon Sapin 2012-10-03 14:36:16 PDT
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.


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.
Comment 1 Simon Sapin 2012-10-03 14:43:01 PDT
If the User-Agent string is to be trusted, my Chromium build uses WebKit 537.4.
Comment 2 Simon Sapin 2012-10-03 14:55:06 PDT
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.
Comment 3 Simon Sapin 2012-10-03 15:59:18 PDT
The patch is wrong, white space is not actually required. This is valid: "all and/*wooo!*/(color)".
Comment 4 karl 2014-06-29 19:28:24 PDT
David Baron in 

> 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).
Comment 5 karl 2014-06-29 19:43:51 PDT
Related to this bug https://bugs.webkit.org/show_bug.cgi?id=45017
Comment 6 Brent Fulgham 2022-07-13 11:10:14 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.