1161825 - Ordered list displays count as 0 when using display: flex or display: inline

Status: RESOLVED DUPLICATE of bug 4522

(Core :: Layout, defect)

Description

[bholtbholt]

Attachment: Screen Shot 2015-05-05 at 4.55.41 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:37.0) Gecko/20100101 Firefox/37.0
Build ID: 20150415140819

Steps to reproduce:

I have an ordered list element which contains 3 list items. The ordered list is display: flex and the list items have no specified order, which causes them to show up as "0" instead of "1-3".

<ol>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ol>

ol {
  display: flex; /* or inline also causes this error */
}
ol li {
  flex: 1 0 auto;
  list-style: inside none decimal;
}


Actual results:

List elements appear as 0. instead their correct number.


Expected results:

List elements should have incremented.

Comment 1

[bholtbholt]

Workaround is to specify the count.

ol {
  display: flex; /* or inline also causes this error */
  counter-reset: level1;
}
ol li {
  flex: 1 0 auto;
  list-style: none;
}
ol li:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (reporter's testcase)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2 (slightly reduced)

Comment 4

[Daniel Holbert [:dholbert]]

Chrome (Blink) & Opera 12.16 (Presto) give expected results (numbering the list entries as 1,2,3). 

Firefox Nightly numbers the list entries 0,0,0. Not sure why offhand.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Bug 4522 may be related, but in general the issue is that the list-numbering logic all lives in blockframe, no?

Comment 6

[Daniel Holbert [:dholbert]]

I'm not sure. We get it right if I make the <ol> "display:table", and we've got approximately the same block involvement with a table-<ol> vs. a flex-<ol>. So there's apparently some way to get this working with non-block <ol>.

(Technically tables will give us a layer of blockification for the anonymous table-cell; I thought maybe that block was helping for tables. But if I add a similar block around each <li> or around all of the <li>'s and use display:flex, stuff's still broken.)

Comment 7

[Daniel Holbert [:dholbert]]

Ah, but as bz points out on IRC: in the "display:table" case, the anonymous block frame (for the cell contents) has its mContent pointer set to the <ol> content-node, so it does list numbering.

Whereas, with "display:flex" and an explicit <div> around the <li> elements, that explicit <div> block does *not* have its mContent set to the <ol> content-node. (it's set to the <div>).  So, no list numbering.

So yeah, looks like a dupe of bug 4522.

Comment 8

[Daniel Holbert [:dholbert]]

Ah yes, and this was filed (for flexbox) a few months ago as bug 1129490. I thought it rang a bell, but I didn't search with the right terms to find that bug. :)