[css-cascade-5] Define the ordering of conditional layers (w3c#6407)

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -1507,6 +1507,49 @@ Layer Ordering</h4>
 		4. ''utilities''
 	</div>
 
+	Layers that are defined inside of a [=conditional group rule=]
+	do not contribute to the layer order unless the condition is true,
+	or the [=conditional group rule=] evaluates contextually
+	for different elements on the page.
+
+	Note: A feature like "container queries"
+	would need to evaluate contextually for individual elements.
+	Because of that, layers defined inside a container query
+	would be considered part of the global layer order
+	regardless of the condition.
+
+	<div class=example>
+		For example,
+		the following layer order
+		will depend on which media conditions match:
+
+		<pre class='lang-css'>
+			@media (min-width: 30em) {
+			  @layer layout {
+			    .title { font-size: x-large; }
+			  }
+			}
+
+			@media (prefers-color-scheme: dark) {
+			  @layer theme {
+			    .title { color: white; }
+			  }
+			}
+
+			@layer theme layout;
+		</pre>
+
+		If the first media-query matches based on viewport dimensions,
+		then the ''layout'' layer will come first in the layer order.
+		If the color-scheme preference query matches,
+		or if neither condition is true,
+		then ''theme'' will come first in the layer order.
+
+		Authors who want to avoid this behavior can establish
+		an explicit ordering of layers in advance,
+		and avoid defining new layers inside conditional rules.
+	</div>
+
 	Note: [=Cascade layers=] are scoped to their [=origin=] and [=context=],
 	so the ordering of layers in the light DOM has no impact
 	on the order of identically-named layers in the shadow DOM