[css-contain-3] Incorporate style queries.

* Add style() function for querying computed style.
* Switch size queries to use explicit size() function.
* Reference @supports boolean grammar instead of @media (no commas).
* Fix various grammar errors.
* Rename dimensional queries to size queries (for consistency).
* Improvements to spec prose (precision and organization).

Author: fantasai

css-contain-3/Overview.bs

@@ -189,23 +189,23 @@ Creating Query Containers: the 'container-type' property</h2>
 	<dl dfn-type=value dfn-for=container-type>
 		<dt><dfn>size</dfn>
 		<dd>
-			Establishes a [=query container=] for [=dimensional queries=]
+			Establishes a [=query container=] for [=size queries=]
 			on both the [=inline axis|inline=] and [=block axis=].
 			Applies [=layout containment=],
 			[=style containment=],
 			and [=size containment=]
 			to the [=principal box=].
 		<dt><dfn>inline-size</dfn>
 		<dd>
-			Establishes a [=query container=] for [=dimensional queries=]
+			Establishes a [=query container=] for [=size queries=]
 			on the container’s own [=inline axis=].
 			Applies [=layout containment=],
 			[=style containment=],
 			and [=inline-size containment=]
 			to the [=principal box=].
 		<dt><dfn>block-size</dfn>
 		<dd>
-			Establishes a [=query container=] for [=dimensional queries=]
+			Establishes a [=query container=] for [=size queries=]
 			on the container’s own [=block axis=].
 			Applies [=layout containment=],
 			[=style containment=],
@@ -371,41 +371,64 @@ Creating Named Containers: the 'container' shorthand</h2>
 Container Queries: the ''@container'' rule</h2>
 
 	The <dfn at-rule id="at-ruledef-container">@container</dfn> rule
-	is a [=conditional group rule=] whose condition is a [=container query=].
+	is a [=conditional group rule=] whose condition is
+	a <dfn export>container query</dfn>,
+	which is a boolean combination of [=size queries=] and/or [=style queries=].
+	Style declarations within the <<stylesheet>> block of an ''@container'' rule
+	are [[css-cascade-4#filtering|filtered]] by its condition
+	to only match when the [=container query=]
+	is true for their element’s [=query container=].
+
 
 	The syntax of the ''@container'' rule is:
 
 	<pre class="prod def">
-	@container <<container-name>> | [ name(<<container-name>>) || type(<<container-type>>+) ]? <<container-query-list>> {
-	  <<stylesheet>>
+	@container
+	  [ <<container-name>> | [ name(<<container-name>>) || type(<<container-type>>+) ] ]?
+	  <<container-query>> {
+	    <<stylesheet>>
 	}
 	</pre>
 
-	The <dfn>&lt;container-query-list></dfn> represents the <dfn export>container query</dfn>
-	and has the same syntax, parsing, and boolean interpretation as
-	<<media-condition>> in [[MEDIAQUERIES-4]],
-	but with [=container features=] instead of [=media features=].
+	where:
+
+	<pre class="prod def">
+	<dfn><<container-condition>></dfn> = not <<container-query>>
+	                      | <<container-query>> [ and <<container-query>> ]*
+	                      | <<container-query>> [ or <<container-query>> ]*
+	<dfn><<container-query>></dfn>     = ( <<container-condition>> )
+	                      | size( <<size-query>> )
+	                      | style( <<style-query>> )
+
+	<dfn><<size-query>></dfn>     = <<size-feature>> | <<size-condition>>
+	<dfn><<size-condition>></dfn> = not ( <<size-query>> )
+	                 | ( <<size-query>> ) [ and ( <<size-query>> ) ]*
+	                 | ( <<size-query>> ) [ or  ( <<size-query>> ) ]*
+
+	<dfn><<style-query>></dfn>     = <<style-feature>> | <<style-condition>>
+	<dfn><<style-condition>></dfn> = not ( <<style-query>> )
+	                  | ( <<style-query>> ) [ and ( <<style-query>> ) ]*
+	                  | ( <<style-query>> ) [ or  ( <<style-query>> ) ]*
+	</pre>
 
-	Styles in the <<stylesheet>> block of the ''@container'' rule
-	are [[css-cascade-4#filtering|filtered]] by its condition
-	to only match when the [=container query=]
-	is true for the element’s [=query container=].
 
 	For each element,
 	the [=query container=] to be queried
-	is selected from the element’s ancestor [=query containers=].
+	is selected from among the element’s ancestor [=query containers=].
 	The optional <dfn><<container-name>></dfn>
 	filters the set of [=query containers=] considered
 	to just those with a matching [=query container name=],
 	and the optional <dfn><<container-type>></dfn>
-	filters the set to just those with matching 'container-type's.
+	filters the set to just those with a matching 'container-type'.
 	The nearest remaining [=query container=] ancestor is selected.
 
-	Note: A [=query container=] with a 'container-type' of ''container-type/size''
-	is a match for both ''container-type/inline-size'' and ''container-type/block-size''
-	<<container-type>>s.
+	ISSUE: Should the UA automatically filter to the nearest compatible query container
+	if no specific type is provided?
+
+	ISSUE(6393): Do we like this syntax for querying specific container types?
 
-	Issue(6393): Provide a syntax to query a specific container-type
+	A [=query container=] with a 'container-type' of ''container-type/size''
+	is a match for both ''container-type/inline-size'' and ''container-type/block-size''.
 
 	Once an eligible [=query container=] has been selected for an element,
 	each [=container feature=] in the <<container-query-list>>
@@ -431,33 +454,41 @@ Container Queries: the ''@container'' rule</h2>
 	</div>
 
 	Style rules defined on an element inside multiple nested [=container queries=]
-	apply when all of the wrapping [=container queries=] are ''true'' for that element.
+	apply when all of the wrapping [=container queries=] are true for that element.
 
-	Note: Nested [=container queries=] may evaluate in relation to different containers,
-	so it is not possible to merge the individual <<container-query-list>>s
+	Note: Nested [=container queries=] can evaluate in relation to different containers,
+	so it is not always possible to merge the individual <<container-query-list>>s
 	into a single query.
 
 <h2 id="container-features">
 Container Features</h2>
 
 	A <dfn export>container feature</dfn>
 	queries a specific aspect of a [=query container=].
-	Its syntax is the same as for a [=media feature=]:
-	a feature name, a comparator, and a value, all wrapped in parentheses.
-	[[mediaqueries-5]]
 
 	Issue(5989): What container features can be queried?
 
-<h3 id="dimensional-container">
-Dimensional Container Features</h3>
+<h3 id="size-container">
+Size Container Features</h3>
 
-	<dfn export>Dimensional queries</dfn> allow querying
+	A <dfn export>size query</dfn>
+	(syntactically represented as <<size-query>>)
+	allows querying
 	the size of the [=query container=]’s [=principal box=].
+	It is a boolean combination of
+	individual <dfn>size features</dfn> (<<size-feature>>)
+	that each query a single, specific dimensional feature of the [=query container=].
+	The syntax of a <dfn><<size-feature>></dfn> is the same as for a [=media feature=]:
+	a feature name, a comparator, and a value.
+	[[mediaqueries-5]]
+	The boolean syntax and logic combining [=size features=] into a <<size-query>>
+	is the same as for [=feature queries=].
+	(See ''@supports''. [[!CSS-CONDITIONAL-3]])
 
 	If the [=query container=] does not have a [=principal box=],
 	or the principal box is not a [=layout containment box=],
-	or the [=query container=] does not support [=dimensional queries=] on the relevant axes,
-	then the result of evaluating any dimensional container feature is ''unknown''.
+	or the [=query container=] does not support [=size queries=] on the relevant axes,
+	then the result of evaluating the [=size feature=] is unknown.
 
 	[=Relative length=] units in [=container query=] conditions
 	are evaluated based on the the [=computed values=] of the [=query container=].
@@ -591,10 +622,26 @@ Orientation: the '@container/orientation' feature</h4>
 <h3 id="style-container">
 Style Container Features</h3>
 
-	<dfn export>Style queries</dfn> allow querying
+	A <dfn export>style queries</dfn>
+	(syntactically represented by <<style-query>>)
+	allows querying
 	the [=computed values=] of the [=query container=].
-
-	Issue(6396): Define a syntax for style-based container queries
+	It is a boolean combination of
+	individual <dfn>style features</dfn> (<<style-feature>>)
+	that each query a single, specific property of the [=query container=].
+	The syntax of a <dfn><<style-feature>></dfn> is the same as for a [=declaration=]
+	[[!CSS-SYNTAX-3]],
+	and its query is true if
+	the [=computed value=] of the given property on the [=query container=]
+	matches the given value
+	(which is also [=computed value|computed=] with respect to the [=query container=]),
+	unknown if the property or its value is unsupported,
+	and false otherwise.
+	The boolean syntax and logic combining [=style features=] into a <<style-query>>
+	is the same as for [=feature queries=].
+	(See ''@supports''. [[!CSS-CONDITIONAL-3]])
+
+	Issue(6396): Do we like this proposed syntax for style queries?
 
 <h3 id="state-container">
 State Container Features</h3>
@@ -639,11 +686,11 @@ Container Relative Lengths: the ''qw'', ''qh'', ''qi'', ''qb'', ''qmin'', ''qmax
 
 	For each element,
 	[=query length=] units are evaluated
-	as [=dimensional queries=] on the relevant axis (or axes)
+	as [=size queries=] on the relevant axis (or axes)
 	described by the unit.
 	The [=query container=] for each axis
 	is the nearest ancestor container
-	that accepts [=dimensional queries=] on that axis.
+	that accepts [=size queries=] on that axis.
 	If no eligible [=query container=] is available,
 	then use the [=small viewport size=] for that axis.