[css-cascade-5][editorial] Example to clarify revert-layer in paired properties #7054

Author: mirisuzanne

css-cascade-5/Overview.bs

@@ -1198,13 +1198,13 @@ Important Declarations: the ''!important'' annotation</h3>
 	</div>
 
 <!--
-██          ███    ██    ██ ████████ ████████   ██████ 
+██          ███    ██    ██ ████████ ████████   ██████
 ██         ██ ██    ██  ██  ██       ██     ██ ██    ██
-██        ██   ██    ████   ██       ██     ██ ██      
-██       ██     ██    ██    ██████   ████████   ██████ 
+██        ██   ██    ████   ██       ██     ██ ██
+██       ██     ██    ██    ██████   ████████   ██████
 ██       █████████    ██    ██       ██   ██         ██
 ██       ██     ██    ██    ██       ██    ██  ██    ██
-████████ ██     ██    ██    ████████ ██     ██  ██████ 
+████████ ██     ██    ██    ████████ ██     ██  ██████
 -->
 
 <h3 id='layering'>
@@ -1901,6 +1901,37 @@ Rolling Back Cascade Layers: the ''revert-layer'' keyword</h4>
 	and the intervening [=animation origin=],
 	and not any of the intervening [=author-origin=] [=important=] rules.
 
+	<div class="example">
+		For example,
+		applying ''revert-layer'' to the 'height' in layer <code>two</code>,
+		reverts the 'height' property to the value
+		defined in layer <code>one</code>,
+		yielding a 'height' of <code>100px</code>.
+
+		<pre class='lang-css'>
+		@layer one {
+		  div { height: 100px }
+		}
+
+		@layer two {
+		  div { height: 200px }
+		  div { height: revert-layer }
+		}
+		</pre>
+
+		Note that since 'height' and 'block-size' are
+		paired properties in a [=logical property group=],
+		the following layer <code>two</code> declaration
+		would also revert to the 'height' defined in layer <code>one</code>.
+
+		<pre class='lang-css'>
+		@layer two {
+		  div { height: 200px }
+		  div { block-size: revert-layer }
+		}
+		</pre>
+	</div>
+
 	Note: If there are no lower-precedence [=declarations=]
 	in the same [=cascade origin=] as the ''revert-layer'' value,
 	the <a>cascaded value</a> will roll back to the previous origin.