[@container] Improve assert_implements for container-types

Use separate assertions for size, scroll-state, and style queries.

Since style queries are not detectable through CSS.supports, use
serialization of <general-enclosed> for now.

Change-Id: Ia2ebd2b19ae25af3bd7a2ad6b77133e496f0c46e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5979992
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1376840}

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/animation-container-size.html

@@ -29,7 +29,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/animation-container-type-dynamic.html

@@ -49,7 +49,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 0, 255)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/animation-nested-animation.html

@@ -33,7 +33,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 0)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/animation-nested-transition.html

@@ -30,7 +30,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(target).backgroundColor, 'rgb(100, 100, 100)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/aspect-ratio-feature-evaluation.html

@@ -22,7 +22,7 @@
 <div id="inline-size" class="container"><span></span></div>
 <div id="size" class="container"><span></span></div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   const red = "rgb(255, 0, 0)";
   const green = "rgb(0, 128, 0)";

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/at-container-parsing.html

@@ -8,7 +8,7 @@
   <main id="cq-main"></main>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test_cq_condition_known('(width)');
   test_cq_condition_known('(min-width: 0px)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/at-container-serialization.html

@@ -27,7 +27,7 @@
   @container (calc(1em + 1px) >= width >= max(10em, 10px)) { }
 </style>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   let rules = testSheet.sheet.cssRules;
 

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/at-container-style-parsing.html

@@ -8,7 +8,7 @@
   <main id="cq-main"></main>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_style_container_queries());
 
   test_cq_condition_known('style(--my-prop: foo)');
   test_cq_condition_known('style(--my-prop: foo - bar ())');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/at-container-style-serialization.html

@@ -17,7 +17,7 @@
 </style>
 <script>
   setup(() => {
-    assert_implements_container_queries();
+    assert_implements_style_container_queries();
     assert_equals(testSheet.sheet.cssRules.length, 8);
   });
 

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/auto-scrollbars.html

@@ -32,7 +32,7 @@
 </div>
 <script>
   setup(() => {
-    assert_implements_container_queries();
+    assert_implements_size_container_queries();
     assert_implements_optional(precondition.clientWidth < 100,
                                "Tests do not work with overlay scrollbars");
   });

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/backdrop-invalidation.html

@@ -29,7 +29,7 @@
   <dialog>test</dialog>
 </main>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   let dialog = document.querySelector('dialog');
 

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/calc-evaluation.html

@@ -24,7 +24,7 @@
   <div id=target></div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/canvas-as-container-005.html

@@ -21,7 +21,7 @@
   <div id="target" tabIndex="1"></div>
 </canvas>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     target.focus();

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/canvas-as-container-006.html

@@ -22,7 +22,7 @@
   <div id="target" tabIndex="1"></div>
 </canvas>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     target.focus();

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/column-spanner-in-container.html

@@ -23,7 +23,7 @@
   <div id="spanner"></div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(spanner).width, "600px");

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/conditional-container-status.html

@@ -19,7 +19,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(function() {
     let s = getComputedStyle(document.querySelector('.grandchild'));

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-computed.html

@@ -9,7 +9,7 @@
 <script src="support/cq-testcommon.js"></script>
 <div id="target"></div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 test_computed_value('container', 'initial', 'none');
 test_computed_value('container', 'inherit', 'none');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-for-shadow-dom.html

@@ -343,7 +343,7 @@
 
 <script>
   setup(() => {
-    assert_implements_container_queries();
+    assert_implements_size_container_queries();
   });
 
   const green = "rgb(0, 128, 0)";

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-inheritance.html

@@ -11,7 +11,7 @@
   <div id="target"></div>
 </div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 assert_not_inherited('container-name', 'none', 'foo');
 assert_not_inherited('container-type', 'normal', 'inline-size');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-inner-at-rules.html

@@ -17,7 +17,7 @@
 </div>
 
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 </script>
 
 <style>

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-inside-multicol-with-table.html

@@ -27,7 +27,7 @@
   </table>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   const green = "rgb(0, 128, 0)";
 

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-longhand-animation-type.html

@@ -28,7 +28,7 @@
 <div id=container>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(container).getPropertyValue('--ref'), 'PASS');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-name-computed.html

@@ -8,7 +8,7 @@
 <script src="support/cq-testcommon.js"></script>
 <div id="target"></div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 test_computed_value('container-name', 'initial', 'none');
 test_computed_value('container-name', 'unset', 'none');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-name-invalidation.html

@@ -38,7 +38,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(function(t) {
     t.add_cleanup(() => { outer.style = ''; });

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-name-parsing.html

@@ -8,7 +8,7 @@
 <script src="support/cq-testcommon.js"></script>
 <div id="target"></div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 test_valid_value('container-name', 'initial');
 test_valid_value('container-name', 'inherit');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-name-tree-scoped.html

@@ -88,7 +88,7 @@
 
 <script>
   setup(() => {
-    assert_implements_container_queries();
+    assert_implements_size_container_queries();
   });
 
   const green = "rgb(0, 128, 0)";

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-nested.html

@@ -26,7 +26,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 </script>
 
 <!--

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-parsing.html

@@ -9,7 +9,7 @@
 <script src="support/cq-testcommon.js"></script>
 <div id="target"></div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 test_valid_value('container', 'initial');
 test_valid_value('container', 'inherit');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-selection-unknown-features.html

@@ -30,7 +30,10 @@
   <div id="t4">Green</div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => {
+    assert_implements_size_container_queries();
+    assert_implements_style_container_queries();
+  });
 
   const green = "rgb(0, 128, 0)";
   test(() => { assert_equals(getComputedStyle(t1).color, green); }, "width query with (foo: bar)");

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-selection.html

@@ -111,7 +111,7 @@
 </main>
 
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   function test_query(prelude, selector, expected) {
     test(t => {

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-size-invalidation-after-load.html

@@ -21,7 +21,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   function waitForLoad(w) {
     return new Promise(resolve => w.addEventListener('load', resolve));

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-size-invalidation.html

@@ -22,7 +22,7 @@
   </div>
 </main>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(function() {
     assert_equals(getComputedStyle(child).color, 'rgb(255, 0, 0)');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-size-nested-invalidation.html

@@ -38,7 +38,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(function() {
     assert_equals(getComputedStyle(outer_child).getPropertyValue('--outer'), 'true');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-size-shadow-invalidation.html

@@ -34,7 +34,7 @@
 </div>
 <script>
   setup(() => {
-    assert_implements_container_queries();
+    assert_implements_size_container_queries();
   });
 
   const green = "rgb(0, 128, 0)";

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-type-computed.html

@@ -8,7 +8,7 @@
 <script src="support/cq-testcommon.js"></script>
 <div id="target"></div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 test_computed_value('container-type', 'initial', 'normal');
 test_computed_value('container-type', 'unset', 'normal');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-type-containment.html

@@ -5,7 +5,7 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/cq-testcommon.js"></script>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 </script>
 
 <style>

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-type-invalidation.html

@@ -37,7 +37,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(function(t) {
     t.add_cleanup(() => {

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-type-layout-invalidation.html

@@ -13,7 +13,7 @@
   content
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(function(t) {
     t.add_cleanup(() => { div.style = ''; });

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-type-parsing.html

@@ -8,7 +8,7 @@
 <script src="support/cq-testcommon.js"></script>
 <div id="target"></div>
 <script>
-setup(() => assert_implements_container_queries());
+setup(() => assert_implements_size_container_queries());
 
 test_valid_value('container-type', 'initial');
 test_valid_value('container-type', 'inherit');

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-units-animation.html

@@ -42,7 +42,7 @@
   <div id=element_cqmax></div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
 

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-units-basic.html

@@ -20,7 +20,7 @@
   </div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   function assert_unit_equals(element, actual, expected) {
     try {

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-units-computational-independence.html

@@ -6,7 +6,7 @@
 <script src="/resources/testharnessreport.js"></script>
 <script src="support/cq-testcommon.js"></script>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   const units = ['cqw', 'cqh', 'cqi', 'cqb', 'cqmin', 'cqmax'];
 

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-units-content-box.html

@@ -24,7 +24,7 @@
   <div id=child2></div>
 </div>
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   function assert_unit_equals(element, actual, expected) {
     try {

third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-units-in-at-container-dynamic.html

@@ -27,7 +27,7 @@
 </div>
 
 <script>
-  setup(() => assert_implements_container_queries());
+  setup(() => assert_implements_size_container_queries());
 
   test(() => {
     assert_equals(getComputedStyle(child).getPropertyValue('--cqw'), '');