[@container] More tests for comma separated and name-only queries

Bug: 41491726, 40287550
Change-Id: Ic236631f4ab708bc043e590092712c0fce14971c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6176970
Reviewed-by: Anders Hartvoll Ruud <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1407229}

Author: lilles

css/css-conditional/container-queries/at-container-parsing.html

@@ -101,9 +101,11 @@
   test_cq_rule_valid('(width), name (height)');
   test_cq_rule_valid('--foo');
   test_cq_rule_valid('container');
+  test_cq_rule_valid('container, container2');
 
   test_cq_rule_invalid('');
   test_cq_rule_invalid('(width),');
+  test_cq_rule_invalid(',(width)');
   test_cq_rule_invalid('(width),,(height)');
 
   test_container_name_valid('foo');

css/css-conditional/container-queries/at-container-serialization.html

@@ -12,27 +12,15 @@
     }
     #id { color: green }
   }
-  @container (  wiDTh  ) { }
-  @container (width:100px) { }
-  @container (min-width:  100px) { }
-  @container (   MAX-WIDTH:100px  ) { }
-  @container (width > 100px) { }
-  @container (width < 100px) { }
-  @container (widTH >= 100px) { }
-  @container (width <= 100px) { }
-  @container (10px < width < 100px) { }
-  @container (10px <=  width  <=  100px) { }
-  @container (100px>WIDTH>10px) { }
-  @container (  100px >= width >= 10px  ) { }
-  @container (calc(1em + 1px) >= width >= max(10em, 10px)) { }
 </style>
+<main id="cq-main"></main>
 <script>
   setup(() => assert_implements_size_container_queries());
 
-  let rules = testSheet.sheet.cssRules;
+  const rules = testSheet.sheet.cssRules;
 
   test(() => {
-    assert_equals(rules.length, 14);
+    assert_equals(rules.length, 1);
     assert_equals(rules[0].cssRules.length, 2);
 
     assert_equals(rules[0].conditionText, "(width = 100px)");
@@ -47,28 +35,24 @@
     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");
 
-  test(() => {
-    assert_equals(rules[1].conditionText, "(width)");
-  }, "Serialization of boolean condition syntax");
-
-  test(() => {
-    assert_equals(rules[2].conditionText, "(width: 100px)");
-    assert_equals(rules[3].conditionText, "(min-width: 100px)");
-    assert_equals(rules[4].conditionText, "(max-width: 100px)");
-  }, "Serialization of colon condition syntax");
-
-  test(() => {
-    assert_equals(rules[5].conditionText, "(width > 100px)");
-    assert_equals(rules[6].conditionText, "(width < 100px)");
-    assert_equals(rules[7].conditionText, "(width >= 100px)");
-    assert_equals(rules[8].conditionText, "(width <= 100px)");
-    assert_equals(rules[9].conditionText, "(10px < width < 100px)");
-    assert_equals(rules[10].conditionText, "(10px <= width <= 100px)");
-    assert_equals(rules[11].conditionText, "(100px > width > 10px)");
-    assert_equals(rules[12].conditionText, "(100px >= width >= 10px)");
-  }, "Serialization of range condition syntax");
-
-  test(() => {
-    assert_equals(rules[13].conditionText, "(calc(1em + 1px) >= width >= max(10em, 10px))");
-  }, "Serialization of calc()");
+  const testCases = [
+    ["(  wiDTh  )", "(width)"],
+    ["(width:100px)", "(width: 100px)"],
+    ["(min-width:  100px)", "(min-width: 100px)"],
+    ["(   MAX-WIDTH:100px  )", "(max-width: 100px)"],
+    ["(width > 100px)", "(width > 100px)"],
+    ["(width < 100px)", "(width < 100px)"],
+    ["(widTH >= 100px)", "(width >= 100px)"],
+    ["(width <= 100px)", "(width <= 100px)"],
+    ["(10px < width < 100px)", "(10px < width < 100px)"],
+    ["(10px <=  width  <=  100px)", "(10px <= width <= 100px)"],
+    ["(100px>WIDTH>10px)", "(100px > width > 10px)"],
+    ["(  100px >= width >= 10px  )", "(100px >= width >= 10px)"],
+    ["(calc(1em + 1px) >= width >= max(10em, 10px))", "(calc(1em + 1px) >= width >= max(10em, 10px))"],
+    ["(width),(height) ,--foo ,--bar", "(width), (height), --foo, --bar"],
+  ];
+
+  for (testCase of testCases) {
+    test_cq_condition_serialization(testCase[0], testCase[1]);
+  }
 </script>

css/css-conditional/container-queries/support/cq-testcommon.js

@@ -99,3 +99,12 @@ function test_container_name_valid(container_name) {
     assert_equals(style.sheet.rules.length, 1);
   }, `Container name: ${container_name}`);
 }
+
+function test_cq_condition_serialization(query, expected) {
+  test(t => {
+    t.add_cleanup(cleanup_container_query_main);
+    let style = set_container_query_style(`@container ${query} {}`);
+    assert_equals(style.sheet.rules.length, 1);
+    assert_equals(style.sheet.rules[0].conditionText, expected);
+  }, `@container conditionText serialization: ${query}`);
+}