[@layer] Implement layer serialization in @import rules (web-platform…

…-tests#31428) This patch also fixes a bug in ConsumeAtRulePrelude that the result prelude may contain leading white spaces. The new test requires the fix to pass. Bug: 1095765 Change-Id: Ie565309d38aa208aa0e60b5c862ec1e62a5764b2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3252521 Commit-Queue: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#937046} Co-authored-by: Xiaocheng Hu <xiaochengh@chromium.org>
Gabisampaio · Nov 18, 2021 · a9242c4 · a9242c4
1 parent 2fa0330
commit a9242c4
Showing 1 changed file with 80 additions and 0 deletions.
diff --git a/css/css-cascade/parsing/layer-import.html b/css/css-cascade/parsing/layer-import.html
@@ -0,0 +1,80 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>@import rule with layer parsing / serialization</title>
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#at-import">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  function setupSheet(rule) {
+    const style = document.createElement("style");
+    document.head.append(style);
+    const {sheet} = style;
+    document.head.removeChild(style);
+    const {cssRules} = sheet;
+
+    assert_equals(cssRules.length, 0, "Sheet should have no rules");
+    sheet.insertRule(rule);
+    assert_equals(cssRules.length, 1, "Sheet should have 1 rule");
+
+    return {sheet, cssRules};
+  }
+
+  function test_valid_layer_import(rule, serialized) {
+    if (serialized === undefined)
+        serialized = rule;
+
+    test(function() {
+      const {sheet, cssRules} = setupSheet(rule);
+
+      const serialization = cssRules[0].cssText;
+      assert_equals(serialization, serialized, 'serialization should be canonical');
+
+      const media = cssRules[0].media;
+      assert_equals(media.length, 0, 'layer() should be valid');
+
+      sheet.deleteRule(0);
+      assert_equals(cssRules.length, 0, 'Sheet should have no rule');
+      sheet.insertRule(serialization);
+      assert_equals(cssRules.length, 1, 'Sheet should have 1 rule');
+
+      assert_equals(cssRules[0].cssText, serialization, 'serialization should round-trip');
+    }, rule + ' should be a valid layered import rule');
+  }
+
+  function test_invalid_layer_import(rule) {
+    test(function() {
+      const {sheet, cssRules} = setupSheet(rule);
+
+      const media = cssRules[0].media;
+      assert_not_equals(media.length, 0,
+                        'invalid layer declaration should be parsed as <general-enclosed> media query');
+
+      sheet.deleteRule(0);
+      assert_equals(cssRules.length, 0, 'Sheet should have no rule');
+    }, rule + ' should still be a valid import rule with an invalid layer declaration');
+  }
+
+  test_valid_layer_import('@import url("nonexist.css") layer;');
+  test_valid_layer_import('@import url("nonexist.css") layer(A);');
+  test_valid_layer_import('@import url("nonexist.css") layer(A.B);');
+
+  test_valid_layer_import('@import url(nonexist.css) layer;',
+                          '@import url("nonexist.css") layer;');
+  test_valid_layer_import('@import url(nonexist.css) layer(A);',
+                          '@import url("nonexist.css") layer(A);');
+  test_valid_layer_import('@import url(nonexist.css) layer(A.B);',
+                          '@import url("nonexist.css") layer(A.B);');
+
+  test_valid_layer_import('@import "nonexist.css" layer;',
+                          '@import url("nonexist.css") layer;');
+  test_valid_layer_import('@import "nonexist.css" layer(A);',
+                          '@import url("nonexist.css") layer(A);');
+  test_valid_layer_import('@import "nonexist.css" layer(A.B);',
+                          '@import url("nonexist.css") layer(A.B);');
+
+  test_invalid_layer_import('@import url("nonexist.css") layer();');
+  test_invalid_layer_import('@import url("nonexist.css") layer(A B);');
+  test_invalid_layer_import('@import url("nonexist.css") layer(A . B);');
+  test_invalid_layer_import('@import url("nonexist.css") layer(A, B, C);');
+</script>