Implement name only container queries

frehner · Ahmad Saleem · commit 6b8d8d4d09fe · 2025-12-12T16:35:44.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=302433 Reviewed by Antti Koivisto. Allows parsing of Container Queries where the query is empty but there is a name. Then allows the Evaluator to match a container when there aren't conditions and there is a name. * LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/container-queries/at-container-parsing-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/container-queries/query-container-name-expected.txt: * Source/WebCore/css/query/ContainerQueryParser.cpp: (WebCore::CQ::ContainerQueryParser::consumeContainerQuery): * Source/WebCore/style/ContainerQueryEvaluator.cpp: (WebCore::Style::ContainerQueryEvaluator::evaluate const): Canonical link: https://commits.webkit.org/304388@main
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/container-queries/at-container-parsing-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/container-queries/at-container-parsing-expected.txt
@@ -83,8 +83,8 @@ PASS @container rule should be valid: @container not (width <= 500px) {} {}
 FAIL @container rule should be valid: @container (width: 100px), (height: 100px) {} {} assert_equals: expected 1 but got 0
 FAIL @container rule should be valid: @container (width),(height)  , (inline-size > 20px) {} {} assert_equals: expected 1 but got 0
 FAIL @container rule should be valid: @container (width), name (height) {} {} assert_equals: expected 1 but got 0
-FAIL @container rule should be valid: @container --foo {} {} assert_equals: expected 1 but got 0
-FAIL @container rule should be valid: @container container {} {} assert_equals: expected 1 but got 0
+PASS @container rule should be valid: @container --foo {} {}
+PASS @container rule should be valid: @container container {} {}
 FAIL @container rule should be valid: @container container, container2 {} {} assert_equals: expected 1 but got 0
 PASS @container rule should be invalid: @container  {} {}
 PASS @container rule should be invalid: @container (width), {} {}
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/container-queries/query-container-name-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-conditional/container-queries/query-container-name-expected.txt
@@ -1,5 +1,5 @@
 
-FAIL match closest named container assert_equals: expected "yes" but got "no"
-FAIL match ancestor named container assert_equals: expected "yes" but got "no"
+PASS match closest named container
+PASS match ancestor named container
 PASS no match for unused container name
 
diff --git a/Source/WebCore/css/query/ContainerQueryParser.cpp b/Source/WebCore/css/query/ContainerQueryParser.cpp
@@ -52,8 +52,13 @@ std::optional<ContainerQuery> ContainerQueryParser::consumeContainerQuery(CSSPar
     auto name = consumeName();
 
     auto condition = consumeCondition(range, context);
-    if (!condition)
-        return { };
+
+    if (!condition) {
+        if (name.isEmpty())
+            return { };
+        // it's valid to have a named container query without a condition, like "@container --name {}"
+        condition = MQ::Condition { };
+    }
 
     OptionSet<Axis> requiredAxes;
     auto containsUnknownFeature = ContainsUnknownFeature::No;
diff --git a/Source/WebCore/style/ContainerQueryEvaluator.cpp b/Source/WebCore/style/ContainerQueryEvaluator.cpp
@@ -57,6 +57,9 @@ bool ContainerQueryEvaluator::evaluate(const CQ::ContainerQuery& containerQuery)
     if (!context)
         return false;
 
+    if (containerQuery.condition.queries.isEmpty() && !containerQuery.name.isEmpty())
+        return true;
+
     return evaluateCondition(containerQuery.condition, *context) == MQ::EvaluationResult::True;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -57,6 +57,9 @@ bool ContainerQueryEvaluator::evaluate(const CQ::ContainerQuery& containerQuery)`
`57`	`57`	`if (!context)`
`58`	`58`	`return false;`
`59`	`59`
	`60`	`+ if (containerQuery.condition.queries.isEmpty() && !containerQuery.name.isEmpty())`
	`61`	`+ return true;`
	`62`	`+`
`60`	`63`	`return evaluateCondition(containerQuery.condition, *context) == MQ::EvaluationResult::True;`
`61`	`64`	`}`
`62`	`65`