Closed Bug 1031966 Opened 8 years ago Closed 8 years ago

mediaqueries "and(" is failing everywhere but Safari

Categories

(Core :: CSS Parsing and Computation, defect)

x86
macOS
defect
Not set
normal

Tracking

()

RESOLVED INVALID

People

(Reporter: karlcow, Unassigned)

References

()

Details

Attachments

(1 file)

Attached file 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.
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.
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.
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.
The pink rule in your test case never gets applied when I test in Chromium.
Nor in IE 11.
Modifying the title then. Thanks Cameron.
Summary: mediaqueries "and(" is failing in Firefox and Opera(blink) → mediaqueries "and(" is failing everywhere but Safari
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
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → INVALID
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.
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
Resolution: INVALID → FIXED
Filed bug 1031976 on requiring whitespace.
sorry for the FIXED. Changed by mistakes.
Resolution: FIXED → INVALID
You need to log in before you can comment on or make changes to this bug.