[@container] Remove size() function Since we're anyway going to need it for style() queries eventually, I have kept the parsing and expression-node code for supporting that grammar. I added some unit test coverage for the related parsing code since that is now otherwise unreachable. Also, in query-evaluation.html, I converted the tests which cover the grammar/evaluation of queries inside size() to style() tests, since I think those tests are still valuable. Fixed: 1300546 Change-Id: Ic5968833a63ca7b865c98992963f8113c46e1ec2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3497743 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org> Cr-Commit-Position: refs/heads/main@{#978355}

commit: 5a7fbefd466d9d8e979ae5c93993ed3f2a99874c [log] [tgz]
author: Anders Hartvoll Ruud <andruud@chromium.org> Mon Mar 07 18:48:54 2022
committer: Blink WPT Bot <blink-w3c-test-autoroller@chromium.org> Mon Mar 07 19:02:42 2022
tree: 3acf15a1c7ca08267787e5ccf7d586934c427665
parent: 840ff66cc88af5f263056f396135bcdd55936567 [diff]
diff --git a/css/css-contain/container-queries/animation-container-size.html b/css/css-contain/container-queries/animation-container-size.html
index 846281b..fefb721 100644
--- a/css/css-contain/container-queries/animation-container-size.html
+++ b/css/css-contain/container-queries/animation-container-size.html

@@ -17,7 +17,7 @@
     background-color: green;
   }
 
-  @container size(width: 200px) {
+  @container (width: 200px) {
     #target {
       background-color: blue;
     }

diff --git a/css/css-contain/container-queries/animation-container-type-dynamic.html b/css/css-contain/container-queries/animation-container-type-dynamic.html
index c096654..835e8e1 100644
--- a/css/css-contain/container-queries/animation-container-type-dynamic.html
+++ b/css/css-contain/container-queries/animation-container-type-dynamic.html

@@ -21,19 +21,19 @@
     width: 100px;
   }
 
-  @container size(min-width: 250px) {
+  @container (min-width: 250px) {
     #intermediate {
       container-type: inline-size;
     }
   }
 
-  @container size(width: 200px) {
+  @container (width: 200px) {
     #target {
       background-color: blue;
     }
   }
 
-  @container size(width: 100px) {
+  @container (width: 100px) {
     /* Initially queries  #container, but later queries #intermediate, when
        the other container query starts matching. */
     #target {

diff --git a/css/css-contain/container-queries/animation-nested-animation.html b/css/css-contain/container-queries/animation-nested-animation.html
index 68b258b..7f1ae85 100644
--- a/css/css-contain/container-queries/animation-nested-animation.html
+++ b/css/css-contain/container-queries/animation-nested-animation.html

@@ -21,7 +21,7 @@
     background-color: green;
   }
 
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #target {
       animation: inner 1s linear paused;
     }

diff --git a/css/css-contain/container-queries/animation-nested-transition.html b/css/css-contain/container-queries/animation-nested-transition.html
index 110a3bd..934f995 100644
--- a/css/css-contain/container-queries/animation-nested-transition.html
+++ b/css/css-contain/container-queries/animation-nested-transition.html

@@ -17,7 +17,7 @@
     background-color: rgb(100, 100, 100);
   }
 
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #target {
       transition: background-color 100s steps(2, start);
       background-color: rgb(200, 200, 200);

diff --git a/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html b/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html
index f2919e5..843f347 100644
--- a/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html
+++ b/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html

@@ -12,10 +12,10 @@
   #inline-size { container-type: inline-size; }
   #size { container-type: size; }
   span { color: red }
-  @container size(min-aspect-ratio: 1 / 1000) {
+  @container (min-aspect-ratio: 1 / 1000) {
     span { color: green; }
   }
-  @container size(min-aspect-ratio: 2 / 1) {
+  @container (min-aspect-ratio: 2 / 1) {
     span { background-color: lime; }
   }
 </style>

diff --git a/css/css-contain/container-queries/at-container-parsing.html b/css/css-contain/container-queries/at-container-parsing.html
index 993b059..6cee68f 100644
--- a/css/css-contain/container-queries/at-container-parsing.html
+++ b/css/css-contain/container-queries/at-container-parsing.html

@@ -69,39 +69,39 @@
     }, `Container selector: ${container_selector}`);
   }
 
-  test_query_known('size(width)');
-  test_query_known('size(min-width: 0px)');
-  test_query_known('size(max-width: 0px)');
-  test_query_known('size(height)');
-  test_query_known('size(min-height: 0px)');
-  test_query_known('size(max-height: 0px)');
-  test_query_known('size(aspect-ratio)');
-  test_query_known('size(min-aspect-ratio: 1/2)');
-  test_query_known('size(max-aspect-ratio: 1/2)');
-  test_query_known('size(orientation: portrait)');
-  test_query_known('size(inline-size)');
-  test_query_known('size(min-inline-size: 0px)');
-  test_query_known('size(max-inline-size: 0px)');
-  test_query_known('size(block-size)');
-  test_query_known('size(min-block-size: 0px)');
-  test_query_known('size(max-block-size: 0px)');
+  test_query_known('(width)');
+  test_query_known('(min-width: 0px)');
+  test_query_known('(max-width: 0px)');
+  test_query_known('(height)');
+  test_query_known('(min-height: 0px)');
+  test_query_known('(max-height: 0px)');
+  test_query_known('(aspect-ratio)');
+  test_query_known('(min-aspect-ratio: 1/2)');
+  test_query_known('(max-aspect-ratio: 1/2)');
+  test_query_known('(orientation: portrait)');
+  test_query_known('(inline-size)');
+  test_query_known('(min-inline-size: 0px)');
+  test_query_known('(max-inline-size: 0px)');
+  test_query_known('(block-size)');
+  test_query_known('(min-block-size: 0px)');
+  test_query_known('(max-block-size: 0px)');
 
-  test_query_known('size(width: 100px)');
-  test_query_known('size((width: 100px))');
-  test_query_known('size(not (width: 100px))');
-  test_query_known('size((width: 100px) and (height: 100px))');
-  test_query_known('size((width: 50px) or (height: 100px))');
-  test_query_known('size(width < 100px)');
-  test_query_known('size(100px < width)');
-  test_query_known('size(100px < width < 200px)');
+  test_query_known('(width: 100px)');
+  test_query_known('((width: 100px))');
+  test_query_known('(not (width: 100px))');
+  test_query_known('((width: 100px) and (height: 100px))');
+  test_query_known('((width: 50px) or (height: 100px))');
+  test_query_known('(width < 100px)');
+  test_query_known('(100px < width)');
+  test_query_known('(100px < width < 200px)');
 
   test_query_unknown('foo(width)');
-  test_query_unknown('size(asdf)');
-  test_query_unknown('size(resolution > 100dpi)');
-  test_query_unknown('size(resolution: 150dpi)');
-  test_query_unknown('size(color)');
-  test_query_unknown('size(min-color: 1)');
-  test_query_unknown('size(color-index >= 1)');
+  test_query_unknown('size(width)');
+  test_query_unknown('(asdf)');
+  test_query_unknown('(resolution > 100dpi)');
+  test_query_unknown('(resolution: 150dpi)');
+  test_query_unknown('(color)');
+  test_query_unknown('(min-color: 1)');
   test_query_unknown('(color-index >= 1)');
   test_query_unknown('size(grid)');
   test_query_unknown('(grid)');

diff --git a/css/css-contain/container-queries/auto-scrollbars.html b/css/css-contain/container-queries/auto-scrollbars.html
index 19dbd35..9cf7971 100644
--- a/css/css-contain/container-queries/auto-scrollbars.html
+++ b/css/css-contain/container-queries/auto-scrollbars.html

@@ -18,7 +18,7 @@
     height: 100px;
     border-bottom: 1px solid red;
   }
-  @container size(max-width: 99px) {
+  @container (max-width: 99px) {
     #inner {
       height: 50px;
     }

diff --git a/css/css-contain/container-queries/backdrop-invalidation.html b/css/css-contain/container-queries/backdrop-invalidation.html
index acb5b2b..6a59a2f 100644
--- a/css/css-contain/container-queries/backdrop-invalidation.html
+++ b/css/css-contain/container-queries/backdrop-invalidation.html

@@ -19,7 +19,7 @@
     background-color: black;
   }
 
-  @container size(min-width: 300px) {
+  @container (min-width: 300px) {
     ::backdrop {
       background-color: green;
     }

diff --git a/css/css-contain/container-queries/canvas-as-container-003.html b/css/css-contain/container-queries/canvas-as-container-003.html
index 6a54e4a..7e86ebc 100644
--- a/css/css-contain/container-queries/canvas-as-container-003.html
+++ b/css/css-contain/container-queries/canvas-as-container-003.html

@@ -13,7 +13,7 @@
     container-type: size;
   }
   #target { display: none; }
-  @container size(width = 100px) {
+  @container (width = 100px) {
     #target { display: block; }
   }
 </style>

diff --git a/css/css-contain/container-queries/canvas-as-container-004.html b/css/css-contain/container-queries/canvas-as-container-004.html
index 8629634..46918b0 100644
--- a/css/css-contain/container-queries/canvas-as-container-004.html
+++ b/css/css-contain/container-queries/canvas-as-container-004.html

@@ -14,7 +14,7 @@
     container-type: size;
   }
   #target { display: none; }
-  @container size(width = 100px) {
+  @container (width = 100px) {
     #target { display: block; }
   }
 </style>

diff --git a/css/css-contain/container-queries/canvas-as-container-005.html b/css/css-contain/container-queries/canvas-as-container-005.html
index c85a9cd..3912244 100644
--- a/css/css-contain/container-queries/canvas-as-container-005.html
+++ b/css/css-contain/container-queries/canvas-as-container-005.html

@@ -11,7 +11,7 @@
     container-type: size;
   }
   #target { display: none; }
-  @container size(width = 200px) {
+  @container (width = 200px) {
     #target { display: block; }
   }
 </style>

diff --git a/css/css-contain/container-queries/canvas-as-container-006.html b/css/css-contain/container-queries/canvas-as-container-006.html
index 5b15a40..4b62818 100644
--- a/css/css-contain/container-queries/canvas-as-container-006.html
+++ b/css/css-contain/container-queries/canvas-as-container-006.html

@@ -12,7 +12,7 @@
     container-type: size;
   }
   #target { display: none; }
-  @container size(width = 200px) {
+  @container (width = 200px) {
     #target { display: block; }
   }
 </style>

diff --git a/css/css-contain/container-queries/change-display-in-container.html b/css/css-contain/container-queries/change-display-in-container.html
index 41bba34..8c58d22 100644
--- a/css/css-contain/container-queries/change-display-in-container.html
+++ b/css/css-contain/container-queries/change-display-in-container.html

@@ -6,7 +6,7 @@
   .fail { display: inline; }
   .pass { display: none; }
   #container { container-type: size; width: 100px; }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     .fail { display: none; }
     .pass { display: inline; }
   }

diff --git a/css/css-contain/container-queries/conditional-container-status.html b/css/css-contain/container-queries/conditional-container-status.html
index cdeaf41..e9762f9 100644
--- a/css/css-contain/container-queries/conditional-container-status.html
+++ b/css/css-contain/container-queries/conditional-container-status.html

@@ -8,7 +8,7 @@
   .parent { width: 300px; }
   .child { width: 100px; }
   .parent, .child { container-type: inline-size; }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     .child { container-type: initial; }
     .grandchild { border: 3px solid green }
   }

diff --git a/css/css-contain/container-queries/container-for-shadow-dom.html b/css/css-contain/container-queries/container-for-shadow-dom.html
index 66e9ea0..1ac4243 100644
--- a/css/css-contain/container-queries/container-for-shadow-dom.html
+++ b/css/css-contain/container-queries/container-for-shadow-dom.html

@@ -26,7 +26,7 @@
   <div>
     <template shadowroot="open">
       <style>
-        @container size(width = 400px) {
+        @container (width = 400px) {
           #t1 { color: green; }
         }
       </style>
@@ -49,7 +49,7 @@
       </div>
     </template>
     <style>
-      @container size(width = 400px) {
+      @container (width = 400px) {
         #t2 { color: green; }
       }
     </style>
@@ -66,7 +66,7 @@
           width: 200px;
           container-type: inline-size;
         }
-        @container size(width = 200px) {
+        @container (width = 200px) {
           ::slotted(#t3) { color: green; }
         }
       </style>
@@ -80,7 +80,7 @@
   <div id="t4">
     <template shadowroot="open">
       <style>
-        @container size(width = 400px) {
+        @container (width = 400px) {
           :host(#t4) { color: green; }
         }
       </style>
@@ -102,7 +102,7 @@
       </div>
     </template>
     <style>
-      @container size(width = 400px) {
+      @container (width = 400px) {
         #inclusive-ancestor-part > div::part(part) { color: green; }
       }
     </style>
@@ -118,7 +118,7 @@
           width: 200px;
           container-type: inline-size;
         }
-        @container size(width = 200px) {
+        @container (width = 200px) {
           ::slotted(#t6)::before {
             content: "X";
             color: green;
@@ -145,7 +145,7 @@
           width: 200px;
           container-type: inline-size;
         }
-        @container size(width = 200px) {
+        @container (width = 200px) {
           :host(#t7)::before {
             content: "X";
             color: green;
@@ -158,7 +158,7 @@
 
 <div id="inclusive-ancestor-part-before">
   <style>
-    @container size(width = 400px) {
+    @container (width = 400px) {
       #inclusive-ancestor-part-before > div::part(part)::before {
         content: "X";
         color: green;
@@ -182,7 +182,7 @@
 
 <div id="inclusive-ancestor-inner-part">
   <style>
-    @container size(width = 400px) {
+    @container (width = 400px) {
       #inclusive-ancestor-inner-part > div::part(inner-part) { color: green; }
     }
   </style>
@@ -218,7 +218,7 @@
         width: 200px;
         container-type: inline-size;
       }
-      @container size(width = 200px) {
+      @container (width = 200px) {
         #t10 { color: green; }
       }
     </style>

diff --git a/css/css-contain/container-queries/container-inner-at-rules.html b/css/css-contain/container-queries/container-inner-at-rules.html
index 96aa62e..ac18002 100644
--- a/css/css-contain/container-queries/container-inner-at-rules.html
+++ b/css/css-contain/container-queries/container-inner-at-rules.html

@@ -21,14 +21,14 @@
 </script>
 
 <style>
-  @container size(width: 100px) {
+  @container (width: 100px) {
     @keyframes anim1 {
       from { --anim1:true; }
       to { --anim1:true; }
     }
   }
 
-  @container size(width: 200px) {
+  @container (width: 200px) {
     @keyframes anim2 {
       from { --anim2:true; }
       to { --anim2:true; }
@@ -46,7 +46,7 @@
 
 
 <style>
-  @container size(width: 100px) {
+  @container (width: 100px) {
     @property --prop1 {
       syntax: "<length>";
       inherits: false;
@@ -54,7 +54,7 @@
     }
   }
 
-  @container size(width: 200px) {
+  @container (width: 200px) {
     @property --prop2 {
       syntax: "<length>";
       inherits: false;
@@ -77,11 +77,11 @@
 
 
 <style>
-  @container size(width: 100px) {
+  @container (width: 100px) {
     @layer a;
   }
 
-  @container size(width: 200px) {
+  @container (width: 200px) {
     @layer b;
   }
 
@@ -102,7 +102,7 @@
 
 
 <style>
-  @container size(width: 100px) {
+  @container (width: 100px) {
     @font-face {
       font-family: Font1;
       font-stretch: 50% 200%;
@@ -110,7 +110,7 @@
     }
   }
 
-  @container size(width: 200px) {
+  @container (width: 200px) {
     @font-face {
       font-family: Font2;
       font-stretch: 40% 190%;
@@ -133,7 +133,7 @@
 
 
 <style>
-  @container size(width: 100px) {
+  @container (width: 100px) {
     /* Assumed to be false */
     @media (width: 0px) {
       #child { --media1:true; }
@@ -145,7 +145,7 @@
   }
 
   /* Same again, but with failing container query. */
-  @container size(width: 200px) {
+  @container (width: 200px) {
     @media (width: 0px) {
       #child { --media3:true; }
     }
@@ -166,7 +166,7 @@
 
 
 <style>
-  @container size(width: 100px) {
+  @container (width: 100px) {
     @supports (width: 500kg) {
       #child { --supports1:true; }
     }
@@ -176,7 +176,7 @@
   }
 
   /* Same again, but with failing container query. */
-  @container size(width: 200px) {
+  @container (width: 200px) {
     @supports (width: 500kg) {
       #child { --supports3:true; }
     }

diff --git a/css/css-contain/container-queries/container-name-invalidation.html b/css/css-contain/container-queries/container-name-invalidation.html
index 796884e..aad225d 100644
--- a/css/css-contain/container-queries/container-name-invalidation.html
+++ b/css/css-contain/container-queries/container-name-invalidation.html

@@ -24,7 +24,7 @@
     width: 250px;
   }
 
-  @container c1 size(width: 250px) {
+  @container c1 (width: 250px) {
     #child {
       color: green;
     }

diff --git a/css/css-contain/container-queries/container-nested.html b/css/css-contain/container-queries/container-nested.html
index 92eed1c..cd5bc80 100644
--- a/css/css-contain/container-queries/container-nested.html
+++ b/css/css-contain/container-queries/container-nested.html

@@ -31,8 +31,8 @@
 
 
 <style>
-  @container size(width: 50px) {
-    @container size(height: 50px) {
+  @container (width: 50px) {
+    @container (height: 50px) {
       #child { --nearest:true; }
     }
   }
@@ -45,8 +45,8 @@
 
 
 <style>
-  @container size(width: 70px) {
-    @container size(height: 50px) {
+  @container (width: 70px) {
+    @container (height: 50px) {
       #child { --nearest-outer-fail:true; }
     }
   }
@@ -59,8 +59,8 @@
 
 
 <style>
-  @container size(width: 50px) {
-    @container size(height: 70px) {
+  @container (width: 50px) {
+    @container (height: 70px) {
       #child { --nearest-inner-fail:true; }
     }
   }
@@ -73,8 +73,8 @@
 
 
 <style>
-  @container outer size(width: 100px) {
-    @container inner size(height: 50px) {
+  @container outer (width: 100px) {
+    @container inner (height: 50px) {
       #child { --named-outer-inner:true; }
     }
   }
@@ -87,8 +87,8 @@
 
 
 <style>
-  @container inner size(width: 50px) {
-    @container outer size(height: 100px) {
+  @container inner (width: 50px) {
+    @container outer (height: 100px) {
       #child { --named-outer-inner-reverse:true; }
     }
   }
@@ -101,8 +101,8 @@
 
 
 <style>
-  @container unknown size(width: 100px) {
-    @container inner size(height: 50px) {
+  @container unknown (width: 100px) {
+    @container inner (height: 50px) {
       #child { --named-failing-outer:true; }
     }
   }
@@ -114,8 +114,8 @@
 </script>
 
 <style>
-  @container outer size(width: 100px) {
-    @container unknown size(height: 50px) {
+  @container outer (width: 100px) {
+    @container unknown (height: 50px) {
       #child { --named-failing-inner:true; }
     }
   }
@@ -128,8 +128,8 @@
 
 
 <style>
-  @container outer size(width: 100px) {
-    @container size(height: 50px) {
+  @container outer (width: 100px) {
+    @container (height: 50px) {
       #child { --named-outer-inner-nearest:true; }
     }
   }
@@ -142,8 +142,8 @@
 
 
 <style>
-  @container size(width: 50px) {
-    @container inner size(height: 50px) {
+  @container (width: 50px) {
+    @container inner (height: 50px) {
       #child { --nearest-outer-inner-named:true; }
     }
   }
@@ -156,8 +156,8 @@
 
 
 <style>
-  @container size(width: 50px) {
-    @container outer size(height: 100px) {
+  @container (width: 50px) {
+    @container outer (height: 100px) {
       #child { --nearest-outer-inner-named-reverse:true; }
     }
   }
@@ -170,9 +170,9 @@
 
 
 <style>
-  @container size(width > 1px) {
-    @container size(width > 2px) {
-      @container size(width > 3px) {
+  @container (width > 1px) {
+    @container (width > 2px) {
+      @container (width > 3px) {
         #child { --three-levels:true; }
       }
     }
@@ -186,9 +186,9 @@
 
 
 <style>
-  @container size(width > 1px) {
-    @container size(width > 2000px) {
-      @container size(width > 3px) {
+  @container (width > 1px) {
+    @container (width > 2000px) {
+      @container (width > 3px) {
         #child { --three-levels-middle-fail:true; }
       }
     }
@@ -202,8 +202,8 @@
 
 
 <style>
-  @container size(width: 50px) {
-    @container outer size(height: 100px) {
+  @container (width: 50px) {
+    @container outer (height: 100px) {
       #child { --inner-named-invalidation:true; }
     }
   }
@@ -219,8 +219,8 @@
 
 
 <style>
-  @container size(width: 50px) {
-    @container outer size(height: 100px) {
+  @container (width: 50px) {
+    @container outer (height: 100px) {
       #child { --outer-nearest-invalidation:true; }
     }
   }

diff --git a/css/css-contain/container-queries/container-selection.html b/css/css-contain/container-queries/container-selection.html
index 8b2225c..f8d72d9 100644
--- a/css/css-contain/container-queries/container-selection.html
+++ b/css/css-contain/container-queries/container-selection.html

@@ -142,38 +142,38 @@
   // and the outer container has a size of 32x32px.
 
   // "Nearest" selection:
-  test_applied('size(width: 16px)',  '.size > .inline > span');
-  test_applied('size(height: 16px)', '.inline > .size > span');
-  test_applied('size(width: 16px)',  '.inline > .size > span');
-  test_rejected('size(height)', '.size > .inline > span');
+  test_applied('(width: 16px)',  '.size > .inline > span');
+  test_applied('(height: 16px)', '.inline > .size > span');
+  test_applied('(width: 16px)',  '.inline > .size > span');
+  test_rejected('(height)', '.size > .inline > span');
 
   // type():
-  test_applied('type(inline-size) size(width: 16px)', '.inline > .size > span');
-  test_applied('type(inline-size) size(width: 16px)', '.size > .inline > span');
+  test_applied('type(inline-size) (width: 16px)', '.inline > .size > span');
+  test_applied('type(inline-size) (width: 16px)', '.size > .inline > span');
 
-  test_applied('type(size) size(height: 16px)', '.inline > .size > span');
-  test_applied('type(size) size(height: 32px)', '.size > .inline > span');
-  test_rejected('type(size) size(height)', '.inline > .inline > span');
+  test_applied('type(size) (height: 16px)', '.inline > .size > span');
+  test_applied('type(size) (height: 32px)', '.size > .inline > span');
+  test_rejected('type(size) (height)', '.inline > .inline > span');
 
   // name():
-  test_applied('name(a) size(width: 32px)', '.a-size > .b-size > span');
-  test_applied('name(b) size(width: 16px)', '.a-size > .b-size > span');
-  test_rejected('name(c) size(width)','.a-size > .b-size > span');
-  test_applied('name(a) size(width: 16px)', '.a-size > .a-size > span');
+  test_applied('name(a) (width: 32px)', '.a-size > .b-size > span');
+  test_applied('name(b) (width: 16px)', '.a-size > .b-size > span');
+  test_rejected('name(c) (width)','.a-size > .b-size > span');
+  test_applied('name(a) (width: 16px)', '.a-size > .a-size > span');
 
   // Name as plain ident:
-  test_applied('a size(width: 32px)', '.a-size > .b-size > span');
-  test_applied('b size(width: 16px)', '.a-size > .b-size > span');
-  test_rejected('c size(width)', '.a-size > .b-size > span');
-  test_applied('a size(width: 16px)', '.a-size > .a-size > span');
+  test_applied('a (width: 32px)', '.a-size > .b-size > span');
+  test_applied('b (width: 16px)', '.a-size > .b-size > span');
+  test_rejected('c (width)', '.a-size > .b-size > span');
+  test_applied('a (width: 16px)', '.a-size > .a-size > span');
 
   // container-name alone does not establish a container:
-  test_applied('a size(width: 32px)', '.a-size > .a > span');
+  test_applied('a (width: 32px)', '.a-size > .a > span');
 
   // Can query container with multiple names:
-  test_applied('a size(width: 32px)', '.ab-size > .size > span');
-  test_applied('b size(width: 32px)', '.ab-size > .size > span');
-  test_rejected('c size(width)', '.ab-size > .size > span');
+  test_applied('a (width: 32px)', '.ab-size > .size > span');
+  test_applied('b (width: 32px)', '.ab-size > .size > span');
+  test_rejected('c (width)', '.ab-size > .size > span');
 
   // The following tests have three containers:
   //
@@ -182,14 +182,14 @@
   //  inner -> 8x8px
 
   // Mixing name() and type():
-  test_applied('name(a) type(inline-size) size(width: 8px)', '.a-size > .b-size > .a-inline > span');
-  test_applied('name(b) type(inline-size) size(width: 16px)', '.a-size > .b-size > .a-inline > span');
-  test_applied('name(a) type(size) size(width: 32px)', '.a-size > .b-size > .a-inline > span');
-  test_applied('name(b) type(size) size(width: 16px)', '.a-size > .b-size > .a-inline > span');
-  test_rejected('name(a) type(size) size(width)', '.a-inline > .b-size');
+  test_applied('name(a) type(inline-size) (width: 8px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('name(b) type(inline-size) (width: 16px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('name(a) type(size) (width: 32px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('name(b) type(size) (width: 16px)', '.a-size > .b-size > .a-inline > span');
+  test_rejected('name(a) type(size) (width)', '.a-inline > .b-size');
 
   // type() first, then name():
-  test_applied('type(inline-size) name(a) size(width: 8px)', '.a-size > .b-size > .a-inline > span');
-  test_applied('type(size) name(a) size(height: 32px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('type(inline-size) name(a) (width: 8px)', '.a-size > .b-size > .a-inline > span');
+  test_applied('type(size) name(a) (height: 32px)', '.a-size > .b-size > .a-inline > span');
 
 </script>

diff --git a/css/css-contain/container-queries/container-size-invalidation.html b/css/css-contain/container-queries/container-size-invalidation.html
index 7008d4a..ab26971 100644
--- a/css/css-contain/container-queries/container-size-invalidation.html
+++ b/css/css-contain/container-queries/container-size-invalidation.html

@@ -11,7 +11,7 @@
     height: 50px;
   }
   div { color: red; }
-  @container size(min-width: 300px) {
+  @container (min-width: 300px) {
     div { color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/container-type-invalidation.html b/css/css-contain/container-queries/container-type-invalidation.html
index 178c50f..90e0b4a 100644
--- a/css/css-contain/container-queries/container-type-invalidation.html
+++ b/css/css-contain/container-queries/container-type-invalidation.html

@@ -24,7 +24,7 @@
     container-type: inline-size;
   }
 
-  @container size((max-width: 200px) or (min-width: 300px)) {
+  @container ((max-width: 200px) or (min-width: 300px)) {
     #child { color: green; }
   }
 

diff --git a/css/css-contain/container-queries/counters-flex-circular.html b/css/css-contain/container-queries/counters-flex-circular.html
index 3bee287..d60049e 100644
--- a/css/css-contain/container-queries/counters-flex-circular.html
+++ b/css/css-contain/container-queries/counters-flex-circular.html

@@ -33,7 +33,7 @@
   /* The counter-increment inside the container should not affect the size of
      #item2 because of style containment. Otherwise we would have a
      circularity. */
-  @container size(min-width: 125px) {
+  @container (min-width: 125px) {
     #inner {
       counter-increment: my-count 10;
       background-color: green;

diff --git a/css/css-contain/container-queries/counters-in-container-dynamic.html b/css/css-contain/container-queries/counters-in-container-dynamic.html
index d817fe6..d85ab6c 100644
--- a/css/css-contain/container-queries/counters-in-container-dynamic.html
+++ b/css/css-contain/container-queries/counters-in-container-dynamic.html

@@ -13,7 +13,7 @@
     content: counter(my-counter);
   }
 
-  @container size(min-width: 300px) {
+  @container (min-width: 300px) {
     #counter {
       counter-reset: my-counter 100;
     }

diff --git a/css/css-contain/container-queries/counters-in-container.html b/css/css-contain/container-queries/counters-in-container.html
index 64a02be..376f52e 100644
--- a/css/css-contain/container-queries/counters-in-container.html
+++ b/css/css-contain/container-queries/counters-in-container.html

@@ -13,7 +13,7 @@
     content: counter(my-counter);
   }
 
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #counter {
       counter-reset: my-counter 100;
     }

diff --git a/css/css-contain/container-queries/custom-layout-container-001.https.html b/css/css-contain/container-queries/custom-layout-container-001.https.html
index ef8c5cc..8f301e8 100644
--- a/css/css-contain/container-queries/custom-layout-container-001.https.html
+++ b/css/css-contain/container-queries/custom-layout-container-001.https.html

@@ -17,7 +17,7 @@
     height: 100px;
     container-type: inline-size;
   }
-  @container size(width = 400px) {
+  @container (width = 400px) {
     #inner {
       display: inline; /* Shouldn't pass without layout api support */
       display: layout(half);
@@ -25,7 +25,7 @@
       container-type: inline-size;
     }
   }
-  @container size(width = 200px) {
+  @container (width = 200px) {
     #green {
       background-color: green;
       height: 100px;

diff --git a/css/css-contain/container-queries/deep-nested-inline-size-containers.html b/css/css-contain/container-queries/deep-nested-inline-size-containers.html
index b2f77d0..48e8157 100644
--- a/css/css-contain/container-queries/deep-nested-inline-size-containers.html
+++ b/css/css-contain/container-queries/deep-nested-inline-size-containers.html

@@ -19,7 +19,7 @@
     let container = outer;
     for (let width = 200; width > 100; --width) {
       sheet.insertRule(`
-        @container size(width = ${width}px) {
+        @container (width = ${width}px) {
           .container { max-width: ${width-1}px; }
         }
       `);

diff --git a/css/css-contain/container-queries/display-contents.html b/css/css-contain/container-queries/display-contents.html
index de5dd16..d96a46d 100644
--- a/css/css-contain/container-queries/display-contents.html
+++ b/css/css-contain/container-queries/display-contents.html

@@ -24,11 +24,11 @@
     display: contents;
   }
 
-  @container size(width: 30px) {
+  @container (width: 30px) {
     .target { --x:30; }
   }
 
-  @container size(width: 50px) {
+  @container (width: 50px) {
     .target { --x:50; }
   }
 

diff --git a/css/css-contain/container-queries/display-in-container.html b/css/css-contain/container-queries/display-in-container.html
index 1def7ee..a2a4cd7 100644
--- a/css/css-contain/container-queries/display-in-container.html
+++ b/css/css-contain/container-queries/display-in-container.html

@@ -18,19 +18,19 @@
   }
 
   /* Note: 150px - 2px, since .container has a 1px border */
-  @container size(min-width: 148px) {
+  @container (min-width: 148px) {
     div { display: flex; }
     span { flex: 1; }
   }
 
   /* Note: 200px - 2px, since .container has a 1px border */
-  @container size(min-width: 198px) {
+  @container (min-width: 198px) {
     div { display: revert; }
     span { display: block; }
   }
 
   /* Should not apply: */
-  @container size(min-width: 199px) {
+  @container (min-width: 199px) {
     * { color: red; background-color: red; }
   }
 </style>

diff --git a/css/css-contain/container-queries/display-none.html b/css/css-contain/container-queries/display-none.html
index cdd614c..bae21bc 100644
--- a/css/css-contain/container-queries/display-none.html
+++ b/css/css-contain/container-queries/display-none.html

@@ -31,11 +31,11 @@
     display: none;
   }
 
-  @container size(width: 30px) {
+  @container (width: 30px) {
     .target { --x:30; }
   }
 
-  @container size(width: 50px) {
+  @container (width: 50px) {
     .target { --x:50; }
   }
 

diff --git a/css/css-contain/container-queries/fieldset-legend-change.html b/css/css-contain/container-queries/fieldset-legend-change.html
index dee6a96..15b44a0 100644
--- a/css/css-contain/container-queries/fieldset-legend-change.html
+++ b/css/css-contain/container-queries/fieldset-legend-change.html

@@ -10,7 +10,7 @@
   }
   .wide { width: 400px; }
 
-  @container size(min-width: 300px) {
+  @container (min-width: 300px) {
     #fail {
       display: none;
     }

diff --git a/css/css-contain/container-queries/flex-in-columns-000-crash.html b/css/css-contain/container-queries/flex-in-columns-000-crash.html
index 65d5aaf..e7b7893 100644
--- a/css/css-contain/container-queries/flex-in-columns-000-crash.html
+++ b/css/css-contain/container-queries/flex-in-columns-000-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       display: flex;
     }

diff --git a/css/css-contain/container-queries/flex-in-columns-001-crash.html b/css/css-contain/container-queries/flex-in-columns-001-crash.html
index b974c7d..0c0648c 100644
--- a/css/css-contain/container-queries/flex-in-columns-001-crash.html
+++ b/css/css-contain/container-queries/flex-in-columns-001-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       display: flex;
     }

diff --git a/css/css-contain/container-queries/flex-in-columns-002-crash.html b/css/css-contain/container-queries/flex-in-columns-002-crash.html
index a1a66ef..ef3052d 100644
--- a/css/css-contain/container-queries/flex-in-columns-002-crash.html
+++ b/css/css-contain/container-queries/flex-in-columns-002-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 250px) {
+  @container (max-width: 250px) {
     #target {
       display: flex;
     }

diff --git a/css/css-contain/container-queries/flex-in-columns-003-crash.html b/css/css-contain/container-queries/flex-in-columns-003-crash.html
index 885110a..a86f25a 100644
--- a/css/css-contain/container-queries/flex-in-columns-003-crash.html
+++ b/css/css-contain/container-queries/flex-in-columns-003-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 250px) {
+  @container (max-width: 250px) {
     #target {
       display: flex;
     }

diff --git a/css/css-contain/container-queries/focus-inside-content-visibility-crash.html b/css/css-contain/container-queries/focus-inside-content-visibility-crash.html
index ef2eb97..1bf68d6 100644
--- a/css/css-contain/container-queries/focus-inside-content-visibility-crash.html
+++ b/css/css-contain/container-queries/focus-inside-content-visibility-crash.html

@@ -19,7 +19,7 @@
   width: 100%;
   visibility: hidden;
 }
-@container size(min-width: 150px) {
+@container (min-width: 150px) {
   #input { visibility: visible; }
 }
 

diff --git a/css/css-contain/container-queries/font-relative-units-dynamic.html b/css/css-contain/container-queries/font-relative-units-dynamic.html
index 0c7786f..63e17c9 100644
--- a/css/css-contain/container-queries/font-relative-units-dynamic.html
+++ b/css/css-contain/container-queries/font-relative-units-dynamic.html

@@ -13,16 +13,16 @@
     width: 100px;
     color: red;
   }
-  @container size(width: 5em) {
+  @container (width: 5em) {
     #em_test { color: green }
   }
-  @container size(width: 2rem) {
+  @container (width: 2rem) {
     #rem_test { color: green }
   }
-  @container size(max-width: 15ex) {
+  @container (max-width: 15ex) {
     #ex_test { color: green }
   }
-  @container size(max-width: 15ch) {
+  @container (max-width: 15ch) {
     #ch_test { color: green }
   }
 </style>

diff --git a/css/css-contain/container-queries/font-relative-units.html b/css/css-contain/container-queries/font-relative-units.html
index cad44d5..b069510 100644
--- a/css/css-contain/container-queries/font-relative-units.html
+++ b/css/css-contain/container-queries/font-relative-units.html

@@ -21,16 +21,16 @@
     font-size: 50px;
     width: 10ch;
   }
-  @container size(width: 1em) {
+  @container (width: 1em) {
     #em_test { color: green }
   }
-  @container size(width: 10rem) {
+  @container (width: 10rem) {
     #rem_test { color: green }
   }
-  @container size(width: 10ex) {
+  @container (width: 10ex) {
     #ex_test { color: green }
   }
-  @container size(width: 10ch) {
+  @container (width: 10ch) {
     #ch_test { color: green }
   }
 </style>

diff --git a/css/css-contain/container-queries/fragmented-container-001.html b/css/css-contain/container-queries/fragmented-container-001.html
index 1eb37e3..884ab6c 100644
--- a/css/css-contain/container-queries/fragmented-container-001.html
+++ b/css/css-contain/container-queries/fragmented-container-001.html

@@ -25,7 +25,7 @@
   #first-child {
     break-after: column;
   }
-  @container size(width = 100px) {
+  @container (width = 100px) {
     #first-child { color: green; }
     #second-child { color: green; }
   }

diff --git a/css/css-contain/container-queries/get-animations.html b/css/css-contain/container-queries/get-animations.html
index ea95bb9..dca41c6 100644
--- a/css/css-contain/container-queries/get-animations.html
+++ b/css/css-contain/container-queries/get-animations.html

@@ -14,7 +14,7 @@
     from { color: green; }
     to { color: green; }
   }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #div { animation: test 1s linear forwards; }
   }
 </style>

diff --git a/css/css-contain/container-queries/grid-in-columns-000-crash.html b/css/css-contain/container-queries/grid-in-columns-000-crash.html
index 95ea340..56cf6cf 100644
--- a/css/css-contain/container-queries/grid-in-columns-000-crash.html
+++ b/css/css-contain/container-queries/grid-in-columns-000-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       display: grid;
     }

diff --git a/css/css-contain/container-queries/grid-in-columns-001-crash.html b/css/css-contain/container-queries/grid-in-columns-001-crash.html
index 752312f..b9cf100 100644
--- a/css/css-contain/container-queries/grid-in-columns-001-crash.html
+++ b/css/css-contain/container-queries/grid-in-columns-001-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       display: grid;
     }

diff --git a/css/css-contain/container-queries/grid-in-columns-002-crash.html b/css/css-contain/container-queries/grid-in-columns-002-crash.html
index 8208ca3..762ad44 100644
--- a/css/css-contain/container-queries/grid-in-columns-002-crash.html
+++ b/css/css-contain/container-queries/grid-in-columns-002-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 250px) {
+  @container (max-width: 250px) {
     #target {
       display: grid;
     }

diff --git a/css/css-contain/container-queries/grid-in-columns-003-crash.html b/css/css-contain/container-queries/grid-in-columns-003-crash.html
index f189fd5..11089e6 100644
--- a/css/css-contain/container-queries/grid-in-columns-003-crash.html
+++ b/css/css-contain/container-queries/grid-in-columns-003-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 250px) {
+  @container (max-width: 250px) {
     #target {
       display: grid;
     }

diff --git a/css/css-contain/container-queries/iframe-invalidation.html b/css/css-contain/container-queries/iframe-invalidation.html
index 8fc81a7..51f2be9 100644
--- a/css/css-contain/container-queries/iframe-invalidation.html
+++ b/css/css-contain/container-queries/iframe-invalidation.html

@@ -17,7 +17,7 @@
       height: 20px;
     }
     div#child { color: red; }
-    @container size(min-width: 300px) {
+    @container (min-width: 300px) {
       div#child { color: green; }
     }
   </style>

diff --git a/css/css-contain/container-queries/ineligible-containment.html b/css/css-contain/container-queries/ineligible-containment.html
index 5077508..36ce68d 100644
--- a/css/css-contain/container-queries/ineligible-containment.html
+++ b/css/css-contain/container-queries/ineligible-containment.html

@@ -16,7 +16,7 @@
   p {
     color: green;
   }
-  @container size(min-width: 1px) {
+  @container (min-width: 1px) {
     p { color: red; }
   }
 </style>

diff --git a/css/css-contain/container-queries/inline-multicol-inside-container-crash.html b/css/css-contain/container-queries/inline-multicol-inside-container-crash.html
index d8ec414..7e209f7 100644
--- a/css/css-contain/container-queries/inline-multicol-inside-container-crash.html
+++ b/css/css-contain/container-queries/inline-multicol-inside-container-crash.html

@@ -8,7 +8,7 @@
     width: 200px;
     height: 100px;
   }
-  @container size(width <= 200px) {
+  @container (width <= 200px) {
     #multicol {
       column-count: 2;
       column-gap: 0;

diff --git a/css/css-contain/container-queries/inline-size-and-min-width.html b/css/css-contain/container-queries/inline-size-and-min-width.html
index 7d4ca6a..8ddcbc6 100644
--- a/css/css-contain/container-queries/inline-size-and-min-width.html
+++ b/css/css-contain/container-queries/inline-size-and-min-width.html

@@ -10,7 +10,7 @@
     min-width: 200px;
     width: fit-content;
   }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #child { color: green }
   }
 </style>

diff --git a/css/css-contain/container-queries/inline-size-bfc-floats.html b/css/css-contain/container-queries/inline-size-bfc-floats.html
index 9319cfd..88b81c6 100644
--- a/css/css-contain/container-queries/inline-size-bfc-floats.html
+++ b/css/css-contain/container-queries/inline-size-bfc-floats.html

@@ -23,13 +23,13 @@
      beside #float2. It would at this point fit beside #float1, but that would
      cause the width to increase again, and the spec says layout always moves
      forward. */
-  @container size(width < 200px) {
+  @container (width < 200px) {
     #content1 { display: none }
   }
 
   /* Trying to fit #container beside #float3 causes the rest of the red content
      (#content2) to disappear. */
-  @container size(width < 150px) {
+  @container (width < 150px) {
     #content2 { display: none }
   }
 </style>

diff --git a/css/css-contain/container-queries/inline-size-containment-vertical-rl.html b/css/css-contain/container-queries/inline-size-containment-vertical-rl.html
index ec19467..38c88f2 100644
--- a/css/css-contain/container-queries/inline-size-containment-vertical-rl.html
+++ b/css/css-contain/container-queries/inline-size-containment-vertical-rl.html

@@ -5,10 +5,10 @@
 <style>
   #ancestry { writing-mode: vertical-rl; }
   #keg { container-type: inline-size; }
-  @container size(max-height: 200px) {
+  @container (max-height: 200px) {
     #target { width: 400px; }
   }
-  @container size(min-height: 400px) {
+  @container (min-height: 400px) {
     #target { width: 20px; }
   }
 </style>

diff --git a/css/css-contain/container-queries/inline-size-containment.html b/css/css-contain/container-queries/inline-size-containment.html
index 2a45053..d519322 100644
--- a/css/css-contain/container-queries/inline-size-containment.html
+++ b/css/css-contain/container-queries/inline-size-containment.html

@@ -4,10 +4,10 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <style>
   #keg { container-type: inline-size; }
-  @container size(max-width: 200px) {
+  @container (max-width: 200px) {
     #target { height: 400px; }
   }
-  @container size(min-width: 400px) {
+  @container (min-width: 400px) {
     #target { height: 20px; }
   }
 </style>

diff --git a/css/css-contain/container-queries/inline-with-columns-000-crash.html b/css/css-contain/container-queries/inline-with-columns-000-crash.html
index 6bb178a..733b2c4 100644
--- a/css/css-contain/container-queries/inline-with-columns-000-crash.html
+++ b/css/css-contain/container-queries/inline-with-columns-000-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       columns: 2;
     }

diff --git a/css/css-contain/container-queries/inline-with-columns-001-crash.html b/css/css-contain/container-queries/inline-with-columns-001-crash.html
index c813375..3b9bdf3 100644
--- a/css/css-contain/container-queries/inline-with-columns-001-crash.html
+++ b/css/css-contain/container-queries/inline-with-columns-001-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       columns: 2;
     }

diff --git a/css/css-contain/container-queries/multicol-container-001.html b/css/css-contain/container-queries/multicol-container-001.html
index 2b80e12..5e68afc 100644
--- a/css/css-contain/container-queries/multicol-container-001.html
+++ b/css/css-contain/container-queries/multicol-container-001.html

@@ -11,7 +11,7 @@
     column-count: 2;
     column-gap: 0;
   }
-  @container size(width = 400px) {
+  @container (width = 400px) {
     #first-child { color: green; }
     #second-child { color: green; }
   }

diff --git a/css/css-contain/container-queries/multicol-inside-container.html b/css/css-contain/container-queries/multicol-inside-container.html
index 0c00734..9fc8393 100644
--- a/css/css-contain/container-queries/multicol-inside-container.html
+++ b/css/css-contain/container-queries/multicol-inside-container.html

@@ -8,7 +8,7 @@
     width: 200px;
     height: 100px;
   }
-  @container size(width <= 200px) {
+  @container (width <= 200px) {
     #multicol {
       column-count: 2;
       column-gap: 0;

diff --git a/css/css-contain/container-queries/never-match-container.html b/css/css-contain/container-queries/never-match-container.html
index 5d79ec0..9d5ff6d 100644
--- a/css/css-contain/container-queries/never-match-container.html
+++ b/css/css-contain/container-queries/never-match-container.html

@@ -16,7 +16,7 @@
     width: 100px;
     container-type: inline-size;
   }
-  @container size(width >= 0px) {
+  @container (width >= 0px) {
     #inner { color: red; }
     #svg-inner { fill: red; }
   }

diff --git a/css/css-contain/container-queries/orthogonal-wm-container-query.html b/css/css-contain/container-queries/orthogonal-wm-container-query.html
index 30e58f8..1ad52bf 100644
--- a/css/css-contain/container-queries/orthogonal-wm-container-query.html
+++ b/css/css-contain/container-queries/orthogonal-wm-container-query.html

@@ -14,7 +14,7 @@
   #orthogonal {
     font: 50px/1 Ahem;
   }
-  @container size(max-width: 100px) {
+  @container (max-width: 100px) {
     #orthogonal {
       writing-mode: vertical-lr;
     }

diff --git a/css/css-contain/container-queries/percentage-padding-orthogonal.html b/css/css-contain/container-queries/percentage-padding-orthogonal.html
index 8e0922b..5fc591a 100644
--- a/css/css-contain/container-queries/percentage-padding-orthogonal.html
+++ b/css/css-contain/container-queries/percentage-padding-orthogonal.html

@@ -30,7 +30,7 @@
 
   #first, #second { height: 50px; }
 
-  @container size(width <= 400px) {
+  @container (width <= 400px) {
     #second { display: none; }
   }
 </style>

diff --git a/css/css-contain/container-queries/pseudo-elements-001.html b/css/css-contain/container-queries/pseudo-elements-001.html
index c5fd15f..0baef0b 100644
--- a/css/css-contain/container-queries/pseudo-elements-001.html
+++ b/css/css-contain/container-queries/pseudo-elements-001.html

@@ -15,7 +15,7 @@
     height: 40px;
   }
 
-  @container size(min-width: 300px) {
+  @container (min-width: 300px) {
     #container1 div::before { content: "before"; }
     #container1 div::after { content: "after"; }
     #container2 li::marker { color: green; }

diff --git a/css/css-contain/container-queries/pseudo-elements-002.html b/css/css-contain/container-queries/pseudo-elements-002.html
index a41bc43..4563e63 100644
--- a/css/css-contain/container-queries/pseudo-elements-002.html
+++ b/css/css-contain/container-queries/pseudo-elements-002.html

@@ -5,29 +5,29 @@
 <style>
   .container { container-type: inline-size; }
 
-  @container size(max-width: 100px) { #c1::before { content: "PASS" } }
-  @container size(min-width: 150px) { #c1::before { content: "FAIL" } }
+  @container (max-width: 100px) { #c1::before { content: "PASS" } }
+  @container (min-width: 150px) { #c1::before { content: "FAIL" } }
 
-  @container size(max-width: 100px) { #c2::before { content: "PASS" } }
-  @container size(min-width: 150px) { #c2::before { content: "FAIL" } }
+  @container (max-width: 100px) { #c2::before { content: "PASS" } }
+  @container (min-width: 150px) { #c2::before { content: "FAIL" } }
 
-  @container size(max-width: 100px) { #c3::after { content: "PASS" } }
-  @container size(min-width: 150px) { #c3::after { content: "FAIL" } }
+  @container (max-width: 100px) { #c3::after { content: "PASS" } }
+  @container (min-width: 150px) { #c3::after { content: "FAIL" } }
 
-  @container size(max-width: 100px) { #c4::after { content: "PASS" } }
-  @container size(min-width: 150px) { #c4::after { content: "FAIL" } }
+  @container (max-width: 100px) { #c4::after { content: "PASS" } }
+  @container (min-width: 150px) { #c4::after { content: "FAIL" } }
 
-  @container size(max-width: 300px) { #c5::first-letter { color: green } }
-  @container size(max-width: 300px) { #c6::first-letter { color: green } }
+  @container (max-width: 300px) { #c5::first-letter { color: green } }
+  @container (max-width: 300px) { #c6::first-letter { color: green } }
 
-  @container size(min-width: 400px) { #c7::first-letter { color: green } }
-  @container size(min-width: 400px) { #c8::first-letter { color: green } }
+  @container (min-width: 400px) { #c7::first-letter { color: green } }
+  @container (min-width: 400px) { #c8::first-letter { color: green } }
 
-  @container size(max-width: 300px) { #c9::first-line { color: green } }
-  @container size(max-width: 300px) { #c10::first-line { color: green } }
+  @container (max-width: 300px) { #c9::first-line { color: green } }
+  @container (max-width: 300px) { #c10::first-line { color: green } }
 
-  @container size(min-width: 400px) { #c11::first-line { color: green } }
-  @container size(min-width: 400px) { #c12::first-line { color: green } }
+  @container (min-width: 400px) { #c11::first-line { color: green } }
+  @container (min-width: 400px) { #c12::first-line { color: green } }
 </style>
 <div id="c1" class="container" style="width:100px"></div>
 <div id="c2" class="container" style="width:200px"></div>

diff --git a/css/css-contain/container-queries/pseudo-elements-003.html b/css/css-contain/container-queries/pseudo-elements-003.html
index 7d03dc0..67a74fb 100644
--- a/css/css-contain/container-queries/pseudo-elements-003.html
+++ b/css/css-contain/container-queries/pseudo-elements-003.html

@@ -7,19 +7,19 @@
 <style>
   .container { container-type: inline-size; }
   #target { display: list-item; }
-  @container size(max-width: 200px) {
+  @container (max-width: 200px) {
     #target::before { content: "PASS"; color: green; }
     #target::after { color: green; }
     #target::marker { color: green; }
     #target::first-line { color: green; }
     #target::first-letter { color: green; }
   }
-  @container size((min-width: 300px) and (max-width: 350px)) {
+  @container ((min-width: 300px) and (max-width: 350px)) {
     #outer::first-line { color: green; }
     #outer::first-letter { color: green; }
   }
   dialog::backdrop { background-color: lime; }
-  @container size(max-width: 100px) {
+  @container (max-width: 100px) {
     dialog::backdrop { background-color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/query-content-box.html b/css/css-contain/container-queries/query-content-box.html
index 5744561..5f6cc9f 100644
--- a/css/css-contain/container-queries/query-content-box.html
+++ b/css/css-contain/container-queries/query-content-box.html

@@ -38,7 +38,7 @@
     overflow: scroll;
   }
 
-  @container size((width = 100px) and (height = 100px)) {
+  @container ((width = 100px) and (height = 100px)) {
     .target {
       background-color: green;
       height: 100%;

diff --git a/css/css-contain/container-queries/query-evaluation.html b/css/css-contain/container-queries/query-evaluation.html
index 50ae75d..67139d0 100644
--- a/css/css-contain/container-queries/query-evaluation.html
+++ b/css/css-contain/container-queries/query-evaluation.html

@@ -35,94 +35,102 @@
   // and "unknown" are arbitrarily chosen to represent true, false, and
   // unknown values, respectively.
 
-  test_query('size(width)', true);
-  test_query('size(height)', false);
-  test_query('size(unknown)', false);
+  test_query('(width)', true);
+  test_query('(height)', false);
+  test_query('(unknown)', false);
   test_query('unknown(width)', false);
 
   // Nesting in <container-query>:
-  test_query('(size(width))', true);
-  test_query('(size(height))', false);
-  test_query('(size(unknown))', false);
-  test_query('(((size(width))))', true);
-  test_query('(((size(height))))', false);
-  test_query('(((size(unknown))))', false);
+  test_query('((width))', true);
+  test_query('((height))', false);
+  test_query('((unknown))', false);
+  test_query('((((width))))', true);
+  test_query('((((height))))', false);
+  test_query('((((unknown))))', false);
 
   // "not" in <container-query>:
-  test_query('(not size(width))', false);
-  test_query('(not size(height))', true);
-  test_query('(not size(unknown))', false);
+  test_query('(not (width))', false);
+  test_query('(not (height))', true);
+  test_query('(not (unknown))', false);
   test_query('(not unknown(width))', false);
 
   // "and" in <container-query>:
-  test_query('(size(width) and size(width))', true);
-  test_query('(size(width) and size(width) and size(width))', true);
-  test_query('(size(height) and size(height))', false);
-  test_query('(size(height) and size(width) and size(width))', false);
-  test_query('(size(width) and size(height) and size(width))', false);
-  test_query('(size(width) and size(width) and size(height))', false);
-  test_query('(size(unknown) and size(width) and size(width))', false);
-  test_query('(size(width) and size(unknown) and size(width))', false);
-  test_query('(size(width) and size(width) and size(unknown))', false);
+  test_query('((width) and (width))', true);
+  test_query('((width) and (width) and (width))', true);
+  test_query('((height) and (height))', false);
+  test_query('((height) and (width) and (width))', false);
+  test_query('((width) and (height) and (width))', false);
+  test_query('((width) and (width) and (height))', false);
+  test_query('((unknown) and (width) and (width))', false);
+  test_query('((width) and (unknown) and (width))', false);
+  test_query('((width) and (width) and (unknown))', false);
 
   // "or" in <container-query>:
-  test_query('(size(width) or size(width))', true);
-  test_query('(size(width) or size(width) or size(width))', true);
-  test_query('(size(height) or size(height))', false);
-  test_query('(size(height) or size(width) or size(width))', true);
-  test_query('(size(width) or size(height) or size(width))', true);
-  test_query('(size(width) or size(width) or size(height))', true);
-  test_query('(size(unknown) or size(width) or size(width))', true);
-  test_query('(size(width) or size(unknown) or size(width))', true);
-  test_query('(size(width) or size(width) or size(unknown))', true);
-  test_query('(size(unknown) or size(height) or size(width))', true);
+  test_query('((width) or (width))', true);
+  test_query('((width) or (width) or (width))', true);
+  test_query('((height) or (height))', false);
+  test_query('((height) or (width) or (width))', true);
+  test_query('((width) or (height) or (width))', true);
+  test_query('((width) or (width) or (height))', true);
+  test_query('((unknown) or (width) or (width))', true);
+  test_query('((width) or (unknown) or (width))', true);
+  test_query('((width) or (width) or (unknown))', true);
+  test_query('((unknown) or (height) or (width))', true);
 
   // Combinations, <container-query>:
-  test_query('(not (size(width) and size(width)))', false);
-  test_query('(not (size(width) and size(height)))', true);
-  test_query('(size(width) and (not (size(height) or size(width))))', false);
-  test_query('(size(height) or (not (size(height) and size(width))))', true);
-  test_query('(size(height) or (size(height) and size(width)))', false);
+  test_query('(not ((width) and (width)))', false);
+  test_query('(not ((width) and (height)))', true);
+  test_query('((width) and (not ((height) or (width))))', false);
+  test_query('((height) or (not ((height) and (width))))', true);
+  test_query('((height) or ((height) and (width)))', false);
 
-  // Nesting in <size-query>:
-  test_query('size((width))', true);
-  test_query('size((height))', false);
-  test_query('size((unknown))', false);
-  test_query('unknown((width))', false);
+  // Note that the following assumes that elements are style containers by
+  // default [1], and that:
+  //
+  // - style(width: 1px) is a query that returns 'true', and
+  // - style(height: 2px) is a query that returns 'false'.
+  //
+  // [1] https://github.com/w3c/csswg-drafts/issues/7066
 
-  // "not" in <size-query>:
-  test_query('size(not (width))', false);
-  test_query('size(not (height))', true);
-  test_query('size(not (unknown))', false);
+  // Nesting in <style-query>:
+  test_query('style((width: 1px))', true);
+  test_query('style((height: 2px))', false);
+  test_query('style((unknown))', false);
+  test_query('unknown((width: 1px))', false);
 
-  // "and" in <size-query>:
-  test_query('size((width) and (width))', true);
-  test_query('size((width) and (width) and (width))', true);
-  test_query('size((height) and (height))', false);
-  test_query('size((height) and (width) and (width))', false);
-  test_query('size((width) and (height) and (width))', false);
-  test_query('size((width) and (width) and (height))', false);
-  test_query('size((unknown) and (width) and (width))', false);
-  test_query('size((width) and (unknown) and (width))', false);
-  test_query('size((width) and (width) and (unknown))', false);
+  // "not" in <style-query>:
+  test_query('style(not (width: 1px))', false);
+  test_query('style(not (height: 2px))', true);
+  test_query('style(not (unknown))', false);
 
-  // "or" in <size-query>:
-  test_query('size((width) or (width))', true);
-  test_query('size((width) or (width) or (width))', true);
-  test_query('size((height) or (height))', false);
-  test_query('size((height) or (width) or (width))', true);
-  test_query('size((width) or (height) or (width))', true);
-  test_query('size((width) or (width) or (height))', true);
-  test_query('size((unknown) or (width) or (width))', true);
-  test_query('size((width) or (unknown) or (width))', true);
-  test_query('size((width) or (width) or (unknown))', true);
-  test_query('size((unknown) or (height) or (width))', true);
+  // "and" in <style-query>:
+  test_query('style((width: 1px) and (width: 1px))', true);
+  test_query('style((width: 1px) and (width: 1px) and (width: 1px))', true);
+  test_query('style((height: 2px) and (height: 2px))', false);
+  test_query('style((height: 2px) and (width: 1px) and (width: 1px))', false);
+  test_query('style((width: 1px) and (height: 2px) and (width: 1px))', false);
+  test_query('style((width: 1px) and (width: 1px) and (height: 2px))', false);
+  test_query('style((unknown) and (width: 1px) and (width: 1px))', false);
+  test_query('style((width: 1px) and (unknown) and (width: 1px))', false);
+  test_query('style((width: 1px) and (width: 1px) and (unknown))', false);
 
-  // Combinations, <size-query>:
-  test_query('size(not ((width) and (width)))', false);
-  test_query('size(not ((width) and (height)))', true);
-  test_query('size((width) and (not ((height) or (width))))', false);
-  test_query('size((height) or (not ((height) and (width))))', true);
-  test_query('size((height) or ((height) and (width)))', false);
+  // "or" in <style-query>:
+  test_query('style((width: 1px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (width: 1px) or (width: 1px))', true);
+  test_query('style((height: 2px) or (height: 2px))', false);
+  test_query('style((height: 2px) or (width: 1px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (height: 2px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (width: 1px) or (height: 2px))', true);
+  test_query('style((unknown) or (width: 1px) or (width: 1px))', true);
+  test_query('style((width: 1px) or (unknown) or (width: 1px))', true);
+  test_query('style((width: 1px) or (width: 1px) or (unknown))', true);
+  test_query('style((unknown) or (height: 2px) or (width: 1px))', true);
+
+  // Combinations, <style-query>:
+  test_query('style(not ((width: 1px) and (width: 1px)))', false);
+  test_query('style(not ((width: 1px) and (height: 2px)))', true);
+  test_query('style((width: 1px) and (not ((height: 2px) or (width: 1px))))', false);
+  test_query('style((height: 2px) or (not ((height: 2px) and (width: 1px))))', true);
+  test_query('style((height: 2px) or ((height: 2px) and (width: 1px)))', false);
 
 </script>

diff --git a/css/css-contain/container-queries/reattach-container-with-dirty-child.html b/css/css-contain/container-queries/reattach-container-with-dirty-child.html
index 0cdf571..680d9ca 100644
--- a/css/css-contain/container-queries/reattach-container-with-dirty-child.html
+++ b/css/css-contain/container-queries/reattach-container-with-dirty-child.html

@@ -8,10 +8,10 @@
   #container {
     container-type: inline-size;
   }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     div { color: red }
   }
-  @container size(max-width: 150px) {
+  @container (max-width: 150px) {
     div { color: lime }
   }
 </style>

diff --git a/css/css-contain/container-queries/resize-while-content-visibility-hidden.html b/css/css-contain/container-queries/resize-while-content-visibility-hidden.html
index 4b8ae7d..a3658f7 100644
--- a/css/css-contain/container-queries/resize-while-content-visibility-hidden.html
+++ b/css/css-contain/container-queries/resize-while-content-visibility-hidden.html

@@ -26,7 +26,7 @@
 #container.wide { width: 500px; }
 .locked { content-visibility: hidden; }
 
-@container container size(min-width: 400px) { #child { background: green; } }
+@container container (min-width: 400px) { #child { background: green; } }
 </style>
 
 <div id=container>

diff --git a/css/css-contain/container-queries/size-container-no-principal-box.html b/css/css-contain/container-queries/size-container-no-principal-box.html
index cc409b4..a1b8759 100644
--- a/css/css-contain/container-queries/size-container-no-principal-box.html
+++ b/css/css-contain/container-queries/size-container-no-principal-box.html

@@ -16,10 +16,10 @@
     display: contents;
     container-type: inline-size;
   }
-  @container size(min-width: 0) {
+  @container (min-width: 0) {
     span { color: red; }
   }
-  @container size(min-width: 0) {
+  @container (min-width: 0) {
     #ref { color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/size-feature-evaluation.html b/css/css-contain/container-queries/size-feature-evaluation.html
index e558d83..600a266 100644
--- a/css/css-contain/container-queries/size-feature-evaluation.html
+++ b/css/css-contain/container-queries/size-feature-evaluation.html

@@ -53,39 +53,39 @@
     let logical_width = (cls == 'horizontal') ? 'inline' : 'block';
     let logical_height = (cls == 'horizontal') ? 'block' : 'inline';
 
-    test_evaluation(cls, 'size(width < 100px)', false);
-    test_evaluation(cls, 'size(width >= 100px)', true);
-    test_evaluation(cls, 'size(min-width: 100px)', true);
-    test_evaluation(cls, 'size(min-width: 101px)', false);
-    test_evaluation(cls, 'size(max-width: 100px)', true);
-    test_evaluation(cls, 'size(max-width: 99px)', false);
+    test_evaluation(cls, '(width < 100px)', false);
+    test_evaluation(cls, '(width >= 100px)', true);
+    test_evaluation(cls, '(min-width: 100px)', true);
+    test_evaluation(cls, '(min-width: 101px)', false);
+    test_evaluation(cls, '(max-width: 100px)', true);
+    test_evaluation(cls, '(max-width: 99px)', false);
 
-    test_evaluation(cls, 'size(height < 200px)', false);
-    test_evaluation(cls, 'size(height >= 200px)', true);
-    test_evaluation(cls, 'size(min-height: 200px)', true);
-    test_evaluation(cls, 'size(min-height: 201px)', false);
-    test_evaluation(cls, 'size(max-height: 200px)', true);
-    test_evaluation(cls, 'size(max-height: 199px)', false);
+    test_evaluation(cls, '(height < 200px)', false);
+    test_evaluation(cls, '(height >= 200px)', true);
+    test_evaluation(cls, '(min-height: 200px)', true);
+    test_evaluation(cls, '(min-height: 201px)', false);
+    test_evaluation(cls, '(max-height: 200px)', true);
+    test_evaluation(cls, '(max-height: 199px)', false);
 
-    test_evaluation(cls, `size(${logical_width}-size < 100px)`, false);
-    test_evaluation(cls, `size(${logical_width}-size >= 100px)`, true);
-    test_evaluation(cls, `size(min-${logical_width}-size: 100px)`, true);
-    test_evaluation(cls, `size(min-${logical_width}-size: 101px)`, false);
-    test_evaluation(cls, `size(max-${logical_width}-size: 100px)`, true);
-    test_evaluation(cls, `size(max-${logical_width}-size: 99px)`, false);
+    test_evaluation(cls, `(${logical_width}-size < 100px)`, false);
+    test_evaluation(cls, `(${logical_width}-size >= 100px)`, true);
+    test_evaluation(cls, `(min-${logical_width}-size: 100px)`, true);
+    test_evaluation(cls, `(min-${logical_width}-size: 101px)`, false);
+    test_evaluation(cls, `(max-${logical_width}-size: 100px)`, true);
+    test_evaluation(cls, `(max-${logical_width}-size: 99px)`, false);
 
-    test_evaluation(cls, `size(${logical_height}-size < 200px)`, false);
-    test_evaluation(cls, `size(${logical_height}-size >= 200px)`, true);
-    test_evaluation(cls, `size(min-${logical_height}-size: 200px)`, true);
-    test_evaluation(cls, `size(min-${logical_height}-size: 201px)`, false);
-    test_evaluation(cls, `size(max-${logical_height}-size: 200px)`, true);
-    test_evaluation(cls, `size(max-${logical_height}-size: 199px)`, false);
+    test_evaluation(cls, `(${logical_height}-size < 200px)`, false);
+    test_evaluation(cls, `(${logical_height}-size >= 200px)`, true);
+    test_evaluation(cls, `(min-${logical_height}-size: 200px)`, true);
+    test_evaluation(cls, `(min-${logical_height}-size: 201px)`, false);
+    test_evaluation(cls, `(max-${logical_height}-size: 200px)`, true);
+    test_evaluation(cls, `(max-${logical_height}-size: 199px)`, false);
 
-    test_evaluation(cls, 'size(orientation: landscape)', false);
-    test_evaluation(cls, 'size(orientation: portrait)', true);
+    test_evaluation(cls, '(orientation: landscape)', false);
+    test_evaluation(cls, '(orientation: portrait)', true);
 
-    test_evaluation(cls, 'size(aspect-ratio: 1/2)', true);
-    test_evaluation(cls, 'size(aspect-ratio: 2/1)', false);
+    test_evaluation(cls, '(aspect-ratio: 1/2)', true);
+    test_evaluation(cls, '(aspect-ratio: 2/1)', false);
   }
 
 </script>

diff --git a/css/css-contain/container-queries/style-change-in-container.html b/css/css-contain/container-queries/style-change-in-container.html
index 82a830c..443c5df 100644
--- a/css/css-contain/container-queries/style-change-in-container.html
+++ b/css/css-contain/container-queries/style-change-in-container.html

@@ -6,7 +6,7 @@
 <script src="support/cq-testcommon.js"></script>
 <style>
   #container { container-type: size; }
-  @container size(min-width: 1px) {
+  @container (min-width: 1px) {
     #content { color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/svg-foreignobject-no-size-container.html b/css/css-contain/container-queries/svg-foreignobject-no-size-container.html
index 4f021e7..9d23c85 100644
--- a/css/css-contain/container-queries/svg-foreignobject-no-size-container.html
+++ b/css/css-contain/container-queries/svg-foreignobject-no-size-container.html

@@ -9,7 +9,7 @@
     height: 100px;
     container-type: size;
   }
-  @container size(width = 100px) {
+  @container (width = 100px) {
     div { color: red; }
   }
 </style>

diff --git a/css/css-contain/container-queries/svg-g-no-size-container.html b/css/css-contain/container-queries/svg-g-no-size-container.html
index 78e289d..652a4e2 100644
--- a/css/css-contain/container-queries/svg-g-no-size-container.html
+++ b/css/css-contain/container-queries/svg-g-no-size-container.html

@@ -10,7 +10,7 @@
     container-type: size;
   }
 
-  @container size(width = 100px) {
+  @container (width = 100px) {
     text { color: red; }
   }
 </style>

diff --git a/css/css-contain/container-queries/svg-layout-root-crash.html b/css/css-contain/container-queries/svg-layout-root-crash.html
index 2162e5d..75a3839 100644
--- a/css/css-contain/container-queries/svg-layout-root-crash.html
+++ b/css/css-contain/container-queries/svg-layout-root-crash.html

@@ -8,7 +8,7 @@
       #container {
         container-type: inline-size;
       }
-      @container size(min-width: 300px) {
+      @container (min-width: 300px) {
         .hide { display: none; }
       }
     </style>

diff --git a/css/css-contain/container-queries/svg-root-size-container.html b/css/css-contain/container-queries/svg-root-size-container.html
index 87f0a06..9e8d092 100644
--- a/css/css-contain/container-queries/svg-root-size-container.html
+++ b/css/css-contain/container-queries/svg-root-size-container.html

@@ -10,7 +10,7 @@
     height: 100px;
     container-type: size;
   }
-  @container size(width = 100px) {
+  @container (width = 100px) {
     #div, #text { color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/table-in-columns-000-crash.html b/css/css-contain/container-queries/table-in-columns-000-crash.html
index 7961617..566a4eb 100644
--- a/css/css-contain/container-queries/table-in-columns-000-crash.html
+++ b/css/css-contain/container-queries/table-in-columns-000-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       display: table;
     }

diff --git a/css/css-contain/container-queries/table-in-columns-001-crash.html b/css/css-contain/container-queries/table-in-columns-001-crash.html
index 5756b34..4fab9de 100644
--- a/css/css-contain/container-queries/table-in-columns-001-crash.html
+++ b/css/css-contain/container-queries/table-in-columns-001-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 500px) {
+  @container (max-width: 500px) {
     #target {
       display: table;
     }

diff --git a/css/css-contain/container-queries/table-in-columns-002-crash.html b/css/css-contain/container-queries/table-in-columns-002-crash.html
index 4ae0208..4f0cdc0 100644
--- a/css/css-contain/container-queries/table-in-columns-002-crash.html
+++ b/css/css-contain/container-queries/table-in-columns-002-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 250px) {
+  @container (max-width: 250px) {
     #target {
       display: table;
     }

diff --git a/css/css-contain/container-queries/table-in-columns-003-crash.html b/css/css-contain/container-queries/table-in-columns-003-crash.html
index 0385ac7..436da59 100644
--- a/css/css-contain/container-queries/table-in-columns-003-crash.html
+++ b/css/css-contain/container-queries/table-in-columns-003-crash.html

@@ -2,7 +2,7 @@
 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1276898">
 <style>
-  @container size(max-width: 250px) {
+  @container (max-width: 250px) {
     #target {
       display: table;
     }

diff --git a/css/css-contain/container-queries/top-layer-dialog-backdrop.html b/css/css-contain/container-queries/top-layer-dialog-backdrop.html
index 20c78d5..2563516 100644
--- a/css/css-contain/container-queries/top-layer-dialog-backdrop.html
+++ b/css/css-contain/container-queries/top-layer-dialog-backdrop.html

@@ -5,7 +5,7 @@
 <style>
   html { background: green; }
   #container { container-type: inline-size; }
-  @container size(max-width: 200px) {
+  @container (max-width: 200px) {
     ::backdrop { display: none; }
     #dialog { visibility: hidden; }
   }

diff --git a/css/css-contain/container-queries/top-layer-dialog-container.html b/css/css-contain/container-queries/top-layer-dialog-container.html
index a61c35a..5627a6c 100644
--- a/css/css-contain/container-queries/top-layer-dialog-container.html
+++ b/css/css-contain/container-queries/top-layer-dialog-container.html

@@ -12,7 +12,7 @@
     border: none;
   }
   #child { color: red; }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #child { color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/top-layer-dialog.html b/css/css-contain/container-queries/top-layer-dialog.html
index 0983d49..9d18b18 100644
--- a/css/css-contain/container-queries/top-layer-dialog.html
+++ b/css/css-contain/container-queries/top-layer-dialog.html

@@ -11,10 +11,10 @@
   dialog {
     color: red;
   }
-  @container size(max-width: 200px) {
+  @container (max-width: 200px) {
     dialog { color: green; }
   }
-  @container size(max-width: 100px) {
+  @container (max-width: 100px) {
     dialog { color: lime; }
   }
 </style>

diff --git a/css/css-contain/container-queries/top-layer-nested-dialog.html b/css/css-contain/container-queries/top-layer-nested-dialog.html
index 5649ad4..1a6d573 100644
--- a/css/css-contain/container-queries/top-layer-nested-dialog.html
+++ b/css/css-contain/container-queries/top-layer-nested-dialog.html

@@ -8,10 +8,10 @@
   dialog { color: red; }
   #container { width: 100px; }
   #container, #outer { container-type: inline-size; }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #outer { width: 400px; color: lime; }
   }
-  @container size(min-width: 400px) {
+  @container (min-width: 400px) {
     #inner { color: green; }
   }
 </style>

diff --git a/css/css-contain/container-queries/transition-scrollbars.html b/css/css-contain/container-queries/transition-scrollbars.html
index 33734eb..60d82d2 100644
--- a/css/css-contain/container-queries/transition-scrollbars.html
+++ b/css/css-contain/container-queries/transition-scrollbars.html

@@ -19,14 +19,14 @@
   }
 
   /* Matches with or without a scrollbar: */
-  @container size(max-width: 100px) {
+  @container (max-width: 100px) {
     #target {
       background-color: blue;
     }
   }
 
   /* Matches only when there's a scrollbar: */
-  @container size(max-width: 99px) {
+  @container (max-width: 99px) {
     #target {
       background-color: green;
       font-size: 10px;

diff --git a/css/css-contain/container-queries/transition-style-change-event.html b/css/css-contain/container-queries/transition-style-change-event.html
index f10e58c..4cc1772 100644
--- a/css/css-contain/container-queries/transition-style-change-event.html
+++ b/css/css-contain/container-queries/transition-style-change-event.html

@@ -12,10 +12,10 @@
     width: 100px;
     color: green;
   }
-  @container size(min-width: 200px) {
+  @container (min-width: 200px) {
     #inner { color: red }
   }
-  @container size(min-width: 400px) {
+  @container (min-width: 400px) {
     #target {
       color: green;
       transition: color 1s step-start;

diff --git a/css/css-contain/container-queries/unsupported-axis.html b/css/css-contain/container-queries/unsupported-axis.html
index 9ab91f8..5a27a1e 100644
--- a/css/css-contain/container-queries/unsupported-axis.html
+++ b/css/css-contain/container-queries/unsupported-axis.html

@@ -24,19 +24,19 @@
 
 
 <style>
-  @container size(width > 0px) {
+  @container (width > 0px) {
     #target { --width:true; }
   }
 </style>
 <script>
   test(function(t) {
     assert_equals(getComputedStyle(target).getPropertyValue('--width'), 'true');
-  }, 'size(width > 0px)');
+  }, '(width > 0px)');
 </script>
 
 
 <style>
-  @container size(height > 0px) {
+  @container (height > 0px) {
     #target { --height:true; }
   }
 </style>
@@ -45,12 +45,12 @@
     // container-type:inline-size does not support queries along the block
     // axis.
     assert_equals(getComputedStyle(target).getPropertyValue('--height'), '');
-  }, 'size(height > 0px)');
+  }, '(height > 0px)');
 </script>
 
 
 <style>
-  @container size((height > 0px) or (width > 0px)) {
+  @container ((height > 0px) or (width > 0px)) {
     #target { --height-or-width:true; }
   }
 </style>
@@ -58,12 +58,12 @@
   test(function(t) {
     // (height > 0px) should evaluate to "unknown".
     assert_equals(getComputedStyle(target).getPropertyValue('--height-or-width'), 'true');
-  }, 'size((height > 0px) or (width > 0px))');
+  }, '((height > 0px) or (width > 0px))');
 </script>
 
 
 <style>
-  @container size((width > 0px) or (height > 0px)) {
+  @container ((width > 0px) or (height > 0px)) {
     #target { --width-or-height:true; }
   }
 </style>
@@ -71,11 +71,11 @@
   test(function(t) {
     // (height > 0px) should evaluate to "unknown".
     assert_equals(getComputedStyle(target).getPropertyValue('--width-or-height'), 'true');
-  }, 'size((width > 0px) or (height > 0px))');
+  }, '((width > 0px) or (height > 0px))');
 </script>
 
 <style>
-  @container size((orientation: landscape) or (width > 0px)) {
+  @container ((orientation: landscape) or (width > 0px)) {
     #target { --orientation-or-width:true; }
   }
 </style>
@@ -84,12 +84,12 @@
     // (orientation: landscape) depends on both axes, and should evaluate
     // to "unknown".
     assert_equals(getComputedStyle(target).getPropertyValue('--orientation-or-width'), 'true');
-  }, 'size((orientation: landscape) or (width > 0px))');
+  }, '((orientation: landscape) or (width > 0px))');
 </script>
 
 
 <style>
-  @container size((width > 0px) or (orientation: landscape)) {
+  @container ((width > 0px) or (orientation: landscape)) {
     #target { --width-or-orientation:true; }
   }
 </style>
@@ -98,24 +98,24 @@
     // (orientation: landscape) depends on both axes, and should evaluate
     // to "unknown".
     assert_equals(getComputedStyle(target).getPropertyValue('--width-or-orientation'), 'true');
-  }, 'size((width > 0px) or (orientation: landscape))');
+  }, '((width > 0px) or (orientation: landscape))');
 </script>
 
 
 <style>
-  @container size((height > 0px) or (orientation: landscape)) {
+  @container ((height > 0px) or (orientation: landscape)) {
     #target { --height-or-orientation:true; }
   }
 </style>
 <script>
   test(function(t) {
     assert_equals(getComputedStyle(target).getPropertyValue('--height-or-orientation'), '');
-  }, 'size((height > 0px) or (orientation: landscape))');
+  }, '((height > 0px) or (orientation: landscape))');
 </script>
 
 
 <style>
-  @container size((height > 0px) or (orientation: landscape)) {
+  @container ((height > 0px) or (orientation: landscape)) {
     #target { --height-or-orientation2:true; }
   }
 </style>
@@ -126,24 +126,24 @@
     t.add_cleanup(() => { target.style = ''; });
     target.style.contain = 'size';
     assert_equals(getComputedStyle(target).getPropertyValue('--height-or-orientation2'), '');
-  }, 'size((height > 0px) or (orientation: landscape)), with contain:size');
+  }, '((height > 0px) or (orientation: landscape)), with contain:size');
 </script>
 
 
 <style>
-  @container size(inline-size > 0px) {
+  @container (inline-size > 0px) {
     #target { --inline-size:true; }
   }
 </style>
 <script>
   test(function(t) {
     assert_equals(getComputedStyle(target).getPropertyValue('--inline-size'), 'true');
-  }, 'size(inline-size > 0px)');
+  }, '(inline-size > 0px)');
 </script>
 
 
 <style>
-  @container size(block-size > 0px) {
+  @container (block-size > 0px) {
     #target { --block-size:true; }
   }
 </style>
@@ -152,12 +152,12 @@
     // container-type:inline-size does not support queries along the block
     // axis.
     assert_equals(getComputedStyle(target).getPropertyValue('--block-size'), '');
-  }, 'size(block-size > 0px)');
+  }, '(block-size > 0px)');
 </script>
 
 
 <style>
-  @container size(block-size > 0px) {
+  @container (block-size > 0px) {
     #target { --block-size2:true; }
   }
 </style>
@@ -167,5 +167,5 @@
     t.add_cleanup(() => { target.style = ''; });
     target.style.writingMode = 'vertical-rl';
     assert_equals(getComputedStyle(target).getPropertyValue('--block-size2'), '');
-  }, 'size(block-size > 0px), with writing-mode:vertical-rl');
+  }, '(block-size > 0px), with writing-mode:vertical-rl');
 </script>

diff --git a/css/css-contain/container-queries/viewport-units-dynamic.html b/css/css-contain/container-queries/viewport-units-dynamic.html
index 092c4e4..2339533 100644
--- a/css/css-contain/container-queries/viewport-units-dynamic.html
+++ b/css/css-contain/container-queries/viewport-units-dynamic.html

@@ -17,16 +17,16 @@
       width: 100px;
     }
 
-    @container size(min-width: 50vw) {
+    @container (min-width: 50vw) {
       #vw span { color: green }
     }
-    @container size(min-width: 100vw) {
+    @container (min-width: 100vw) {
       #vw span { color: red }
     }
-    @container size(min-width: 50vh) {
+    @container (min-width: 50vh) {
       #vh span { color: green }
     }
-    @container size(min-width: 100vh) {
+    @container (min-width: 100vh) {
       #vh span { color: red }
     }
   </style>

diff --git a/css/css-contain/container-queries/viewport-units.html b/css/css-contain/container-queries/viewport-units.html
index 6854625..9b8bb42 100644
--- a/css/css-contain/container-queries/viewport-units.html
+++ b/css/css-contain/container-queries/viewport-units.html

@@ -8,16 +8,16 @@
   #vw { container-type: inline-size; width: 10vw; }
   #vh { container-type: inline-size; width: 10vh; }
 
-  @container size(min-width: 10vw) {
+  @container (min-width: 10vw) {
     #vw span { color: green }
   }
-  @container size(min-width: 11vw) {
+  @container (min-width: 11vw) {
     #vw span { color: red }
   }
-  @container size(min-width: 10vh) {
+  @container (min-width: 10vh) {
     #vh span { color: green }
   }
-  @container size(min-width: 11vh) {
+  @container (min-width: 11vh) {
     #vh span { color: red }
   }
 </style>

diff --git a/css/css-contain/container-queries/whitespace-update-after-removal.html b/css/css-contain/container-queries/whitespace-update-after-removal.html
index de07f06..8bfcd6d 100644
--- a/css/css-contain/container-queries/whitespace-update-after-removal.html
+++ b/css/css-contain/container-queries/whitespace-update-after-removal.html

@@ -9,7 +9,7 @@
     height: 200px;
   }
 
-  @container size(min-width: 400px) {
+  @container (min-width: 400px) {
     span { color: red; }
   }
 </style>
commit	5a7fbefd466d9d8e979ae5c93993ed3f2a99874c	[log] [tgz]
author	Anders Hartvoll Ruud <andruud@chromium.org>	Mon Mar 07 18:48:54 2022
committer	Blink WPT Bot <blink-w3c-test-autoroller@chromium.org>	Mon Mar 07 19:02:42 2022
tree	3acf15a1c7ca08267787e5ccf7d586934c427665
parent	840ff66cc88af5f263056f396135bcdd55936567 [diff]