Closed Bug 1031966 Opened 8 years ago Closed 8 years ago

mediaqueries "and(" is failing everywhere but Safari


(Core :: CSS Parsing and Computation, defect)

Not set





(Reporter: karlcow, Unassigned)





(1 file)

Attached file mqtest.html
If I read correctly CSS3 Mediaqueries syntax.

It says:

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

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.

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/**/("):
Closed: 8 years ago
Resolution: --- → INVALID
MQ4 says, in :

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.
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.