Bug 164312

Summary: positioning of top not compensating rounding of height
Product: WebKit Reporter: Peter Krautzberger <peter>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, bfulgham, simon.fraser, zalan
Priority: P2    
Version: Safari 10   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=261212
Attachments:
Description Flags
IFC without forcing integral baseline none

Peter Krautzberger
Reported 2016-11-02 01:37:32 PDT
Reduced test case at http://codepen.io/pkra/pen/mEqOGx. It displays an "x" with a red background and next to it a span that has display:inline-block. Inside that inline-block are two spans with display:block, the second one being an "x" on the pink background, and the first a span with a thin height and green background. These should be stacked vertically, and the whole in-line block should be aligned on the baseline of the bottom span in the inline-block. (The test case adds the computed values of bottom/height/offset for convenience.) The expected behavior would be that the two x's should be aligned. However, the two x's are not aligned. This works as expected in Firefox and IE8+. Related Blink bug at https://bugs.chromium.org/p/chromium/issues/detail?id=661468
Attachments
IFC without forcing integral baseline (240.87 KB, image/png)
2022-07-14 20:26 PDT, alan 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Brent Fulgham
Comment 1 2022-07-14 16:55:01 PDT
None of the browsers appear to have the 'x's aligned in the first set of two X's. Is this test case valid?
alan
Comment 2 2022-07-14 20:25:15 PDT
(In reply to Brent Fulgham from comment #1) > None of the browsers appear to have the 'x's aligned in the first set of two > X's. Is this test case valid? It is a valid case. WebKit fails to align inline-block content at non-integer baseline positions. The fix is simply to remove all the integral floor/ceil/round in inline/block layout. I just did that (it's a rather involved and intrusive change) and the attached test case started working.
alan
Comment 3 2022-07-14 20:25:27 PDT
^^
alan
Comment 4 2022-07-14 20:26:48 PDT
Created attachment 460920 [details] IFC without forcing integral baseline
alan
Comment 5 2022-07-15 07:42:57 PDT
"at non-integer baseline positions" should read "at non-integral baseline position"
Ahmad Saleem
Comment 6 2022-11-12 15:29:10 PST
** Safari 16.1 ** span1: top: 8 bottom: 38.5 height: 30.5 offsetHeight: 31 span2: top: 8 bottom: 38.484375 height: 30.484375 offsetHeight: 30 ** Safari Technology Preview 157 ** span1: top: 8 bottom: 38.5 height: 30.5 offsetHeight: 31 span2: top: 8 bottom: 38.484375 height: 30.484375 offsetHeight: 30 *** Chrome Canary 109 *** span1: top: 8 bottom: 38 height: 30 offsetHeight: 30 span2: top: 8.0078125 bottom: 38 height: 29.9921875 offsetHeight: 30 *** Firefox Nightly 108 *** span1: top: 8 bottom: 39.30000305175781 height: 31.300003051757812 offsetHeight: 31 span2: top: 8 bottom: 39.30000305175781 height: 31.300003051757812 offsetHeight: 31
Note You need to log in before you can comment on or make changes to this bug.