Merge pull request w3c#6672 from andruud/anim_cq

[css-contain-3] Add Animated Containers section

Author: mirisuzanne

css-contain-3/Overview.bs

@@ -40,6 +40,7 @@ spec:css-sizing-3; type:value; for:width; text:min-content
 spec:css-sizing-3; type:value; for:width; text:max-content
 spec:css-syntax-3; type:dfn; text:identifier
 spec:css-values-4; type:dfn; text:relative length
+spec:web-animations-1; type:dfn; text:effect values
 </pre>
 
 <h2 id='intro'>
@@ -460,6 +461,68 @@ Container Queries: the ''@container'' rule</h3>
 	so it is not always possible to merge the individual <<container-query-list>>s
 	into a single query.
 
+<h3 id="animated-containers">
+Animated Containers</h3>
+
+	A change in the evaluation of a [=container query=] must be part of a [=style change event=],
+	even when the change occurred because of [=effect values|animation effects=].
+
+	<div class=example>
+		A transition on a sibling element can indirectly affect the size of a
+		container, triggering [=style change events=] whenever container queries
+		change their evaluation as a result:
+
+		<pre class=lang-css>
+			main {
+			  display: flex;
+			  width: 300px;
+			}
+
+			#container {
+			  container: inline-size;
+			  flex: 1;
+			}
+
+			/* Resolved width is initially 200px, but changes as the transition
+			   on #sibling progresses. */
+			#inner {
+			  transition: 1s background-color;
+			  background-color: tomato;
+			}
+
+			/* When this container query starts (or stops) applying, a transition
+			   must start on background-color on #inner. */
+			@container (width <= 150px) {
+			  #inner {
+			    background-color: skyblue;
+			  }
+			}
+
+			#sibling {
+			  width: 100px;
+			  transition: width 1s;
+			}
+
+			#sibling:hover {
+			  width: 200px;
+			}
+		</pre>
+
+		<pre class=lang-html>
+			&lt;main>
+			  &lt;div id=container>
+			    &lt;div id=inner>Inner&lt;/div>
+			  &lt;/div>
+			  &lt;div id=sibling>Sibling&lt;/div>
+			&lt;/main>
+		</pre>
+
+	</div>
+
+	Changes in [=computed values=] caused by [=query length=] units
+	must also be part of a [=style change event=].
+
+
 <h2 id="container-features">
 Container Features</h2>