Various issues around conditions for syntax accepted by @supports

[upsuper]

[This can be tested with alert(CSS.supports(cond));]

There are several issues:

• It rejects !important when the property is a shorthand. e.g. (background: none !important) returns false, but it should return true.
• It incorrectly accepts conditions without parens. There are several cases which it returns true while it should return false:
  • (color: green) and (color: green) or (color: green) - correct form is ((color: green) and (color: green)) or (color: green)
  • not (color: rainbow) and not (color: iridescent) - correct form is (not (color: rainbow)) and (not (color: iridescent))
  • color: green - correct form is (color: green) (This is a Gecko issue)

Spec: https://drafts.csswg.org/css-conditional-3/#at-supports

(Servo also accepts unbalanced brackets inside the condition, which Gecko doesn't accept, but Blink accepts. This is probably a question to the spec.)

[upsuper]

Spec issue has been filed in w3c/csswg-drafts#1016.

[SimonSapin]

• The code in style::supports::Declaration::eval doesn’t make a difference between shorthands and other properties when parsing !important, so I don’t know what’s going on here
• color: green is allowed in CSS.supports, see "wrapped in implied parentheses" in https://drafts.csswg.org/css-conditional-3/#the-css-interface
• To deal with unbalanced brackets style::supports::parse_anything needs to be less permissive and replace consume_all with something that implements https://drafts.csswg.org/css-syntax-3/#typedef-any-value. See my comment on w3c/csswg-drafts#1016 (comment)

[upsuper]

color: green is allowed in CSS.supports, see "wrapped in implied parentheses" in https://drafts.csswg.org/css-conditional-3/#the-css-interface

Probably we should file a bug to Gecko. Could you do that?

[SimonSapin]

https://bugzilla.mozilla.org/show_bug.cgi?id=1338486

[Manishearth]

#17173 fixes the !important thing

[upsuper]

This isn't completely fixed. The unbalanced cases are still failing in test_css_supports.html. Specifically, Gecko returns false for not ({ something @with (unbalanced brackets }) and (color: green) or an-extension(that is [unbalanced) while stylo returns true.

This is related to w3c/csswg-drafts#1016, but per @SimonSapin's comment there, we probably should follow Gecko's behavior on this.