1031966 - mediaqueries "and(" is failing everywhere but Safari

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Karl Dubost💡 :karlcow]

Attachment: mqtest.html

If I read correctly CSS3 Mediaqueries syntax. 
http://www.w3.org/TR/css3-mediaqueries/#syntax

It says:

media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*
 ;
media_type

The part: "AND S* expression" means zero or more spaces.

Currently Gecko CSS parser (tested in Firefox 32 to Firefox 29) fails to recognize

"and(" in expression such as 

    @media screen and(max-width:500px){
        p {background-color: pink;}
    }

To note that 
it is working in Safari Version 7.0.4 (9537.76.4) and Safari Mobile.
it fails in Opera 23.0.1522.24 and Firefox.

If someone could test in IE and in Chrome. I attached a test file.

Comment 1

[Cameron McCormack (:heycam)]

The "and(max-width:500px)" in the media query is tokenized to this sequence of tokens:

  FUNCTION "and("
  IDENT "max-width"
  SYMBOL ":"
  DIMENSION "500px"
  SYMBOL ")"

and so it doesn't match the grammar, despite the S*.  I think our behaviour here is correct.

Comment 2

[Cameron McCormack (:heycam)]

By the way, I think the only difference between using S* and S+ between the "AND" and "expression" would be that "and/**/(max-width:500px)" would parse with the former but not with the latter.

Comment 3

[Karl Dubost💡 :karlcow]

Cameron,

interesting. 
I wonder on how many Web sites it is failing. See Bug 962922. I asked them to fix it, but still it would be interesting to know if it's happening more often than expected.
I also wonder if it fails in Chrome Blink.

Comment 4

[Cameron McCormack (:heycam)]

The pink rule in your test case never gets applied when I test in Chromium.

Comment 5

[Cameron McCormack (:heycam)]

Nor in IE 11.

Comment 6

[Karl Dubost💡 :karlcow]

Modifying the title then. Thanks Cameron.

Comment 7

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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

Comment 8

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

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.

Comment 9

[Karl Dubost💡 :karlcow]

Ah cool! Thanks David.
Let's ride the Web Compatibility contacts.
And here the relevant bug in Safari world. 
https://bugs.webkit.org/show_bug.cgi?id=98303

Comment 10

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Filed bug 1031976 on requiring whitespace.

Comment 11

[Karl Dubost💡 :karlcow]

sorry for the FIXED. Changed by mistakes.