[css-contain-2] Rewrite the counter-* example to be both correct (in where counter-increment establishs a counter) and comprehensive. w3c#9212

Author: tabatkins

css-contain-2/Overview.bs

@@ -1077,28 +1077,83 @@ Style Containment</h3>
 		</wpt>
 
 	<div class=example>
-	As 'counter-increment' is scoped to an element's subtree,
-	the first use of it within the subtree acts as if the named counter were set to 0 at the scoping element,
-	regardless of whether the counter had been used outside the scoping element.
-	Any increments made within the subtree have no effect on counters of the same name outside the scoping element.
-	However, the ''content/counter()'' and ''content/counters()'' value of the 'content' property is not itself scoped,
-	and can refer to counters established outside of the subtree.
-	Therefore, the following code results in <q><samp>1 1.2</samp></q> being displayed:
-	<pre><code highlight=markup>
-	&lt;div>&lt;/div>
-	</code></pre>
-	<pre><code highlight=css>
-	div {
-		contain: style;
-		counter-increment: n;
-	}
-	div::before, div::after {
-		content: counters(n, '.') " ";
-	}
-	div::after {
-		counter-increment: n 2;
-	}
-	</code></pre>
+		As 'counter-increment' is scoped to an element's subtree,
+		the first use of it within the subtree
+		creates a fresh counter,
+		regardless of whether the counter had been used outside the scoping element.
+		Any increments made within the subtree have no effect on counters of the same name outside the scoping element.
+		However, the ''content/counter()'' and ''content/counters()'' value of the 'content' property is not itself scoped,
+		and can refer to counters established outside of the subtree.
+
+		For example, the following markup and style:
+
+		<xmp highlight=markup>
+			<div>
+				<div style="contain: style;">
+					<div></div>
+					<div></div>
+				</div>
+				<div>
+					<div></div>
+					<div></div>
+				</div>
+			</div>
+		</xmp>
+
+		<pre highlight=css>
+			body {
+				counter-reset: foo;
+			}
+			div {
+				counter-increment: foo;
+
+				/* and to help observe nesting properly */
+				margin: .2em;
+				padding: .2em;
+				background: #0001;
+			}
+			div::before {
+				content: counters(foo, ".");
+			}
+		</pre>
+
+		Will render like:
+
+		<div id="scoped-counter-example">
+			<div>1
+				<div style="contain: style;">2
+					<div>2.1</div>
+					<div>2.2</div>
+				</div>
+				<div>3
+					<div>4</div>
+					<div>5</div>
+				</div>
+			</div>
+		</div>
+
+		<style>
+			#scoped-counter-example div {
+				margin: .2em;
+				padding: .2em;
+				background: #0001;
+			}
+		</style>
+
+		Here, the style-contained element still interacts with the ''foo'' counter normally,
+		incrementing it to 2.
+		Its ''::before'' pseudo-element,
+		which is effectively a child and thus within the containment boundary,
+		can still see that counter normally,
+		and thus will render the string "<code>2</code>".
+
+		Later siblings of the style-contained element don't see anything that goes on within the boundary,
+		so they increment the ''foo'' counter to 3 and beyond.
+
+		Within the containment, however,
+		the descendant divs aren't allowed to modify the value of the outside counter,
+		so instead they'll create a fresh (nested) ''foo'' counter
+		when they attempt to increment it.
 	</div>