List Item Rendering

In 2019, Mozilla implemented built-in CSS counter behavior for the ‘list-item’ keyword, which did not have a normative specification. They submitted a pull request for the HTML specification but did not follow through. Gecko had thus diverged in behavior, but there was interest from Chromium to also make this change, as it removes some of the rendering “magic” in HTML.

Our objective was to complete the specification and tests for how ‘list-item’ CSS counters work for HTML, ensure it is well tested and implementable in all browser engines.

We started by addressing the existing review comments in the existing pull request Update the Rendering section for Lists to use the built-in 'list-item' CSS counter. In doing so, we found that in order to support HTML reverse ordered lists, the CSS counters specification should support a way to do reversed lists with automatic initial value. We then proposed a specification for a new reversed() CSS function for the CSS ‘counter-reset’ property. The spec changes landed, but a follow-up issue was reported about the start value for reversed lists being calculated incorrectly, which we then addressed after getting consensus on the expected behavior.

We wrote web-platform-tests tests for the HTML change (see test results) and the CSS change (see test results) and reported bugs for Chromium, WebKit and Gecko to implement the new specification.

In whatwg/html issue #4808 it is discussed how CSS counters affect CSS style containment (‘contain: style’). In our review, we conclude that it should be covered by the relevant CSS specifications. The following issues relating to reversed CSS counters are not yet resolved:

• [css-lists] automatic start value of reversed list is affected by 'counter-increment: 0' nodes
• [css-lists] Algorithm for initial counter value in reversed list should repeat the last increment instead of the 1st one
• [css-lists] Add counter-increment: step() that negates integer in reversed lists
• [css-lists] counter-reset should be able to compute to reversed() without integer
• [css-lists] seems useless
• Should ATs convey the CSS counter or <li>'s ordinal value
• Maybe change <ol>/<li> "ordinal value" to not be affected by CSS