[@layer] Implement layer serialization in @import rules (#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>diff --git a/css/css-cascade/parsing/layer-import.html b/css/css-cascade/parsing/layer-import.html
new file mode 100644
index 0000000..110998e
--- /dev/null
+++ 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>
