[css-conditional-5] Extend CSSContainerRule for multiple conditions.

Return an empty string for multiple conditions as per resolution.

Fixes #10845

Author: emilio

css-conditional-5/Overview.bs

@@ -1464,7 +1464,7 @@ Style Container Features</h3>
 	The <dfn><<style-feature-name>></dfn> can be either a [=supported CSS property=]
 	or a valid <<custom-property-name>>.
 	The <dfn><<style-feature-value>></dfn> production matches any valid <<declaration-value>>
-	as long as it doesn't contain <<mf-lt>>, <<mf-gt>> and <<mf-eq>> tokens. 
+	as long as it doesn't contain <<mf-lt>>, <<mf-gt>> and <<mf-eq>> tokens.
 
 	<wpt>
 		container-queries/style-query-registered-custom-rem-change.html
@@ -1970,13 +1970,23 @@ The <code>CSSContainerRule</code> interface</h3>
 	The {{CSSContainerRule}} interface represents an ''@container'' rule.
 
 	<pre class='idl'>
+	dictionary CSSContainerCondition {
+	  required CSSOMString name;
+	  required CSSOMString query;
+	};
+
 	[Exposed=Window]
 	interface CSSContainerRule : CSSConditionRule {
 		readonly attribute CSSOMString containerName;
 		readonly attribute CSSOMString containerQuery;
+		readonly attribute FrozenArray&lt;CSSContainerCondition> conditions;
 	};
 	</pre>
 
+	Issue: We should try to remove {{CSSContainerRule/containerName}} and
+	{{CSSContainerRule/containerQuery}}, since they don't deal with multiple
+	conditions correctly.
+
 	<wpt>
 		container-queries/container-rule-cssom.html
 	</wpt>
@@ -1986,39 +1996,67 @@ The <code>CSSContainerRule</code> interface</h3>
 		<dd>The <code>conditionText</code> attribute (defined on the <code>CSSConditionRule</code> parent rule),
 			on getting, must return a value as follows:
 
-			<dl class="switch">
-				<dt data-md>The ''@container'' rule has an associated <<container-name>>
-				<dd data-md>The result of getting the <code>containerName</code> and
-					<code>containerQuery</code> attributes, joined by a single whitespace.
-				<dt data-md>Otherwise
-				<dd data-md>The result of getting the <code>containerQuery</code> attribute.
-			</dl>
+			<div algorithm="CSSContainerRule.conditionText">
+				1. Let |conditions| be the result of getting the {{CSSContainerRule/conditions}} attribute.
+				1. Let |first| be <code>true</code>.
+				1. Let |result| be the empty string.
+				1. [=list/For each=] |condition| in |conditions|:
+					1. If |first| is <code>false</code>, append <code>", "</code> to |result|.
+					1. Set |first| to <code>false</code>.
+					1. If |condition|'s {{CSSContainerCondition/name}} is not empty:
+						1. Append |condition|'s {{CSSContainerCondition/name}} to |result|.
+						1. If |condition|'s {{CSSContainerCondition/query}} is not empty,
+							 append a single space to |result|.
+					1. Append |condition|'s {{CSSContainerCondition/query}} to |result|.
+				1. Return |result|
+			</div>
 
 		<dt><code>containerName</code> of type <code>CSSOMString</code>
 		<dd>The <code>containerName</code> attribute, on getting, must return a value as follows:
-
-			<dl class="switch">
-				<dt data-md>The ''@container'' rule has an associated <<container-name>>
-				<dd data-md>The result of serializing that <<container-name>>.
-				<dt data-md>Otherwise
-				<dd data-md>An empty string.
-			</dl>
+			<div algorithm="CSSContainerRule.containerName">
+				1. Let |conditions| be the result of getting the {{CSSContainerRule/conditions}} attribute.
+				1. If the length of |conditions| is 1:
+					1. Return the only |condition|'s {{CSSContainerCondition/name}}.
+				1. return <code>""</code>.
+			</div>
 
 		<dt><code>containerQuery</code> of type <code>CSSOMString</code>
 		<dd>The <code>containerQuery</code> attribute,
-			on getting, must return the <<container-query>> that was specified,
-			without any logical simplifications,
-			so that the returned query will evaluate to the same result
-			as the specified query
-			in any conformant implementation of this specification
-			(including implementations that implement future extensions
-			allowed by the <<general-enclosed>> extensibility mechanism in this specification).
-			In other words,
-			token stream simplifications are allowed
-			(such as reducing whitespace to a single space
-			or omitting it in cases where it is known to be optional),
-			but logical simplifications (such as removal of unneeded parentheses,
-			or simplification based on evaluating results) are not allowed.
+			on getting, must return a value as follows:
+			<div algorithm="CSSContainerRule.containerQuery">
+				1. Let |conditions| be the result of getting the {{CSSContainerRule/conditions}} attribute.
+				1. If the length of |conditions| is 1:
+					1. Return the only |condition|'s {{CSSContainerCondition/query}}.
+				1. Return <code>""</code>.
+			</div>
+
+		<dt><code>conditions</code> of type <code>FrozenArray&lt;CSSContainerCondition?></code>
+		<dd>The <code>conditions</code> attribute, on getting,
+			must return a value as follows:
+			<div algorithm="CSSContainerRule.conditions">
+				1. Let |result| be an empty [=list=].
+				1. [=list/For each=] <<container-condition>> |condition| specified in the rule:
+					1. Let |dict| be a new {{CSSContainerCondition}} with
+						 {{CSSContainerCondition/name}} set to the
+						 <a lt="serialize an identifier">serialized</a> <<container-name>>
+						 of |condition| if specified, or <code>""</code> otherwise,
+						 and {{CSSContainerCondition/query}} set to the
+						 <<container-query>> specified in |condition|
+						 without any logical simplifications,
+						 so that the returned query will evaluate to the same result
+						 as the specified query
+						 in any conformant implementation of this specification
+						 (including implementations that implement future extensions
+						 allowed by the <<general-enclosed>> extensibility mechanism in this specification).
+						 In other words,
+						 token stream simplifications are allowed
+						 (such as reducing whitespace to a single space
+						 or omitting it in cases where it is known to be optional),
+						 but logical simplifications (such as removal of unneeded parentheses,
+						 or simplification based on evaluating results) are not allowed.
+					1. [=list/Append=] |dict| to |result|.
+				1. Return |result|.
+			</div>
 	</dl>
 
 	Issue(6205): Container Queries should have a <code>matchContainer</code> method.
@@ -2116,7 +2154,7 @@ Changes since the <a href="https://www.w3.org/TR/2024/WD-css-conditional-5-20241
 	<li>Added axis keywords for overflowing
 		(<a href="https://github.com/w3c/csswg-drafts/issues/11183">#11183</a>)
 	</li>
-	<li>Renamed overflowing to scrollable 
+	<li>Renamed overflowing to scrollable
 		(<a href="https://github.com/w3c/csswg-drafts/issues/11182">#11182</a>)</li>
 	<li>Made <<container-query>> optional
 		(<a href="https://github.com/w3c/csswg-drafts/issues/9192#issuecomment-1789850349">#9192</a>)