Bug 17101

Summary:

CSS line-height should be inherited from the UL to the LI

Product:

WebKit

Reporter:

Anantha Keesara <anantha>

Component:

Layout and Rendering

Assignee:

Dave Hyatt <hyatt>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

yuzhu.shen

Priority:

Version:

528+ (Nightly build)

Hardware:

OS:

Windows XP

URL:

http://www.linternaute.com/biographie

Attachments:

Description	Flags
Screenshot	none
Reduction	none
Patch that turns off the quirk for <li>'s line boxes.	eric: review+

Description Anantha Keesara 2008-01-30 14:58:32 PST

I. Steps:
Go to: http://www.linternaute.com/biographie

II. Issue:
Notice the spacing in between lines on left navigation. 

III. Other browsers:
In Safari, Opera, there is less spacing compared to FF and IE.

IV. Nightly tested: r29807

Comment 1 Anantha Keesara 2008-01-30 14:59:51 PST

Created attachment 18801 [details]
Screenshot

Comment 2 Anantha Keesara 2008-01-30 15:00:27 PST

Created attachment 18802 [details]
Reduction

Comment 3 Dave Hyatt 2008-01-30 15:23:17 PST

This is our line-shrinking quirk to match WinIE.  In strict mode, the line-height will be present.  I'm surprised that Firefox has the spacing.   Does WinIE also have the spacing?  If so, maybe there is something wrong with our quirk.

Comment 4 Dave Hyatt 2008-01-30 15:24:02 PST

Could the reporter test WinIE?

Comment 5 Anantha Keesara 2008-01-30 15:32:27 PST

WinIE also has the spacing. checked with both IE6 and IE7.

Comment 6 Dave Hyatt 2008-01-30 15:38:29 PST

Interesting.

Comment 7 Dave Hyatt 2008-01-30 15:43:00 PST

I am baffled.  I guess there is something about the text quirk that I don't understand.  Maybe it doesn't apply to root line boxes if the line contains any text at all?

Comment 8 Dave Hyatt 2008-01-30 15:51:02 PST

This seems to be something unique about <li>.  Even though list-style-type is none, I think there is a "phantom" bullet or list marker that is growing the height of the line.  This is insane.

Comment 9 Dave Hyatt 2008-01-30 15:55:00 PST

The best solution I can come up with is for <li> to make sure to turn off the quirk just for its root line boxes.

Comment 10 Dave Hyatt 2008-01-31 12:30:20 PST

Created attachment 18828 [details]
Patch that turns off the quirk for <li>'s line boxes.

Comment 11 Eric Seidel (no email) 2008-01-31 12:36:37 PST

Comment on attachment 18828 [details]
Patch that turns off the quirk for <li>'s line boxes.

Looks good.  Changelog and results, obviously.  Also, wrap your comment a bit shorter. :)

Comment 12 Dave Hyatt 2008-01-31 13:08:25 PST

Fixed.

Comment 13 Yuzhu Shen 2008-03-05 23:39:50 PST

It seems that r29892 for InlineFlowBox.h
    m_hasTextChildren = obj->style()->display() == LIST_ITEM;
doesn't solve the problem perfectly.

Consider this example in quirks mode,
===================================================
<li style="float:left; list-style-type: none">
    <img src="" height="99" width="186" alt="" style="border: 1px solid"/>
</li>
===================================================

Since the <li> has float:left in its style, it is displayed as block and m_hasTextChildren is set to false. As a result, the <li> doesn't have a gap under the <img>.

While in IE and Firefox, the <li> still has a gap under the <img>. (Tested in IE7, Firefox2/3.)