172073 - content of unordered list items shifted when contain empty DIV

Status: RESOLVED FIXED

(Core :: Layout: Block and Inline, defect)

Description

[Adam Hauner]

When list items contain empty DIV, its next content is offset down by one line.
But bullet of next item isn't offseted.

See testcase with broken rendering of Case A and IMHO correct rendering of 
Case B. 

2002100108/trunk/W2K

Note: MSIE 5 and MSIE 6 renders Case A same as Case B.

Comment 1

[Adam Hauner]

Attachment: testcase

Comment 2

[Adam Hauner]

Attachment: correct testcase

Comment 3

[Adam Hauner]

Key: +4xp (as NN4.8 renders Case A correctly), +regression (as 0.9.4 renders
Case  A correctly too).

Comment 4

[Michael Lefevre]

this does look wrong, and it's still the case with 1.2.1 on win2k. confirming.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Hmm... so what's going on here is that we align the list marker's baseline with
the baseline of the first line box in the <li>.

All good, but if the first child of the <li> is an empty <div>, the first line
box has zero height (makes sense) and the baseline of this line box is at the
top of the <li> box (put a border on the <li> elements in that testcase to see
what I mean).

Which leads to admittedly ugly rendering.

So in fact the content here is NOT offset -- the bullets are (arguably).

Marking qawanted, since I'm not sure what, if anything, the CSS spec has to say
about this (these are outside bullets, so I suspect is has nothing useful to
say....)

Comment 6

[Hixie (not reading bugmail)]

Actually it has everything to say. More recent CSS3 Lists Module drafts are even
more detailed.

Here is how I (as the editor of the Lists module) think it works, described in
terms of the CSS3 ::marker pseudo-element:

If the elements' 'list-style-position' property has the value outside, then the
value of the element's ::marker pseudo-element's 'content' property is formatted
in an independent marker box, outside the principal box. Marker boxes are
formatted as an inline-block (i.e., they fit in one line box), so they are not
as flexible as floats or absolutely positioned boxes.

The 'display' property always computes to inline-block on an 'outside' marker
pseudo-element. The 'float' and 'position' properties do not apply.

Marker boxes have padding, borders and margins, just like inline-block elements.
The marker box will be vertically aligned with the first line of content in the
principal box, as specified by the pseudo-element's 'vertical-align' property.
(The principal box is the main one generated for the element with its 'display'
property set to list-item, as opposed to the marker box.) The marker box
participates in the height calculations of the principal box's first line box.
Thus, markers are aligned with the first line of an element's content. If no
first line box exists in a principal box, the marker box establishes its line
box alone, as the first box of the principal block box. (The first line of a
principal box is the one matched by the box's '::first-line' pseudo-element. It
might not be a direct child of the box, but it must be in flow.)

The end of the marker box is horizontally aligned with where the start of a line
box directly inside the list-item element would be, given the vertical position
of the marker: for example in a left to right context, the right margin edge of
the marker box coincides with the left edge of the line box. Thus if a float
intersects the element, moving the line box start, the marker box is moved as
well. It is the responsibility of the author to ensure that sufficient margins
are provided on floats to prevent marker boxes overlapping with them. The box
model defines the properties 'float-displace' and 'indent-edge-reset' to control
how far line boxes are moved in the presence of floats.

Spaces at the front of the text are collapsed away according to the
'white-space' properties, as if the marker was not present.

If the value of the 'width' property is auto, the marker box content width is
that of the content, otherwise it is the value of 'width'. For values of 'width'
less than the content width, the overflow is visible. The 'overflow' property
does not apply. The 'text-align' property determines the horizontal alignment of
the content in the marker box.

Marker boxes may overlap principal boxes and other marker boxes. Overlap could
happen for several reasons. If several nested elements without inline content
all have marker boxes, for instance, or if a marker box has negative margins.
Marker boxes are rendered at the same stack level as inline content of the
principle box, as if it was the first box of the first line box.

The CSS2 'marker-offset' property is obsoleted in this model and has no effect.
(It is replaced by the 'margin-right' property in left-to-right text, and the
'margin-left' property in right-to-left text.)

Comment 7

[Boris Zbarsky [:bzbarsky]]

So once I sort through all the verbiage, we should be making the line box inside
the empty div be the height of the bullet, right?

(and wouldn't it make sense to use margin-end so that it's direction-independent?)

Comment 8

[Hixie (not reading bugmail)]

In the case of:

   <li><div></div></li>

...you end up with:

       ,--<li>--------------------.
       | ,-<div>----------------. |
 ,---+-|-|-+-linebox----------. | |
 | 1.| | | | (empty)          | | |
 `---+-|-|-+------------------' | |
       | `----------------------' |
       `--------------------------'

In the case of:

   <li><div></div><div>text</div></li>

...you end up with:

       ,--<li>--------------------.
       | ,-<div>----------------. |
       | `----------------------' |
       | ,-<div>----------------. |
 ,---+-|-|-+-linebox----------. | |
 | 1.| | | | Text             | | |
 `---+-|-|-+------------------' | |
       | `----------------------' |
       `--------------------------'

And you wouldn't use margin-end because there is unfortunately no such thing.

HTH.

Comment 9

[Boris Zbarsky [:bzbarsky]]

Hmm...  so there should be no line box in that first div at all?  Why?  (Note
that currently we not only align the bullet with that empty line box, we also
apply the first-line style of the <li> to it.  At least we're consistent....)

Comment 10

[Hixie (not reading bugmail)]

In 

  <div>
    <p></p>
    <p>Text</p>
  </div>

...the first line is "Text". So if you make the div into a list-item, its marker
will go into the "Text" line, since that is the first line. ::markers will only
_create_ a line box if there is no line box in the first place.

Comment 11

[Wayne Mery (:wsmwk)]

case A and case B look the same to me in mozilla, and look same as IE.
no idea what the dupe might be or what fixed it.

WFM?

Comment 12

[Adam Hauner]

(In reply to comment #11)
> case A and case B look the same to me in mozilla,

On Trunk Gecko? SeaMonkey 1.1.1 (with Gecko 1.8.1.2) testcases are rendered differently.

Comment 13

[Wayne Mery (:wsmwk)]

yes, appears fixed on trunk.

fails - Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a2pre) Gecko/20061227 SeaMonkey/1.5a (I think this was 1.1beta)

works - Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.9a2pre) Gecko/20070130 SeaMonkey/1.5a

Comment 14

[Boris Zbarsky [:bzbarsky]]

Yeah, this got fixed by the checkin for bug 367332.

Comment 15

[Boris Zbarsky [:bzbarsky]]

Added to reftest.