Make container-name not tree-scoped behind a flag

lilles · chromium-wpt-export-bot · commit a16c8bf8dfe6 · 2025-09-04T02:49:05.000-07:00
Per spec resolution: w3c/csswg-drafts#12090 (comment) Not changing container-for-shadow-dom.html in this CL because there is an upstream PR in progress: #54612 Bug: 440049800 Change-Id: I8b463d798b6132b0bf8932b8152682959907af26 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6909530 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1510774}
diff --git a/css/css-conditional/container-queries/container-name-tree-scoped.html b/css/css-conditional/container-queries/container-name-tree-scoped.html
@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>CSS Container Queries Test: Tree scoped container-name</title>
+<title>CSS Container Queries Test: Container names are not tree-scoped</title>
 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#query-container">
 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names">
 <script src="/resources/testharness.js"></script>
@@ -21,9 +21,9 @@
     #container-name-host > div {
       container-type: inline-size;
     }
-    #t1 { color: green; }
+    #t1 { color: red; }
     @container foo (width > 0px) {
-      #t1 { color: red; }
+      #t1 { color: green; }
     }
   </style>
 </div>
@@ -46,9 +46,9 @@
     #container-name-slotted > div > div {
       container-type: inline-size;
     }
-    #t2 { color: green; }
+    #t2 { color: red; }
     @container foo (width > 0px) {
-      #t2 { color: red; }
+      #t2 { color: green; }
     }
   </style>
 
@@ -95,11 +95,11 @@
 
   test(() => {
     assert_equals(getComputedStyle(t1).color, green);
-  }, "Outer scope query should not match container-name set by :host rule in shadow tree");
+  }, "Outer scope query should match container-name set by :host rule in shadow tree");
 
   test(() => {
     assert_equals(getComputedStyle(t2).color, green);
-  }, "Outer scope query should not match container-name set by ::slotted rule in shadow tree");
+  }, "Outer scope query should match container-name set by ::slotted rule in shadow tree");
 
   test(() => {
     assert_equals(getComputedStyle(t3host.shadowRoot.querySelector('#t3')).color, green);
diff --git a/css/css-mixins/function-shadow-container.html b/css/css-mixins/function-shadow-container.html
@@ -28,7 +28,7 @@
   </template>
 </div>
 
-<div data-name="::part() can not see inner named containers">
+<div data-name="::part() can see inner named containers">
   <template shadowrootmode=open>
     <style>
       @function --b() {
@@ -41,7 +41,7 @@
       }
       ::part(target) {
         --actual: --b();
-        --expected: 10px;
+        --expected: 5px;
       }
       .container {
         container: --cont / size;
@@ -104,7 +104,7 @@
           }
           ::slotted(#target) {
             --actual: --b() --c();
-            --expected: 10px 5px;
+            --expected: 5px 5px;
           }
         </style>
         <div class=container>

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`</template>`
`29`	`29`	`</div>`
`30`	`30`
`31`		`-<div data-name="::part() can not see inner named containers">`
	`31`	`+<div data-name="::part() can see inner named containers">`
`32`	`32`	`<template shadowrootmode=open>`
`33`	`33`	`<style>`
`34`	`34`	`@function --b() {`
`@@ -41,7 +41,7 @@`
`41`	`41`	`}`
`42`	`42`	`::part(target) {`
`43`	`43`	`--actual: --b();`
`44`		`- --expected: 10px;`
	`44`	`+ --expected: 5px;`
`45`	`45`	`}`
`46`	`46`	`.container {`
`47`	`47`	`container: --cont / size;`
`@@ -104,7 +104,7 @@`
`104`	`104`	`}`
`105`	`105`	`::slotted(#target) {`
`106`	`106`	`--actual: --b() --c();`
`107`		`- --expected: 10px 5px;`
	`107`	`+ --expected: 5px 5px;`
`108`	`108`	`}`
`109`	`109`	`</style>`
`110`	`110`	`<div class=container>`