Bug 36084 - baseline of inline-block is not bottom margin edge for overflow other than visible
: baseline of inline-block is not bottom margin edge for overflow other than vi...
Status: NEW
: WebKit
New Bugs
: 528+ (Nightly build)
: PC Mac OS X 10.5
: P2 Normal
Assigned To:
: https://bugs.webkit.org/attachment.cg...
: BlinkMergeCandidate
:
:
  Show dependency treegraph
 
Reported: 2010-03-12 21:09 PST by
Modified: 2013-08-01 09:42 PST (History)


Attachments
Simple HTML demonstrating bug (233 bytes, text/html)
2010-03-12 21:11 PST, mackyle@gmail.com
no flags Details
Better example. Shows bug and correct and incorrect samples. (2.73 KB, text/html)
2010-03-13 00:07 PST, mackyle@gmail.com
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-03-12 21:09:38 PST
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."
------- Comment #1 From 2010-03-12 21:11:28 PST -------
Created an attachment (id=50652) [details]
Simple HTML demonstrating bug

View in Firefox to see the correct rendering.
------- Comment #2 From 2010-03-13 00:07:34 PST -------
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.
------- Comment #3 From 2010-11-02 15:41:30 PST -------
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.
------- Comment #4 From 2013-08-01 09:42:40 PST -------
https://codereview.chromium.org/21414002/