[css-contain-3] All elements are style containers, initial type is normal (#7066 #7402)

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -268,11 +268,14 @@ Container Queries</h2>
 	[=container queries=] allow testing aspects of elements within the document
 	(such as box dimensions or computed styles).
 
-	A [=query container=] is established by specifying
-	the possible query types using the 'container-type' property
+	By default, all elements are [=query containers=]
+	for the purpose of [=container style queries=],
+	and can be established as [=query containers=]
+	for [=container size queries=] by specifying
+	the additional query types using the 'container-type' property
 	(or the 'container' [=shorthand=]).
-	Style rules applying to its <a>shadow-including descendants</a> can then be
-	conditioned by querying against it,
+	Style rules applying to a [=query container=]’s <a>shadow-including descendants</a>
+	can be conditioned by querying against it,
 	using the ''@container'' [=conditional group rule=].
 
 	<div class=example>
@@ -383,20 +386,29 @@ Creating Query Containers: the 'container-type' property</h3>
 
 	<pre class='propdef'>
 		Name: container-type
-		Value: none | style || [ size | inline-size ]
-		Initial: style
+		Value: normal || [ size | inline-size ]
+		Initial: normal
 		Inherited: no
 		Applies to: all elements
-		Computed value: the keyword ''container-type/none'' or one or more of ''container-type/size'', ''container-type/inline-size'', ''container-type/style''
+		Computed value: the keyword ''container-type/normal'' or one or more of ''container-type/size'', ''container-type/inline-size''
 		Animation type: not animatable
 	</pre>
 
 	The 'container-type' property establishes the element
-	as a <dfn export>query container</dfn> for the purpose of [=container queries=],
+	as a <dfn export>query container</dfn>
+	for the purpose of [=container queries=] that require explicit containment
+	(such as [=container size queries=]),
 	allowing [=style rules=] styling its descendants
-	to query various aspects of its sizing, layout, and style
+	to query various aspects of its sizing and layout,
 	and respond accordingly.
 
+	Unless otherwise noted,
+	all elements are [=query containers=]
+	for the purpose [=container queries=]
+	that do no require explicit containment
+	(such as [=container style queries=]),
+	reagardless of the specified 'container-type'.
+
 	Values have the following meanings:
 
 	<dl dfn-type=value dfn-for=container-type>
@@ -416,12 +428,11 @@ Creating Query Containers: the 'container-type' property</h3>
 			[=style containment=],
 			and [=inline-size containment=]
 			to the [=principal box=].
-		<dt><dfn>style</dfn>
-		<dd>
-			Establishes a [=query container=] for [=container style queries=].
-		<dt><dfn>none</dfn>
+		<dt><dfn>normal</dfn>
 		<dd>
-			The element is not a [=query container=] for any [=container query=].
+			The element is not a [=query container=]
+			for any [=container size queries=],
+			but remains a [=query container=] for [=container style queries=].
 	</dl>
 
 	<div class=example>
@@ -465,8 +476,6 @@ Creating Query Containers: the 'container-type' property</h3>
 		</pre>
 	</div>
 
-	Issue(7066): Should all elements default to a style container-type?
-
 
 <h3 id="container-name">
 Naming Query Containers: the 'container-name' property</h3>
@@ -598,7 +607,7 @@ Container Queries: the ''@container'' rule</h3>
 	For each element,
 	the [=query container=] to be queried
 	is selected from among the element’s ancestor [=query containers=]
-	that have a valid 'container-type'
+	that are established as a valid [=query container=]
 	for all the [=container features=]
 	in the <<container-condition>>.
 	The optional <<container-name>>
@@ -634,6 +643,26 @@ Container Queries: the ''@container'' rule</h3>
 	so it is not always possible to merge the individual <<container-condition>>s
 	into a single query.
 
+	<div class=example>
+		While it is not possible to query multiple containers
+		in a single [=container query=],
+		that can be achieved by nesting multiple queries:
+
+		<pre class=lang-css>
+		@container card (inline-size > 30em) {
+		  @container style(--responsive: true) {
+		    /* styles */
+		  }
+		}
+		</pre>
+
+		The styles above will only be applied
+		if there is an ancestor container named "card"
+		that meets the '@container/inline-size' condition,
+		as well as an ancestor container
+		meeting [=container style query|style=] condition.
+	</div>
+
 	Global, name-defining [=at-rules=]
 	such as ''@keyframes'' or ''@font-face'' or ''@layer''
 	that are defined inside [=container queries=]