[@container] Accept !important in style() queries

Change the implementation to accept !important in style feature
declarations. This is in line with the current spec draft, and also what
the current discussion in the spec issue[1] is leaning towards.

[1] w3c/csswg-drafts#7413

Bug: 1357573, 1302630
Change-Id: Ib08fbb01943f425aebae574f082d446161c5a544
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3883945
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1045038}

third_party/blink/renderer/core/css/media_query_exp.cc

@@ -324,9 +324,7 @@ absl::optional<MediaQueryExpValue> MediaQueryExpValue::Consume(
 
   if (CSSVariableParser::IsValidVariableName(media_feature)) {
     CSSTokenizedValue tokenized_value{range};
-    if (CSSParserImpl::RemoveImportantAnnotationIfPresent(tokenized_value)) {
-      return absl::nullopt;
-    }
+    CSSParserImpl::RemoveImportantAnnotationIfPresent(tokenized_value);
     if (const CSSValue* value = CSSVariableParser::ParseDeclarationValue(
             tokenized_value, false, context)) {
       while (!range.AtEnd())

third_party/blink/web_tests/external/wpt/css/css-contain/container-queries/at-container-parsing.html

@@ -194,9 +194,9 @@
   test_condition_known('style((--foo: bar) or (--bar: 10px))');
   test_condition_known('style(--my-prop:)');
   test_condition_known('style(--my-prop: )');
+  test_condition_known('style(--foo: bar !important)');
 
   test_condition_unknown('style(--foo: bar;)');
   test_condition_unknown('style(--foo)');
   test_condition_unknown('style(style(--foo: bar))');
-  test_condition_unknown('style(--foo: bar !important)');
 </script>

third_party/blink/web_tests/external/wpt/css/css-contain/container-queries/custom-property-style-queries.html

@@ -101,11 +101,8 @@
   #important {
     --foo: bar;
   }
-  @container style(--foo: bar) {
-    #important-child { color: green; }
-  }
   @container style(--foo: bar !important) {
-    #important-child { color: red; }
+    #important-child { color: green; }
   }
 </style>
 <div id="important">