Open Bug 1436801 Opened 5 years ago Updated 2 months ago
Vertical padding influences baseline alignment of text around span with "vertical-align:middle" (only in Firefox)
(I'm not 100% sure who's correct here, but filing because we differ from all other major browsers on this -- so even if we happen to be correct, there's a webompat concern.) STR: 1. Load attached testcase. EXPECTED RESULTS: Consisten text position within each box. ACTUAL RESULTS: In the first orange box, "AAA" and "CCC" are pushed lower than "BBB". In the second orange box, "BBB" is pushed lower. Latest Chrome, Edge, and Safari give "expected results". Firefox gives "actual results". This is the underlying issue in this webcompat bug: https://github.com/webcompat/web-bugs/issues/12629
Component: Layout: Text → Layout: Block and Inline
This testcase is a bit more interesting, with different font sizes. At first glance, I think: - Chrome is honoring "vertical-align:middle" by lining up the center-line of the span's *line box* (excluding its padding) with the center-line of the line that it's participating in. (i.e. "AAA" is vertically centered with respect to the bounding box of the "BBB" text, and vice versa) - Firefox is doing the same, except that it's *includes the padding* (and probably border) when determining the center-line of the span. (i.e. "AAA" is vertically centered with respect to the *purple border-box* around "BBB")
[ Triage 2017/02/20: P3 ]
Priority: -- → P3
Webcompat Priority: --- → ?
You need to log in before you can comment on or make changes to this bug.