Bug 13822

Summary:	CSS background color not drawn for overflown text in inline blocks
Product:	WebKit	Reporter:	Sridhar Gurivireddy <just1gb>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED INVALID
Severity:	Normal	CC:	mitz
Priority:	P2
Version:	523.x (Safari 3)
Hardware:	PC
OS:	OS X 10.4
URL:	http://just1gb.googlepages.com/inline-block-overflow.html

Description Sridhar Gurivireddy 2007-05-22 11:46:24 PDT

In the example below,

   <span>Here comes an <span style="background: silver; display: inline-block; width: 100px; vertical-align: top; height: 20px;">inline block with overflow.</span></span>

the text overflows to next line and the background color of "silver" applies to overflown text as well.

IE: behaves correctly
Firefox: Does not seem to properly impelemtn width and height for inline-blocks
Webkit: width and height of inline-blocks are implemented, however background color not drawn properly.

Repro: Use this URL http://just1gb.googlepages.com/inline-block-overflow.html

Comment 1 mitz 2007-05-22 12:04:02 PDT

Background color should not apply to overflow.

Comment 2 Dave Hyatt 2007-05-22 14:21:00 PDT

IE and FFX do not support display:inline-block.  Safari does.  Moreover Safari's rendering is correct, since the height of the inline-block has been specified to be 20px.  Background renders into the border box, not the overflow area.

Comment 3 Dave Hyatt 2007-05-22 14:21:42 PDT

Firefox 3 supports inline-block, and if you download, e.g., Gran Paradiso Alpha 4, you can see that it renders just like Safari.