1717772 - counter-reset not working correctly when used with inline style

Status: RESOLVED INVALID

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

Description

[vikash.ckiiita30]

Attachment: counter-rese.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

1. Go to https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset
2. Select fourth option (counter-reset: chapter-count 5;) from demo section at the top

Actual results:

Preview on the right hand displayed counters as
Chapter 1
Chapter 6
Chapter 2
Chapter 3

Expected results:

Preview on the right hand should display
Chapter 1
Chapter 6
Chapter 7
Chapter 8

Comment 1

[Mats Palmgren (inactive)]

Attachment: Testcase

Here's that MDN example as a standalone testcase for clarity.

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase #2 - same test with counters()

Here's the same example using counters(chapter-count, ".") in the content property.
This makes it a bit easier to see what's going on. The counter-reset: chapter-count 5 on the <h2> opens a nested scope, so the counters inside that element, that its ::before sees, is 1.6.
This is correct because that <h2>'s counter-increment increments the closest scope, which is its own counter which was initialized to 5. The outer scope counter is unaffected.

The next sibling <h2> element after that, uses its parent element's counter scope if it exists (it would only use its previous sibling's scope of there are no ancestor scopes). So it increments the outer scope from 1 to 2.
This is the correct behavior per spec: https://drafts.csswg.org/css-lists-3/#creating-counters
although it has probably changed since this MDN article was written. (see https://github.com/w3c/csswg-drafts/issues/5477 for details)

Comment 3

[Mats Palmgren (inactive)]

So, the reported issue is not a bug but the expected behavior for the given testcase.

I'm not sure what the MDN example is trying to illustrate, but it seems a bit confusing to use counter() rather than counters() which would show all the counter scopes. Not sure where to report MDN content problems these days though...

Comment 4

[Mats Palmgren (inactive)]

(FYI, if you want to set the current scope's counter value you should use counter-set instead.)

Comment 5

[Mats Palmgren (inactive)]

Oh, there's a "Report a problem with this content on GitHub" link at the end of that MDN article.
I filed a report to improve the example here: https://github.com/mdn/content/issues/6277

Comment 6

[vikash.ckiiita30]

I see same behavior with P tag also, does it also starts a new scope? I am not so sure about that.

Comment 7

[Mats Palmgren (inactive)]

Yes, the counter-reset property works exactly the same on all elements.