[css-cascade-5] name-defining at-rules use layer order to resolve name collisions

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -214,7 +214,7 @@ Conditional ''@import'' Rules</h3>
 		<pre class='lang-css'>
 		@import url("fallback-layout.css") supports(not (display: flex));
 		@supports (display: flex) {
-			...
+		  ...
 		}
 		</pre>
 	</div>
@@ -1196,15 +1196,15 @@ Cascade Layers</h3>
 
 		<pre class='lang-css'>
 			@layer utilities {
-				.padding-small {
-					/* specificity of 0,1,0 - explicit "utilities" layer */
-					padding: 0.25em;
-				}
+			  .padding-small {
+			    /* specificity of 0,1,0 - explicit "utilities" layer */
+			    padding: 0.25em;
+			  }
 			}
 
 			.card > .content {
-				/* specificity of 0,2,0 - implicit (first) layer */
-				padding: 1em;
+			  /* specificity of 0,2,0 - implicit (first) layer */
+			  padding: 1em;
 			}
 		</pre>
 
@@ -1214,6 +1214,43 @@ Cascade Layers</h3>
 		and come later in the source order.
 	</div>
 
+	Name-defining [=at-rules=]
+	such as ''@keyframes'' or ''@font-face''
+	that are defined inside [=cascade layers=]
+	also use the layer order when resolving name collisions.
+
+	<div class="example">
+		For example,
+		authors could override the animation from a framework,
+		by providing keyframes with the same name in a higher-priority layer:
+
+		<pre class='lang-css'>
+			/* establish the layer order, so the "override" layer takes precedence */
+			@layer framework, override;
+
+			@layer override {
+			  @keyframes slide-left {
+			    from { translate: 0; }
+			    to { translate: -100% 0; }
+			  }
+			}
+
+			@layer framework {
+			  @keyframes slide-left {
+			    from { margin-left: 0; }
+			    to { margin-left: -100%; }
+			  }
+			}
+
+			.sidebar { animation: slide-left 300ms; }
+		</pre>
+
+		In this case the ''override'' layer
+		has a higher cascade priority than the ''framework'' layer,
+		so <code>slide-left</code> will animate
+		using the <code>translate</code> property rather than <code>margin-left</code>.
+	</div>
+
 <h4 id="layer-declaration">
 Declaring Cascade Layers</h4>
 
@@ -1364,8 +1401,8 @@ Anonymous Layers</h5>
 
 			<pre class=lang-css>
 			@layer {
-				@layer foo { /* layer 1 */ }
-				@layer foo { /* also layer 1 */ }
+			  @layer foo { /* layer 1 */ }
+			  @layer foo { /* also layer 1 */ }
 			}
 			</pre>
 
@@ -1375,10 +1412,10 @@ Anonymous Layers</h5>
 
 			<pre class=lang-css>
 			@layer {
-				@layer foo { /* layer 1 */ }
+			  @layer foo { /* layer 1 */ }
 			}
 			@layer {
-				@layer foo { /* layer 2 */ }
+			  @layer foo { /* layer 2 */ }
 			}
 			</pre>
 	</div>