Open Bug 1436801 Opened 2 years ago Updated 11 months ago

Vertical padding influences baseline alignment of text around span with "vertical-align:middle" (only in Firefox)

Categories

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

57 Branch
defect

Tracking

()

Webcompat Priority revisit

People

(Reporter: dholbert, Unassigned)

References

Details

(Whiteboard: [webcompat])

Attachments

(2 files)

(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
Attached file testcase 1
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

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Webcompat Priority: --- → ?

See bug 1547409. Migrating whiteboard priority tags to program flags.

Webcompat Priority: ? → revisit
See Also: → 1563715
You need to log in before you can comment on or make changes to this bug.