New issue
Advanced search Search tips
Note: Color blocks (like █ or █) mean that a user may not be available. Tooltip shows the reason.

Issue 708170 link

Starred by 1 user
Status: WontFix
Owner:
█ nainar@chromium.org
Not on Chrome anymore
Closed: Apr 2017
Cc:
style-bugs@google.com
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

In a the supports_condition of a "@supports" construct, CSS parser requires a whitespace between a closing brace and the following "or"

Reported by eduard.m...@gmail.com, Apr 4 2017 
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36

Example URL:
http://codepen.io/eduard-malakhov/pen/dvrEoN

Steps to reproduce the problem:
1. Create a CSS stylesheet containing a @supports clause with a condition that has no whitespace between the closing brace and the following "or" operator, e.g. "@supports (color: red)or (color: green) {}".
2. Apply this stylesheet on a webpage.

What is the expected behavior?
The "@supports" construct is parsed correctly, its condition evaluates to true and the style that it encloses is applied.

What went wrong?
The style is not applied.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? No
 Firefox 50.1.0

Chrome version: 56.0.2924.87  Channel: stable
OS Version: 10.0
Flash Version: 

As far a I see, https://www.w3.org/TR/css3-conditional/#grammar contains not notice regarding a whitespace separator that is required in the described case.

The issue was found during development when a minified stylesheet was rendered differently from the original one.

A similar issue has also been reported here: https://github.com/css/csso/issues/258

The same CSS in Opera is rendered as expected.

Comment 1 by woxxom@gmail.com, Apr 4 2017 

The whitespace around 'or' / 'and' is required according to the specification:
https://www.w3.org/TR/css3-conditional/#at-supports

	supports_disjunction
	  : supports_condition_in_parens ( S+ OR S+ supports_condition_in_parens )+
	  ;

S+ means one or more whitespace characters.

There is also an explicit example of a similarly malformed query:
https://www.w3.org/TR/css3-mediaqueries/#syntax

	The following is an malformed media query because having no space between ‘and’ and the expression is not allowed. (That is reserved for the functional notation syntax.)

	@media all and(color) { … }

Comment 2 by rtoy@chromium.org, Apr 4 2017

Components: -Blink Blink>CSS

Comment 3 by nainar@chromium.org, Apr 4 2017

Owner: nainar@chromium.org
Status: WontFix (was: Unconfirmed)
Looking at the spec stated in Comment 1 can confirm this is a WontFix issue as our implementation works with the spec. I am sorry for any confusion caused to the OP.
►

Sign in to add a comment