Bug 36084 – baseline of inline-block is not bottom margin edge for overflow other than visible

• Component: New Bugs
• Status: RESOLVED DUPLICATE

CSS2.1 Section 10.8.1

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

# The baseline of an 'inline-block' is the baseline of its last line box in
# the normal flow, unless it has either no in-flow line boxes or if its
# 'overflow' property has a computed value other than 'visible', in which
# case the baseline is the bottom margin edge.

1. Nest two inline-block elements with borders in different colors (i.e.
border: 5px solid red and border: 5px solid blue).
2. The outside one should have padding:0
3. The inside one should have margin:0 and overflow:hidden (and use the default vertical-align setting of baseline)
4. Just click on the sample URL for a test case

Actual: The inner border touches the outer border on all four sides.

Expected:  The inner border should touch the outer border everywhere except along the bottom side.  Because the inner inline-block should have had its bottom margin placed on the text baseline of the outer inline-block leaving the space between the text baseline and the bottom border of the outer block empty producing a gap between the inner border and the outer border along the bottom side only.

Firefox and Opera render this correctly with the gap -- view it with one of these browsers to see the gap.

The problem seems to be that WebKit does not implement the quoted part of the specification above which says, "if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge."

Created attachment 50652 [details]
Simple HTML demonstrating bug

View in Firefox to see the correct rendering.

Created attachment 50653 [details]
Better example.  Shows bug and correct and incorrect samples.

This example shows the test displayed by the current browser along with browser independent examples of correct and incorrect rendering.
A 'passed' or 'failed' indication should also be shown indicating whether or not the test was correctly rendered.

[Dave Hyatt]

Not sure what to do with this bug, since it will be a compatibility issue if we try to fix it.  inline-block is used heavily on OS X with text-overflow/overflow-hidden text, and losing the ability to baseline-align those blocks seems like a flaw in the spec to me.

[Christian Biesinger]

https://codereview.chromium.org/21414002/

[Myles C. Maxfield]

I wrote an exhaustive description of what is going on here in https://bugs.webkit.org/show_bug.cgi?id=157293#c4

*** This bug has been marked as a duplicate of bug 157293 ***