Handle at-rules inside declaration lists

Bug: 1372158 Change-Id: Ia9f741b558ead9a172771aa3a719afc4181d5b3c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3938188 Reviewed-by: Steinar H Gunderson <sesse@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1056245}
marcosholgado · Oct 7, 2022 · b9a33d0 · b9a33d0
1 parent 841c326
commit b9a33d0
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 0 deletions.
diff --git a/third_party/blink/renderer/core/css/parser/css_parser_impl.cc b/third_party/blink/renderer/core/css/parser/css_parser_impl.cc
@@ -1382,6 +1382,9 @@ void CSSParserImpl::ConsumeDeclarationList(CSSParserTokenStream& stream,
       case kSemicolonToken:
         stream.UncheckedConsume();
         break;
+      case kAtKeywordToken:
+        ConsumeErroneousAtRule(stream);
+        break;
       case kIdentToken: {
         {
           CSSParserTokenStream::Boundary boundary(stream, kSemicolonToken);

diff --git a/third_party/blink/web_tests/external/wpt/css/css-syntax/at-rule-in-declaration-list.html b/third_party/blink/web_tests/external/wpt/css/css-syntax/at-rule-in-declaration-list.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<title>CSS Syntax Test: handle at-rules in declaration lists</title>
+<link rel="help" href="https://drafts.csswg.org/css-syntax/#consume-list-of-declarations">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style id="test_sheet">
+</style>
+<script>
+  function parseRule(rule_text) {
+    let sheet = test_sheet.sheet;
+    if (sheet.cssRules.length != 0)
+      sheet.deleteRule(0);
+    sheet.insertRule(rule_text);
+    return sheet.cssRules[0];
+  }
+
+  test(() => {
+    let rule = parseRule(`
+      div {
+        @at {}
+        color: green;
+      }
+    `);
+    assert_equals(rule.style.color, "green");
+  }, "Allow @-rule with block inside style rule");
+
+  test(() => {
+    let rule = parseRule(`
+      div {
+        @at at;
+        color: green;
+      }
+    `);
+    assert_equals(rule.style.color, "green");
+  }, "Allow @-rule with semi-colon inside style rule");
+
+  test(() => {
+    let rule = parseRule(`
+      @page {
+        @at {}
+        margin-top: 20px;
+      }
+    `);
+    assert_equals(rule.style.marginTop, "20px");
+  }, "Allow @-rule with block inside page rule");
+
+  test(() => {
+    let rule = parseRule(`
+      @page {
+        @at at;
+        margin-top: 20px;
+      }
+    `);
+    assert_equals(rule.style.marginTop, "20px");
+  }, "Allow @-rule with semi-colon inside page rule");
+
+  test(() => {
+    let rule = parseRule(`
+      @font-face {
+        @at {}
+        font-family: myfont;
+      }
+    `);
+    assert_equals(rule.style.fontFamily, "myfont");
+  }, "Allow @-rule with block inside font-face rule");
+
+  test(() => {
+    let rule = parseRule(`
+      @font-face {
+        @at at;
+        font-family: myfont;
+      }
+    `);
+    assert_equals(rule.style.fontFamily, "myfont");
+  }, "Allow @-rule with semi-colon inside font-face rule");
+</script>