1233271 - Floated ::first-letter has incorrect height

Status: RESOLVED DUPLICATE of bug 290125

(Core :: Layout: Floats, defect)

Description

[Chris Rebert]

Attachment: Screenshot of incorrect rendering in Firefox

Steps to reproduce:
1. Open http://output.jsbin.com/jotama in Firefox 44.0a2 (2015-12-14)

Actual results:
The height of the 1st red rectangle is less than that of the 2nd red rectangle.
There is no blank red vertical space around the 1st "P".

Expected results:
Both red rectangles should look the same.
There should be some blank red vertical space around both "P"s.

Additional info:
This testcase appears to indicate that there's a bug in the calculation of the height of the ::first-letter pseudo-element when the pseudo-element is floated.

Original reports:
* https://github.com/Fyrd/caniuse/commit/60082f8ab08b993b4f61c0e6ab42f627c738d068#diff-05e7420e4850dc4a32ef5eef4b70da07
* http://stackoverflow.com/questions/33101151/why-does-firefox-remove-space-above-and-below-the-first-letter-when-floating-fi

Comment 1

[Chris Rebert]

Chrome, Safari, and MS Edge all match each other and render the example correctly.

Comment 2

[Chris Rebert]

Attachment: Screenshot of correct rendering in Chrome

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

http://www.w3.org/TR/CSS21/selector.html#first-letter says:
  To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements.


This has been what we do for a long time (I think since it was more strongly recommended by the spec).

That said, given that no other implementation does, we should probably stop doing so.

I think this is a duplicate of other bugs on the issue.

Comment 4

[Chris Rebert]

So, duplicate of bug 290125 ?