[@container] CSSOM serialization tests and escape fix

Bug: 1217931 Change-Id: I2d837f75689425517a5b13d5429a282a861d32aa Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3547676 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#984758}
chromium · Mar 24, 2022 · 7be5769 · 7be5769
1 parent c4ff1e2
commit 7be5769
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 1 deletion.
diff --git a/third_party/blink/renderer/core/css/css_container_rule.cc b/third_party/blink/renderer/core/css/css_container_rule.cc
@@ -4,6 +4,7 @@
 
 #include "third_party/blink/renderer/core/css/css_container_rule.h"
 
+#include "third_party/blink/renderer/core/css/css_markup.h"
 #include "third_party/blink/renderer/core/css/css_style_sheet.h"
 #include "third_party/blink/renderer/core/css/style_rule.h"
 #include "third_party/blink/renderer/platform/wtf/text/string_builder.h"
@@ -22,7 +23,7 @@ String CSSContainerRule::cssText() const {
 
   String name = ContainerQuery().Selector().Name();
   if (!name.IsEmpty()) {
-    result.Append(name);
+    SerializeIdentifier(name, result);
     result.Append(' ');
   }
   result.Append(ContainerQuery().ToString());

diff --git a/.../web_tests/external/wpt/css/css-contain/container-queries/at-container-serialization.html b/.../web_tests/external/wpt/css/css-contain/container-queries/at-container-serialization.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<title>CSS Container Queries: @container serialization</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-queries">
+<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style id="testSheet">
+  @container (width=100px) {
+    @container \!-name (inline-size > 200px    ) {
+      #id { color: lime }
+    }
+    #id { color: green }
+  }
+</style>
+<script>
+  setup(() => assert_implements_container_queries());
+
+  let rules = testSheet.sheet.cssRules;
+
+  test(() => {
+    assert_equals(rules.length, 1);
+    assert_equals(rules[0].cssRules.length, 2);
+
+    assert_equals(rules[0].conditionText, "(width = 100px)");
+    assert_equals(rules[0].cssRules[0].conditionText, "(inline-size > 200px)");
+  }, "Serialization of conditionText");
+
+  test(() => {
+    assert_equals(rules[0].cssRules[0].cssText, "@container \\!-name (inline-size > 200px) {\n  #id { color: lime; }\n}");
+  }, "Serialization of inner @container rule");
+
+  test(() => {
+    assert_equals(rules[0].cssText, "@container (width = 100px) {\n  @container \\!-name (inline-size > 200px) {\n  #id { color: lime; }\n}\n  #id { color: green; }\n}");
+  }, "Serialization of nested @container rule");
+
+</script>
diff --git a/...ink/web_tests/external/wpt/css/css-contain/container-queries/container-name-computed.html b/...ink/web_tests/external/wpt/css/css-contain/container-queries/container-name-computed.html
@@ -19,4 +19,5 @@
 test_computed_value('container-name', 'foo foo bar', 'foo bar');
 test_computed_value('container-name', 'foo bar foo', 'foo bar');
 test_computed_value('container-name', 'bar foo foo', 'bar foo');
+test_computed_value('container-name', '\\!escaped');
 </script>
diff --git a/...link/web_tests/external/wpt/css/css-contain/container-queries/container-name-parsing.html b/...link/web_tests/external/wpt/css/css-contain/container-queries/container-name-parsing.html
@@ -19,6 +19,7 @@
 test_valid_value('container-name', 'BAR');
 test_valid_value('container-name', 'foo bar');
 test_valid_value('container-name', 'foo foo');
+test_valid_value('container-name', '\\!escaped');
 
 test_invalid_value('container-name', 'none none');
 test_invalid_value('container-name', 'foo, bar');