[css-lists-3] Add example of using list-item counter. Add normative prose supporting this example that we expect to work. Related to discussion in #3686 (and a number of more ancient WG discussions)

Author: fantasai

css-lists-3/Overview.bs

@@ -814,6 +814,55 @@ The Implicit ''list-item'' Counter</h3>
 	See old <a href="https://github.com/w3c/csswg-drafts/issues/2464#issuecomment-375492907">WG discussions</a>
 	and newer <a href="https://github.com/w3c/csswg-drafts/issues/3686">issue discussion</a>.
 
+	UAs and host languages should ensure
+	that the ''counter-increment/list-item'' counter values
+	reflect the underlying numeric value dictated by host language semantics
+	when setting up list item styling
+	in their UA style sheet and presentational hint style mappings.
+	<span class="issue">Not really sure how to word this requirement,
+	but the following example is expected to work.</span>
+
+	<div class="example">
+		In the following example,
+		the 'content' property is used to create tiered numbering
+		that hooks into the ''counter-increment/list-item'' counter,
+		and thus respects any numbering changes inflicted through HTML:
+		<pre>
+		  ol::marker { content: counters(list-item,'.') '.'; }
+		</pre>
+		Nested lists using this rule would be rendered like
+		<pre>
+		  1. First top-level item
+		  5. Second top-level item, value=5
+		     5.3. First second-level item, list start=3
+		     5.4. Second second-level item, list start=3
+		          5.4.4. First third-level item in reversed list
+		          5.4.3. Second third-level item in reversed list
+		          5.4.2. Third third-level item in reversed list
+		          5.4.1. Fourth third-level item in reversed list
+		     5.5. Third second-level item, list start=3
+		  6. Third top-level item
+		</pre>
+		given markup such as
+		<pre>
+		  <ol>
+		    <li>First top-level item
+		    <li value=5>Second top-level item, value=5
+		      <ol start=3>
+		        <li>First second-level item, list start=3
+		        <li>Second second-level item, list start=3
+		           <ol reversed>
+		             <li>First third-level item in reversed list
+		             <li>Second third-level item in reversed list
+		             <li>Third third-level item in reversed list
+		             <li>Fourth third-level item in reversed list
+		           </ol>
+		        <li>Third second-level item, list start=3
+		    <li>Third top-level item
+		  </ol>
+		</pre>
+	</div>
+
 <h3 id="creating-counters">
 Creating and Inheriting Counters</h3>