[css-contain-3] Address and/or link remaining issues

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -376,7 +376,7 @@ Container Queries: the ''@container'' rule</h2>
 	The syntax of the ''@container'' rule is:
 
 	<pre class="prod def">
-	@container <<container-name>>? <<container-query-list>> {
+	@container <<container-name>> | [ name(<<container-name>>) || type(<<container-type>>+) ]? <<container-query-list>> {
 	  <<stylesheet>>
 	}
 	</pre>
@@ -393,23 +393,26 @@ Container Queries: the ''@container'' rule</h2>
 
 	For each element,
 	the [=query container=] to be queried
-	is determined by the following container selection process:
+	is selected from 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.
+	The nearest remaining [=query container=] ancestor is selected.
 
-	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 ''unknown'' for that element.
+	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: Do missing containers evaluate false or unknown?
+	Issue(6393): Provide a syntax to query a specific container-type
 
-	If an eligible [=query container=] has been selected,
+	Once an eligible [=query container=] has been selected for an element,
 	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,
+	or no ancestor is an eligible [=query container=],
 	then the [=container query=] is ''unknown'' for that element.
 
 	<div class=example>
@@ -427,9 +430,12 @@ Container Queries: the ''@container'' rule</h2>
 		meets both the '@container/inline-size' and [=style queries|style=] conditions.
 	</div>
 
-	Issue(6393): Provide a syntax to query a specific container-type?
+	Style rules defined on an element inside multiple nested [=container queries=]
+	apply when all of the wrapping [=container queries=] are ''true'' for that element.
 
-	Issue: Define how nested container queries are evaluated
+	Note: Nested [=container queries=] may evaluate in relation to different containers,
+	so it is not possible to merge the individual <<container-query-list>>s
+	into a single query.
 
 <h2 id="container-features">
 Container Features</h2>
@@ -485,8 +491,6 @@ Dimensional Container Features</h3>
 			the query condition will be true above ''960px''.
 	</div>
 
-	Issue: Evaluate to "unknown" if inline-/block-/size containment is missing.
-
 <h4 id="width">
 Width: the '@container/width' feature</h4>
 
@@ -600,17 +604,17 @@ State Container Features</h3>
 	whether a ''position: sticky'' box is displaced from its in-flow position,
 	or whether the box is visible on screen.
 
-Issue: Define a syntax for state-based container queries
+Issue(6402): Define a syntax for state-based container queries
 
 <h2 id="container-lengths">
 Container Relative Lengths: the ''qw'', ''qh'', ''qi'', ''qb'', ''qmin'', ''qmax'' units</h2>
 
-	<dfn lt="container length">Container length units</dfn>
-	specify a length relative to another length.
-	Style sheets that use relative units can more easily move components
+	<dfn lt="query length">Query length units</dfn>
+	specify a length relative to the dimensions of a [=query container=].
+	Style sheets that use [=query length=] units can more easily move components
 	from one [=query container=] to another.
 
-	The [=container length=] units are:
+	The [=query length=] units are:
 
 	<table class="data">
 	<caption>Informative Summary of Container Units</caption>
@@ -634,14 +638,14 @@ Container Relative Lengths: the ''qw'', ''qh'', ''qi'', ''qb'', ''qmin'', ''qmax
 	</table>
 
 	For each element,
-	[=container length=] units are evaluated
-	as [=dimensional queries=] on the relevant axis or axes
+	[=query length=] units are evaluated
+	as [=dimensional 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.
-	If no eligible [=query container=] is defined on the required axis,
-	then the [=container length=] on that axis is zero (''0'').
+	If no eligible [=query container=] is available,
+	then use the [=small viewport size=] for that axis.
 
 	Note: In some cases ''qi'' and ''qb'' units on the same element
 	will evaluate in relation to different [=query containers=].
@@ -653,24 +657,18 @@ Container Relative Lengths: the ''qw'', ''qh'', ''qi'', ''qb'', ''qmin'', ''qmax
 	they inherit the <a>computed values</a>.
 
 	<div class=example>
-		Since container relative units rely on being inside a proper container,
-		and fallback to ''0'',
-		it's often useful to establish a minimum value using math functions
-		like ''calc()'', ''min()'', ''max()'', or ''clamp()'':
+		Authors can ensure that [=query length=] units
+		have an appropriate [=query container=]
+		by applying them inside a [=container query=] with the required <<container-type>>.
+		Custom fallback values can be defined outside the [=container query=]:
 
 		<pre class=lang-css>
-		article {
-		  /* calc(1em + 0) = 1em */
-		  font-size: calc(1em + 0.2qmin);
-
-		  /* clamp(1em, 0, 3em) = 1em */
-		  font-size: clamp(1em, 5qw, 3em);
-
-		  /* clamp(1em, max(0, 3vw), 3em) = clamp(1em, 3vw, 3em) */
-		  font-size: clamp(1em, max(5qw, 3vw), 3em);
+		/* The fallback value does not rely on containment */
+		h2 { font-size: 1.2em; }
 
-		  /* max(0, 1em) max(0, 1em) = 1em 1em */
-		  padding: max(2qh, 1em) max(2qw, 1em);
+		@container type(inline-size) {
+		  /* only applies when an inline-size container is available */
+		  h2 { font-size: calc(1.2em + 1qi); }
 		}
 		</pre>
 	</div>