Bug 1790886 - Fix container query WPT tests to reflect recent WG reso…

…lution. r=jwatt As per CSSWG resolution in: w3c/csswg-drafts#5984 (comment) Differential Revision: https://phabricator.services.mozilla.com/D212412
ErichDonGubler · Jun 3, 2024 · c1df9db · c1df9db
1 parent c8653c3
commit c1df9db
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 49 deletions.
diff --git a/...ing/web-platform/meta/css/css-contain/container-queries/container-for-shadow-dom.html.ini b/...ing/web-platform/meta/css/css-contain/container-queries/container-for-shadow-dom.html.ini
diff --git a/...atform/meta/css/css-contain/container-queries/container-size-shadow-invalidation.html.ini b/...atform/meta/css/css-contain/container-queries/container-size-shadow-invalidation.html.ini
diff --git a/testing/web-platform/meta/css/css-contain/container-queries/container-units-shadow.html.ini b/testing/web-platform/meta/css/css-contain/container-queries/container-units-shadow.html.ini
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html b/testing/web-platform/tests/css/css-contain/container-queries/container-for-shadow-dom.html
@@ -49,7 +49,7 @@
       </div>
     </template>
     <style>
-      @container (width = 400px) {
+      @container (width = 200px) {
         #t2 { color: green; }
       }
     </style>
@@ -102,7 +102,7 @@
       </div>
     </template>
     <style>
-      @container (width = 400px) {
+      @container (width = 200px) {
         #inclusive-ancestor-part > div::part(part) { color: green; }
       }
     </style>
@@ -118,7 +118,7 @@
           width: 200px;
           container-type: inline-size;
         }
-        @container (width = 200px) {
+        @container (width = 400px) {
           ::slotted(#t6)::before {
             content: "X";
             color: green;
@@ -158,7 +158,7 @@
 
 <div id="inclusive-ancestor-part-before">
   <style>
-    @container (width = 400px) {
+    @container (width = 200px) {
       #inclusive-ancestor-part-before > div::part(part)::before {
         content: "X";
         color: green;
@@ -182,7 +182,7 @@
 
 <div id="inclusive-ancestor-inner-part">
   <style>
-    @container (width = 400px) {
+    @container (width = 200px) {
       #inclusive-ancestor-inner-part > div::part(inner-part) { color: green; }
     }
   </style>
@@ -236,15 +236,15 @@
           width: 200px;
           container-type: inline-size;
         }
-        #t11 { color: green; }
+        #t11 { color: red; }
       </style>
       <div>
         <span id="t11" part="part"></span>
       </div>
     </template>
     <style>
       @container (width = 200px) {
-        #no-container-for-part > div::part(part) { color: red; }
+        #no-container-for-part > div::part(part) { color: green; }
       }
     </style>
   </div>
@@ -258,7 +258,7 @@
           width: 200px;
           container-type: inline-size;
         }
-        @container (width = 400px) {
+        @container (width = 200px) {
           :host::part(part) { color: green; }
         }
       </style>
@@ -286,7 +286,7 @@
   test(() => {
     const t2 = document.querySelector("#t2");
     assert_equals(getComputedStyle(t2).color, green);
-  }, "Match container in same tree, not walking flat tree ancestors");
+  }, "Match container in walking flat tree ancestors");
 
   test(() => {
     const t3 = document.querySelector("#t3");

diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html b/testing/web-platform/tests/css/css-contain/container-queries/container-units-shadow.html
@@ -51,13 +51,13 @@
 
   test(() => {
     let cs = getComputedStyle(direct);
-    assert_equals(cs.width, '100px');
-    assert_equals(cs.height, '100px');
-  }, 'Direct slotted child queries shadow-including ancestors');
+    assert_equals(cs.width, '15px');
+    assert_equals(cs.height, '15px');
+  }, 'Direct slotted child queries flat tree');
 
   test(() => {
     let cs = getComputedStyle(nondirect);
-    assert_equals(cs.width, '10px'); // #direct
-    assert_equals(cs.height, '20px'); // #outer
-  }, 'Nondirect slotted child queries shadow-including ancestors');
+    assert_equals(cs.width, '1.5px');
+    assert_equals(cs.height, '3px');
+  }, 'Nondirect slotted child queries flat tree ancestors');
 </script>