You need to
before you can comment on or make changes to this bug.
CSS2.1 Section 10.8.1
# 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 an attachment (id=50652) [details]
Simple HTML demonstrating bug
View in Firefox to see the correct rendering.
Created an attachment (id=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.
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.