[CSS21] z-index-020 test case is invalid

http://test.csswg.org/suites/css2.1/20110323/html4/z-index-020.htm

http://www.w3.org/TR/CSS21/zindex.html
Beginning at the root of the page, the HTML element enters the steps and paints its back grounds in step 1. You then continue on to step 2, 3. In step 4 we then look at the descendants of HTML (I am ignoring the HEAD element in this case it's not relevant). The in-flow child is the BODY we then paint its backgrounds which is step 4. We proceed for the HTML element through steps 5, 6, 7, 8, 9 and 10 since there is nothing matching these cases we then move on to the first element the BODY.

We are starting at step 1 again for the BODY. Step 1 does not apply nor does step 2 since we already painted the background earlier. Step 3 we have no positioned descendants so 3 does not apply. Step 4 we are now looking at the children of BODY which is the DIV but it is positioned so we can't do steps 4, 5, 6, 7, and when we get to 8 we generate a new stacking context created atomically for the DIV (test container). And steps 9 and 10 there is nothing to do for BODY.

Now we are at the DIV (test container) this is where things get tricky.


·         Step 1: does not apply element is not the root.

·         Step 2: the DIV (test container) is a block so we paint the background of silver

·         Step 3: We now look at the descendants of DIV (test container) and find that DIV (negative) is z-index: -1 and create a stacking context for it and start over for this element since it is the first to be processed.

o   Step 3.1: for the DIV (negative) it's not a root element

o   Step 3.2: it's a block level element paint its background this means that the navy box is painted on top of the silver background of the DIV (test container) first

o   The remaining steps 3-10 don't apply since there are no descendants of DIV (negative). This means we unwind out of this section and go back to the DIV (test container) steps

·         Step 4: We are again looking at the remaining block elements the only one that falls into step 4 is DIV (block) we paint its background which is supposed to be fuchsia but is an invalid rule in the CSS so we paint nothing.

·         Step 5: We are now looking for floating descendants of DIV (test container) we find one DIV (float) and create a new stacking context so we need to go back to step 1 for DIV (float).

o   Step 5.1: for the DIV (float) it is not a root element

o   Step 5.2: it is a block level element so paint the background of DIV (float) which is blue. This will paint the blue box  on top of the navy box of DIV (negative)

o   The remaining steps 3-10 do not apply since there are no matching descendants. This means we unwind out of this section and go back to the DIV (test container) steps.

·         Step 6: There are no inline elements in DIV (test container)

·         Step 7: We first come across DIV (outline) as the first candidate (in tree order) that falls into this step.

o   Steps 7.1, 7.2: don't apply since the DIV (outline) only has an outline.

o   Step 7.3: Paint the outline for the block level element DIV (outline) this will draw on top of the blue box DIV (float)

·         Step 7: There are other candidates that we need to consider (in tree order) we need to handle DIV (inline).

o   Step 7.1: does not apply since the element is not replaced.

o   Step 7.2: applies since we have an inline-block element that creates a line box.

§  Step 7.2.1: We paint the background of aqua for the DIV (inline) this is painted on top of the fuchsia outline of DIV (outline). We also act like we create a new stacking context because it's an inline-block

§  Steps 7.2.2, 7.3 do not apply since we don't have outlines here.

·         Step 8: We now find that DIV (positioned) is the only box that is z-index: auto so we treat is as if it was a new stacking context and start over for this element

o   Step 8.1: the element is not a root element

o   Step 8.2 the element is a block level element so we paint the background of DIV (positioned) lime on top of the DIV (inline) aqua box

o   The remaining steps 3-10 do not apply since there are no matching descendants. This means we unwind out of this section and go back to the DIV (test container) steps.

·         Step 9: We now just have the z-index: 1 element which is DIV (positive) it forms a new stacking context and we restart for it

o   Step 9.1: it's not a root element

o   Step 9.2: It is a block level element and we draw its backgrounds DIV (positive) paints a teal background on top of DIV (positioned) lime box

o   The remaining steps 3-10 do not apply since there are no matching descendants. This means we unwind out of this section and go back to the DIV (test container) steps.

·         Step 10: We don't have any outlines to draw (they were drawn in step 7) we are done.

Looking at this logic it seems as if the second reference for the test case is incorrect for the test. Since the outline is painted in step 7.3 it paints before the inline-block and thus will be behind the aqua background.


--
Thanks,
Arron Eicholz