1808393 - `<li>` height difference if the inner element is wrapped in `<div>` on Windows

Status: NEW

(Core :: Layout, defect)

Description

[David Shin[:dshin]]

Attachment: Minimum reproducible test case

STR: Load the attached test case
Expected: "No inner div" and "with inner div" size should match. This happens on Ubuntu 20.04.
Actual: On Windows, the sizes do not match: "No inner div: 19.2px, with inner div: 18px"

Chrome outputs matching values on both Windows and Linux.
Uncommenting the CSS for <li> specifying list-style-type and reloading behaves as expected even on Windows.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

FWIW, I noticed that if you remove the word "hi" from the original testcase, then Firefox and Chrome agree that the second case (the one with an inner div) should be shorter.

(We actually collapse that one entirely, it seems, whereas Chrome just renders it a few pixels shorter, like we do in David's first testcase. This is true in Firefox/Chrome on Windows as well as on Linux, in this testcase.)

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: testcase 2

(oops, I let an experimental bonus edit into that version of the testcase (an added  ); I've now removed that to have the testcase be as I intended it to be.)

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 3 (like the first one, but with font-family: "Nimbus Sans" to make it repro on Ubuntu)

Here's a version of the original testcase with an explicit font-family: "Nimbus Sans", which makes the issue reproduce in Firefox on Ubuntu.

(I get: "No inner div: 19.5px, with inner div: 19px". The precise pixel values are somewhat dependant on device pixel ratio, so your mileage may vary if you're using HiDPI or full page zoom.)

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 4 (using ൠ as list character): gives more pixels of difference

For me, if I swap to another bullet character like ൠ, I get 3-4 pixels of difference.

Comment 5

[Daniel Holbert [:dholbert]]

Attachment: testcase 4 (using ൠ as list character): gives more pixels of difference

(now with meta charset="utf-8" so that the special character renders properly, and with the font removed since I can reproduce in this version without it)

Comment 6

[Daniel Holbert [:dholbert]]

Attachment: testcase 5

Here's a testcase where I'm including the bullet character itself in the text inside the inner div, in further down parts of the test.

This is sufficient to increase the list item's height to the expected size.

So the difference seems to be about whether-or-not we're including the height of the marker-character as a lower bound for the height of the li element.