List Item Rendering

Google

Completed the specification and tests for how ‘list-item’ CSS counters work for HTML

Challenge

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.

Solution

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:

Impact

The CSS Counters specification gained a new feature for reversed lists, as a primitive that explains HTML’s <ol reversed>. The HTML standard’s rendering rules for <ol> are now defined in terms of CSS concepts, making it well-defined how other CSS features (such as style containment) interact with it. Gecko has now implemented reversed() and shipped in Firefox 96. The changes are not yet implemented in Chromium or WebKit.

Contact Us

We'd love to hear from you. Get in touch!

Mail

P.O. Box 961436
Boston, MA 02196