List counters in <ol> displayed incorrectly in certain situations
Categories
(Core :: Layout: Generated Content, Lists, and Counters, defect, P2)
Tracking
()
People
(Reporter: a.gardner.g, Unassigned)
References
Details
(Whiteboard: [layout:backlog:quality])
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:71.0) Gecko/20100101 Firefox/71.0
Steps to reproduce:
This bug is visible when three things happen
- There is either an <ul> or <ol> item higher up in the html
- the li::marker pseudo-element's content value has counter changed from the default. eg:
ol li::marker {
content: counters(list-item, ".");
} - The <ol> with the incorrect counter issue is nested in a higher element
eg:
<div>
<ol>
<li>*</li>
<li>**</li>
</ol>
</div>
Actual results:
The actual occurrence can been viewed in the code snippet below:
https://codepen.io/Alx-Gdnr-Pen/pen/VwYbzOo
The list items in an ordered list start with nested counters instead of top-level ones
Expected results:
The list items in an ordered list should not start with nested counters (should start at 1, 2, 3, etc for top-level list items)
Updated•4 years ago
|
Comment 1•4 years ago
|
||
So I think this is somewhat expected given how CSS counters work... But this may be a legit occurrence of the same root cause as bug 1548753...
Comment 2•4 years ago
|
||
Ya. Let's wait for the fix of bug 1548753
Comment 3•4 years ago
|
||
The priority flag is not set for this bug.
:mats, could you have a look please?
For more information, please visit auto_nag documentation.
Comment 4•4 years ago
|
||
I'm putting this at P2. I'd like to get to a resolution for bug 1548753.
Updated•4 years ago
|
Comment 5•4 years ago
|
||
Now that we triage by severity, setting this bug's priority to P2 to represent near-term backlog status. See https://wiki.mozilla.org/Platform/Layout#Backlog_Tracking_in_Bugzilla
Comment 6•4 years ago
|
||
FWIW, I'm seeing several other problems with counters in <ol> that may or may not be related to the ones reported so far here.
https://codepen.io/kcarmody/pen/xxVgxPb
https://codepen.io/kcarmody/pen/WNwRNMy
https://codepen.io/kcarmody/pen/xxVgxjG
Comment 7•4 years ago
|
||
(In reply to Kevin Carmody from comment #6)
This is expected because counter-*
properties don't apply to marker per spec: https://www.w3.org/TR/css-lists-3/#marker-properties
That can be controlled by layout.css.marker.restricted
in about:config
This one is also a bit subtle, but Firefox is still right. That's bug 1545746 / https://github.com/w3c/csswg-drafts/issues/4244.
TLDR ol
elements by default reset the built-in list-item
counter in a UA stylesheet. You're overriding that rule. You really want ol { counter-reset: verse list-item; }
. Then :marker
with one colon is just invalid so that rule just doesn't apply, you're just seeing the built-in counter.
That's a different manifestation of the above. ol { counter-reset: section }
is overriding the list-item
counter-reset that ol
usually have. If this comes up a lot, then we should resolve to unconditionally resetting the counter in https://github.com/w3c/csswg-drafts/issues/4244 I guess. But what authors ought to do per the standard is using counter-reset: section list-item
.
Comment 8•4 years ago
|
||
Thanks, Emilio. I take it that you mean ol {counter-reset: list-item}
rather than ol {counter-reset section list-item}
or ol {counter-reset: verse list-item}
.
Changing the third of my demos from a custom counter to list-item
shows the same behavior:
https://codepen.io/kcarmody/pen/VwaPzzy
The 2.3.4 item is at the same level as the 2.3 item but it's numbered as if it were at the level below, and similarly for the 2.4 item and the 2.5 item.
Shouldn't FF simply ignore counter properties for ::marker
since it's against spec, like Chrome does? Instead it seems to attempt to support it but in an inconsistent and buggy way.
Comment 9•4 years ago
|
||
(In reply to Kevin Carmody from comment #8)
Thanks, Emilio. I take it that you mean
ol {counter-reset: list-item}
rather thanol {counter-reset section list-item}
orol {counter-reset: verse list-item}
.
Well if you want to use another counter you want to reset both. But sure you may want to just use list-item
.
Changing the third of my demos from a custom counter to
list-item
shows the same behavior:
https://codepen.io/kcarmody/pen/VwaPzzy
The 2.3.4 item is at the same level as the 2.3 item but it's numbered as if it were at the level below, and similarly for the 2.4 item and the 2.5 item.
That is bug 1548753, and it is because your nested <ol>
s are not inside a <li>
.
Shouldn't FF simply ignore counter properties for
::marker
since it's against spec, like Chrome does? Instead it seems to attempt to support it but in an inconsistent and buggy way.
Can you clarify? How are we not ignoring the counter properties on ::marker
? Chrome doesn't use counters to implement lists, which is a totally different thing.
Comment 10•4 years ago
|
||
Thanks again, Emilio. On your third point, check these out in both FF and Chrome:
https://codepen.io/kcarmody/pen/xxVgxPb
https://codepen.io/kcarmody/pen/WNwRNMy - dotless1 and dotless2
All three of these examples use counter properties in either :marker
or ::marker
.
In the first example, with li::marker {counter-increment: verse; content: counter(verse)}
, FF displays flush right zeros instead of item numbers, but Chrome ignores the li::marker
and outputs default markers.
In the second example, FF displays markers which are not reset from the previous ol
, apparently ignoring ol {counter-reset: verse}
but using li:marker {counter(verse)}
almost as if it were li::marker {counter(list-item)}
with list-item
not reset. Chrome ignores all this and outputs default markers.
In the third example, with li::marker {content: counter(list-item)}
, FF displays markers without dots, but Chrome outputs default markers.
Comment 11•4 years ago
|
||
(In reply to Kevin Carmody from comment #10)
In the first example, with
li::marker {counter-increment: verse; content: counter(verse)}
, FF displays flush right zeros instead of item numbers, but Chrome ignores theli::marker
and outputs default markers.
The zeros are because the counter verse
in incremented within li::marker
. If it's incremented in li
instead, the zeros become item numbers, but still flush right.
Comment 12•2 years ago
|
||
Redirect a needinfo that is pending on an inactive user to the triage owner.
:emilio, since the bug has high priority, could you have a look please?
For more information, please visit auto_nag documentation.
Comment 13•2 years ago
|
||
This works the same as other browsers now.
Description
•