1344638 - The behaviors of text-top / text-bottom are different to Blink and Edge when line-height is not 1.

Status: UNCONFIRMED

(Core :: Layout: Block and Inline, defect)

Description

[Chih-Hsuan Kuo [:tommykuo]]

I found the result of the following case rendered by Gecko is different to the one rendered by Blink.

https://jsfiddle.net/Lbgeo8ab/7/

Comment 1

[Chih-Hsuan Kuo [:tommykuo]]

I also tested on Edge, the behavior is also different to Gecko. But it's same with Blink.

Comment 2

[Xidorn Quan [:xidorn] UTC+10]

I don't see difference between Gecko and Blink on Windows from your testcase. Could you provide a screenshot to show what you're seeing?

Comment 3

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

Attachment: browser comparison without differences

Also no differences between Firefox and Chrome here on Windows 8.1 (except some anti-aliasing). See attached screenshot.

Comment 4

[Chih-Hsuan Kuo [:tommykuo]]

Attachment: Comparison on macOS 10.12

This screenshot is the difference what I see.

Comment 5

[Chih-Hsuan Kuo [:tommykuo]]

I found the difference is caused by the font. After install the font[1], I found the different behavior happens when the line-height is not 1. I'll attach the screenshot later.

[1]: https://github.com/w3c/web-platform-tests/tree/master/css/fonts/ahem

Comment 6

[Chih-Hsuan Kuo [:tommykuo]]

Oh, I know what the problem is. `line-height: normal` equals to `line-height: 1` on Chrome. But it's 1.2[1] in Firefox.

[1]: https://developer.mozilla.org/en/docs/Web/CSS/line-height