Bug 164312 – positioning of top not compensating rounding of height

• Component: CSS
• Status: NEW

[Peter Krautzberger]

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

[Brent Fulgham]

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]

(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]

^^

[alan]

Created attachment 460920 [details]
IFC without forcing integral baseline

[alan]

"at non-integer baseline positions" should read "at non-integral baseline position"

[Ahmad Saleem]

** 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