[css-contain-3] Allow var() references inside container size queries #8088

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -767,11 +767,16 @@ Size Container Features</h3>
 
 	[=Relative length=] units
 	(including [=container query length=] units)
+	and [=custom properties=]
 	in [=container query=] conditions
 	are evaluated based on the the [=computed values=] of the [=query container=].
 
 	Note: This is different from the handling of relative units in [=media queries=].
 
+	Note: If [=custom property=] substitution results in an invalid value for the
+	[=size feature=], it is handled the same as other invalid feature values,
+	and the result of the [=size feature=] is ''unknown''.
+
 	<div class=example>
 		For example, [=query containers=] with different font-sizes
 		will evaluate ''em''-based queries relative to their own font sizes:
@@ -799,6 +804,33 @@ Size Container Features</h3>
 			the query condition will be true above ''960px''.
 	</div>
 
+	<div class=example>
+		Similarly, [=query containers=] will evaluate ''var()''-based queries
+		relative to their own [=computed value=] of the [=custom property=]:
+
+		<pre class=lang-css>
+		aside, main {
+		  container-type: inline-size;
+		}
+
+		aside { --query: 300px; }
+		main { --query: 500px; }
+
+		@container (width > var(--query)) {
+		  h2 { font-size: 1.5em; }
+		}
+		</pre>
+
+		The ''var(--query)'' value used in the query condition
+		is substituted with the [=computed value=] of
+		the ''--query'' [=custom property=] on the relevant [=query container=]:
+
+		* For any ''h2'' inside ''aside'',
+			the query condition will be true above ''300px''.
+		* For any ''h2'' inside ''main'',
+			the query condition will be true above ''500px''.
+	</div>
+
 <h4 id="width">
 Width: the '@container/width' feature</h4>
 
@@ -1128,6 +1160,8 @@ Changes since the 18 August 2022 Working Draft</h3>
 		(<a href="https://github.com/w3c/csswg-drafts/issues/7669">Issue 7669</a>)
 	* Make the 'content-visibility' property animatable.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/8627">Issue 8627</a>)
+	* Allow ''var()'' references in [=container size queries=].
+		(<a href="https://github.com/w3c/csswg-drafts/issues/8088">Issue 8088</a>)
 
 <h3 id="changes-2021-12">
 Changes since the 21 December 2021 First Public Working Draft</h3>