302924 - Wrong Z order of background

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[db]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.10) Gecko/20050720 Fedora/1.0.6-1.1.fc3 Firefox/1.0.6
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.10) Gecko/20050720 Fedora/1.0.6-1.1.fc3 Firefox/1.0.6

I've made a test page with only these two elements:

<div style="width: 150px; height: 130px; background: red;">foo foo foo foo foooo
foo foo foo foof foo foo foo foo foo</div>
<div style="width: 250px; height: 30px; background: yellow; margin-top: -100px;
margin-left: 50px"></div>

When rendered I see the red background of the first div, on top of that the
yellow background of the second div and last on top of these I see the text of
the first div.

Shouldn't the second div be either under the red background of the first div or
on top of both the background and text of the first div?

I've been trying to find out what the css standard say and as far as I can
understand the z-index of these elements are the same,  so they should be
painted as written like this in section 9.9 of the css2 standard:

"Boxes with the same stack level in a stacking context are stacked bottom-to-top
according to document tree order."

According to my understanding of this the yellow box should cover the text in
the example. Ie, the box including the text from the first div should be painted
before the box generated from the second div.

It's very possible that I've not read the standard correctly. It's not something
I read very often, to say the least :-)

Reproducible: Always

Comment 1

[db]

Attachment: Test case with the two div's

Comment 2

[Dave Townsend [:mossop]]

I see the yellow block on top of the red. The red's text down show over the top
of the yellow though, but I suspect this is something to do with the negative
margins. Not looked at the standard to figure it out though.

Comment 3

[db]

Yes, that's what I see as well and that I suspect to be wrong. I'd be very happy
if I wasn't and that the standard say something else.

A similar example is if you have 2 divs and the text of the first div doesn't
fit in its box. When rendered, should the background of the second div paint
over the text of the first div that overflows? I assume here that the background
of the second div is not transparent.

Comment 4

[Christian :Biesinger (don't email me, ping me on IRC)]

note http://www.w3.org/TR/CSS21/zindex.html#q2
in step 4, all backgrounds are painted
text is drawn in 6.1.4.3

thus, I believe mozilla's rendering to be correct.

Comment 5

[db]

Thanks Christian.

That's one complicated rule. Hard to figure out what it means. I have to admit
that when I tried to figure out the drawing order I missed that appendix. At
first glance it looks like mozilla is right (not surprising) and that I'll have
to spend some hours trying to decipher that appendix :-)

Sorry for waisting your time.