[css-contain-3] Describe the container selection process

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -26,6 +26,7 @@ spec:css-break-3; type:dfn; text:fragmentation container
 spec:css-break-3; type:dfn; text:fragmentation context
 spec:css-break-3; type:dfn; text:fragmented flow
 spec:css-contain-2; type:dfn; text:layout containment box
+spec:css-contain-2; type:dfn; text:size containment box
 spec:css-sizing-4; type:property; text:contain-intrinsic-size
 spec:css-sizing-4; type:property; text:aspect-ratio
 spec:intersection-observer; type:dfn; text:intersection root
@@ -219,15 +220,13 @@ Creating Query Containers: the 'container-type' property</h2>
 	</dl>
 
 	<div class=example>
-		Many layouts rely on external sizing for the inline axis,
-		while allowing the block axis to auto-size based on content.
-		Establishing an ''container/inline-size'' container makes that behavior explicit,
-		so that the inline-dimension can be queried,
-		without impacting normal layout of the block dimensions:
+		For example, authors can create container-responsive typography,
+		adjusting 'font-size', 'line-height', and other typographic concerns
+		based on the size of a container:
 
 		<pre class=lang-css>
-		section {
-		  container: inline-size;
+		aside, main {
+		  container-type: inline-size;
 		}
 
 		h2 { font-size: 1.2em; }
@@ -237,7 +236,8 @@ Creating Query Containers: the 'container-type' property</h2>
 		}
 		</pre>
 
-		The ''em'' value is relative to the <a>computed value</a> of 'font-size'
+		The ''40em'' value used in the query condition
+		is relative to the [=computed value=] of 'font-size'
 		on the ''section'' container.
 	</div>
 
@@ -247,10 +247,10 @@ Creating Query Containers: the 'container-type' property</h2>
 
 		<pre class=lang-css>
 		section {
-		  container: style;
+		  container-type: style;
 		}
 
-		@container (--cards == true) {
+		@container (--cards) {
 		  article {
 		    border: thin solid silver;
 		    border-radius: 0.5em;
@@ -392,13 +392,23 @@ Container Queries: the ''@container'' rule</h2>
 	is true for the element’s [=query container=].
 
 	For each element,
-	the [=query container=] being queried
-	is its nearest [=query container=] ancestor.
-	The optional <dfn><<container-name>></dfn>
-	filters the set of [=query containers=] considered
-	to just those with a matching [=query container name=].
-	If no ancestor is an eligible [=query container=],
-	then the [=container query=] is false for that element.
+	the [=query container=] to be queried
+	is determined by the following container selection process:
+
+	1. Start with a list of all the element's ancestor [=query containers=].
+	2. The optional <dfn><<container-name>></dfn>
+		filters the set of [=query containers=] considered
+		to just those with a matching [=query container name=].
+	3. Select the nearest remaining [=query container=] ancestor.
+	4. If no ancestor is an eligible [=query container=],
+		then the [=container query=] is ''false'' for that element.
+
+	If an eligible [=query container=] has been selected,
+	each [=container feature=] in the <<container-query-list>>
+	is evaluated against that [=query container=].
+	If the selected [=query container=]
+	is not a valid 'container-type' for the feature,
+	then the [=container query=] is ''unknown'' for that element.
 
 	<div class=example>
 		As with [=media queries=],
@@ -412,10 +422,10 @@ Container Queries: the ''@container'' rule</h2>
 
 		The styles above will only be applied
 		if there nearest ancestor container named "card"
-		meets both the '@container/inline-size' and 'style queries|style' conditions.
+		meets both the '@container/inline-size' and [=style queries|style=] conditions.
 	</div>
 
-	Issue: Provide a syntax to query a specific container-type?
+	Issue(6393): Provide a syntax to query a specific container-type?
 
 
 <h2 id="container-features">
@@ -427,6 +437,8 @@ Container Features</h2>
 	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>
 
@@ -435,7 +447,7 @@ Dimensional Container Features</h3>
 
 	If the [=query container=] does not have a [=principal box=],
 	or the principal box is not a [=layout containment box=],
-	then the result of evaluating any dimensional container feature is "unknown".
+	then the result of evaluating any dimensional container feature is ''unknown''.
 
 	[=Relative length=] units in [=container queries=]
 	are based on the the [=computed values=] of the [=query container=].
@@ -458,7 +470,6 @@ Width: the '@container/width' feature</h4>
 	queries the [=width=]
 	of the [=query container=]’s [=content box=].
 
-
 <h4 id="height">
 Height: the '@container/height' feature</h4>
 
@@ -473,7 +484,6 @@ Height: the '@container/height' feature</h4>
 	queries the [=height=]
 	of the [=query container=]’s [=content box=].
 
-
 <h4 id="inline-size">
 Inline-size: the '@container/inline-size' feature</h4>
 
@@ -549,8 +559,6 @@ Style Container Features</h3>
 	<dfn export>Style queries</dfn> allow querying
 	the [=computed values=] of the [=query container=].
 
-	Issue(5989): What container features can be queried?
-
 
 <h3 id="state-container">
 State Container Features</h3>
@@ -596,11 +604,11 @@ Container Relative Lengths: the ''qw'', ''qh'', ''qi'', ''qb'', ''qmin'', ''qmax
 	they inherit the <a>computed values</a>.
 
 	For each element,
-	[=container length=] units are based on
-	the nearest ancestor [=query container=].
-	If no ancestor is an eligible [=query container=],
-	or the nearest [=query container=] is not a container for
-	[=dimensional queries=] on the unit's axis/axes,
+	[=container length=] units are evaluated
+	as [=dimensional queries=] on the relevant axis or axes
+	described by the unit.
+	The [=query container=] is always the nearest ancestor container.
+	If the query cannot be evaluated,
 	then the [=container length=] is zero (''0'').
 
 	<div class=example>