List item forces strict line height

[mstensho]

It seems that all browsers agree that list items disable the line height quirk [1] on ALL lines. I'm guessing this was added to make sure that there always be room for the list item marker, although that doesn't really explain why it should be like this on every line in the list item. Doing it on the first line (where the list item marker is) would have been good enough.

One implementation difference: Gecko triggers on HTML LI elements, while the others trigger on CSS display:list-item

Example:

<!-- quirks mode -->
<p>There should be a filled green square below, and no red.</p>
<div style="width:100px; height:100px; background:red;">
  <li style="line-height:50px; color:green; background:green;">
    <br>
    <div style="display:inline-block; width:1px; height:1px;"></div>
  </li>
</div>

Try changing from LI to DIV and observe the changes.

[1] https://quirks.spec.whatwg.org/#the-line-height-calculation-quirk

[zcorpan]

It seems reasonable to me to specify what non-Gecko browsers do (disable the quirk for display: list-item). @bzbarsky sounds ok?

@mstensho interested in making a PR?

[mstensho]

Triggering on element type (like Gecko) kind of makes more sense to me, though.

[zcorpan]

OK, that sounds good to me. :)

[bzbarsky]

I have no idea how this stuff works, sorry. @dbaron might.

[bzbarsky]

And in particular, the behavior seems to not be quite what's described above. Here's the behavior I see on the testcase from #38 (comment) in Chrome as far as I can tell:

1. If the inner element is display:block, the green bit is half as tall as the red bit.
2. If the inner element is display: list-item the green bit is the same height as the red bit.

In Gecko, I see the following behavior:

1. If the inner thing is an <li> with display: list-item; list-style-position: inside (the default in quirks mode only for <li> not in a list in Gecko), the green bit is a bit more than half the height of the red bit.
2. If the inner thing is an <li> with display: list-item, list-style-position: outside, the green bit is the same height as the red bit.
3. If the inner thing is an <li> with display: block, the green bit is the same height as the red bit.
4. If the inner thing is a <div> with display: list-item; list-style-position: inside the green bit is only a few pixels tall.
5. If the inner thing is a <div> with display: list-item; list-style-position: outside the green bit is half the height of the red bit.
6. If the inner thing is a <div> with display: block the green bit is half the height of the red bit.

So the Gecko behavior is falling out of an interaction between the list marker and line-height calculations, though I dunno what's going on with the "<div> with display: list-item; list-style-position: inside" case.

I did look and we have some code in line layout to do something special for the last line of an <li> (and <dt> and <dd>), but it doesn't seem like that would apply here. Maybe it does, though.