Bug 200842 – Support for "not" in media queries

• Component: CSS
• Status: RESOLVED FIXED

[Dean Jackson]

Created attachment 376565 [details]
test case

We don't support the "not" operator in some parts of media queries. e.g.

@media not (max-device-width: 10px) { .box { background-color: blue; } }

That should evaluate to true on all devices which are wider than 10px.

Test case attached.

[Radar WebKit Bug Importer]

<rdar://problem/54412886>

[Dean Jackson]

I think we only support "not keyword" e.g. "not screen", but do not support "not" before arbitrary expressions.

[Dean Jackson]

Yes. Looks like MediaQueryParser::readMediaType looks for MediaQuery::Not via string. I don't see any calls to MediaQueryParser::readMediaNot.

We do support "not" in @supports CSSSupportsParser::consumeNegation

[Dean Jackson]

https://drafts.csswg.org/mediaqueries-4/#mq-not

The way I read this suggests that a "not" keyword requires a media type and media condition. So this might be correct behaviour.

[Dean Jackson]

But, the syntax disagrees with this:

<media-query> = <media-condition>
             | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
<media-type> = <ident>

<media-condition> = <media-not> | <media-in-parens> [ <media-and>* | <media-or>* ]
<media-condition-without-or> = <media-not> | <media-in-parens> <media-and>*
<media-not> = not <media-in-parens>
<media-and> = and <media-in-parens>
<media-or> = or <media-in-parens>
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> <mf-comparison> <mf-value>
           | <mf-value> <mf-comparison> <mf-name>
           | <mf-value> <mf-lt> <mf-name> <mf-lt> <mf-value>
           | <mf-value> <mf-gt> <mf-name> <mf-gt> <mf-value>
<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>
<mf-lt> = '<' '='?
<mf-gt> = '>' '='?
<mf-eq> = '='
<mf-comparison> = <mf-lt> | <mf-gt> | <mf-eq>

<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )
The <media-type> production does not include the keywords only, not, and, and or.

[Ahmad Saleem]

I am able to reproduce this bug in Safari 15.6.1 and Safari Technology Preview 151 using attached test case and it shows "Black" rectangle. While all other browsers (Chrome Canary 106 and Firefox Nightly 105) show "Blue" rectangle. Just wanted to share updated testing results. Thanks!

[Tim Nguyen (:ntim)]

Fixed by MQ4 support.