Define rendering of <ol><li> numbers in terms of CSS Lists

Map `<ol start reversed>` and `<li value>` to `counter-reset` and `counter-set` properties as presentational hints. For reversed lists, use the CSS `reversed()` function added in w3c/csswg-drafts#6096.

Tests: web-platform-tests/wpt#28040 & web-platform-tests/wpt#28453.

Helps with #4808.

Co-authored-by: Simon Pieters <zcorpan@gmail.com>

source

@@ -3506,9 +3506,14 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li><dfn data-x-href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">'aspect-ratio'</dfn> property</li>
     </ul>
 
-    <p>The <dfn
-    data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn>
-    property is defined in <cite>CSS Lists and Counters</cite>. <ref spec=CSSLISTS></p>
+    <p>The following features are defined in <cite>CSS Lists and Counters</cite>. <ref spec=CSSLISTS></p>
+
+    <ul class="brief">
+     <li><dfn data-x-href="https://drafts.csswg.org/css-lists/#list-item" data-x="css-list-item">list item</dfn></li>
+     <li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-counter-reset">'counter-reset'</dfn> property</li>
+     <li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-counter-set">'counter-set'</dfn> property</li>
+     <li>The <dfn data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn> property</li>
+    </ul>
 
     <p>The following features are defined in <cite>CSS Overflow</cite>. <ref spec=CSSOVERFLOW></p>
 
@@ -113769,6 +113774,7 @@ dir, dl, menu, ol, ul { margin-block-start: 1em; margin-block-end: 1em; }
 dd { margin-inline-start: 40px; }
 dir, menu, ol, ul { padding-inline-start: 40px; }
 
+ol, ul, menu { counter-reset: list-item; }
 ol { list-style-type: decimal; }
 
 dir, menu, ul {
@@ -113800,9 +113806,57 @@ ul[type=square i], li[type=square i] { list-style-type: square; }</code></pre>
   <span>ordinal value</span> of the <code>li</code> element to render the counter in the list item
   marker.</p>
 
-  <p class="critical" id="css-list-rendering">This specification does not yet define the
-  CSS-specific rules for rendering <code>li</code> elements, because CSS doesn't yet provide
-  sufficient hooks for this purpose.</p>
+  <p id="css-list-rendering">For CSS user agents, some aspects of rendering <span
+  data-x="css-list-item">list items</span> are defined by the <cite>CSS Lists</cite> specification.
+  Additionally, the following attribute mappings are expected to apply: <ref spec=CSSLISTS></p>
+
+  <p>When an <code>li</code> element has a <code
+  data-x="attr-li-value">value</code> attribute, and parsing that attribute's value using the
+  <span>rules for parsing integers</span> doesn't generate an error, the user agent is expected to
+  use the parsed value <var>value</var> as a <span data-x="presentational hints">presentational
+  hint</span> for the <span>'counter-set'</span> property of the form <code data-x="">list-item
+  <var>value</var></code>.</p>
+
+  <p>When an <code>ol</code> element has a <code data-x="attr-ol-start">start</code>
+  attribute or a <code data-x="attr-ol-reversed">reversed</code> attribute, or both, the user agent
+  is expected to use the following steps to treat the attributes as a <span data-x="presentational
+  hints">presentational hint</span> for the <span>'counter-reset'</span> property:</p>
+
+  <ol>
+   <li><p>Let <var>value</var> be null.</p></li>
+
+   <li><p>If the element has a <code data-x="attr-ol-start">start</code> attribute, then set
+   <var>value</var> to the result of parsing the attribute's value using the <span>rules for
+   parsing integers</span>.</p></li>
+
+   <li>
+    <p>If the element has a <code data-x="attr-ol-reversed">reversed</code> attribute, then:</p>
+
+    <ol>
+     <li><p>If <var>value</var> is an integer, then increment <var>value</var> by 1 and return
+     <code data-x="">reversed(list-item) <var>value</var></code>.</p></li>
+
+     <li>
+      <p>Otherwise, return <code data-x="">reversed(list-item)</code>.</p>
+
+      <p class="note">Either the <code data-x="attr-ol-start">start</code> attribute was absent, or
+      parsing its value resulted in an error.</p>
+     </li>
+    </ol>
+   </li>
+
+   <li>
+    <p>Otherwise:</p>
+
+    <ol>
+     <li><p>If <var>value</var> is an integer, then decrement <var>value</var> by 1 and return
+     <code data-x="">list-item <var>value</var></code>.</p></li>
+
+     <li><p>Otherwise, there is no <span data-x="presentational hints">presentational
+     hint</span>.</p></li>
+    </ol>
+   </li>
+  </ol>
 
 
   <h4>Tables</h4>