1737103 - failing to calculate the next item using css counter with the start attribute

Status: RESOLVED INVALID

(Core :: Layout: Generated Content, Lists, and Counters, defect)

Description

[Alireza]

Attachment: firefox-chrome.jpg

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36

Steps to reproduce:

1- create a nested ol li list using counter and counter-increment with the start attribute
2- use counter-reset to set the start value of the li

• Compare the codepen snippet on Firefox and Chrome: https://codepen.io/alireza-o/pen/gOxLbMB

Actual results:

Firefox fails to calculate the counter of the next li instance.
(It works fine on Safari, Edge, and Chrome)

Expected results:

In this example: after "5. HTML Tutorial" there should be "6. CSS Tutorial". However, it is showing "1. CSS Tutorial".
Check the attached photo (Left firefox, right Chrome)

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout: Generated Content, Lists, and Counters' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=33b1ed31c18a3066b2e41f1901f8221375a808dd&tochange=75559571662961f502e2f424cc3b2d7572c50bb5

Comment 3

[Mats Palmgren (inactive)]

This is an intentional CSS Lists spec change and we're correctly implementing the new spec for this example.

Alireza, it might help to understand what's going in your example if you use the plural counters instead of counter so that you can see all scopes of a counter, not just the innermost. Like so: counters(msc, ".") etc. Then you will see that the first list item, "HTML Tutorial" is numbered "0.5" (in both Chrome and Firefox).

This is because you created a scope msc for the outer <ol> with counter-reset: msc in the first CSS rule, and then created a new scope for it in the li[start="5"] rule using another counter-reset, so the ::before pseudo, which is a child of the <li>, is actually inside two scopes, hence "0.5".

The next list item, "CSS Tutorial", has a ::before pseudo with counter-increment: msc. The scope it uses is the nearest DOM ancestor with an msc scope, or if none is found, the first msc scope on any element that can be found in reverse DOM tree traversal (which would find the first list item eventually). However, the outer <ol> is an ancestor with a msc scope so that's what it being used.

In Chrome, the first level list items are numbered 0.5, 0.6, 0.6 etc. That's a bug. They are using the old rules before the spec change was made. (The spec change was made because it turns out it wasn't compatible with how default HTML list numbering works, which always prefers to use an ancestor scope if there is one and only falls back to using a previous sibling scope otherwise. That is, for "orphan" <li>s).

Please file a bug on Chrome and ask them to follow the updated CSS Lists spec.
https://bugs.chromium.org/p/chromium/issues/entry

This is the spec section:
https://drafts.csswg.org/css-lists/#creating-counters

Regarding your example, you should use counter-set to set the value of an existing counter, that's what it's for, not counter-reset which creates new scopes. Then I believe it should work as you expect with the same result in Chrome and Firefox.