200842 2019-08-16 16:38:17 -0700 Support for "not" in media queries 2023-02-10 17:53:36 -0800 1 1 1 Unclassified WebKit CSS WebKit Nightly Build Unspecified Unspecified RESOLVED FIXED InRadar P2 Normal --- 1 dino koivisto ahmad.saleem792 ap bfulgham ntim rniwa simon.fraser webkit-bug-importer zalan oldest_to_newest 1562291 0 376565 dino 2019-08-16 16:38:17 -0700 Created attachment 376565 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. 1562292 1 webkit-bug-importer 2019-08-16 16:38:48 -0700 <rdar://problem/54412886> 1562297 2 dino 2019-08-16 16:41:45 -0700 I think we only support "not keyword" e.g. "not screen", but do not support "not" before arbitrary expressions. 1562301 3 dino 2019-08-16 16:46:00 -0700 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 1564859 4 dino 2019-08-24 20:32:48 -0700 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. 1564860 5 dino 2019-08-24 20:37:38 -0700 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. 1892724 6 ahmad.saleem792 2022-08-20 16:11:28 -0700 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! 1932855 7 ntim 2023-02-10 17:53:36 -0800 Fixed by MQ4 support. 376565 2019-08-16 16:38:17 -0700 2019-08-16 16:38:26 -0700 test case media-query-not.html text/html 426 dino PCFET0NUWVBFIGh0bWw+Cjx0aXRsZT5AbWVkaWEgbm90PC90aXRsZT4KPG1ldGEgbmFtZT0idmll d3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCI+Cgo8c3R5bGU+CmJvZHkgewogICAg Zm9udC1mYW1pbHk6IHN5c3RlbS11aTsKfQoKLmJveCB7CiAgICB3aWR0aDogMjAwcHg7CiAgICBo ZWlnaHQ6IDIwMHB4OwogICAgYmFja2dyb3VuZC1jb2xvcjogYmxhY2s7Cn0KCkBtZWRpYSBub3Qg KG1heC1kZXZpY2Utd2lkdGg6IDEwcHgpIHsKICAgIC5ib3ggewogICAgICAgIGJhY2tncm91bmQt Y29sb3I6IGJsdWU7CiAgICB9Cn0KPC9zdHlsZT4KCjxwcmU+QG1lZGlhIG5vdCAobWF4LWRldmlj ZS13aWR0aDogMTBweCkgeyAuYm94IHsgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTsgfSB9PC9wcmU+ Cgo8ZGl2IGNsYXNzPSJib3giPgo8L2Rpdj4K