Counter mechanism on boxes or elements

Dear all,

I have a question regarding Microsoft IE8 test
'chapter_12\content-021.xht' (see below for the [stripped] test):

Elements with display:none or pseudo-elements with content:normal/none
(i.e. elements for which no boxes are rendered), have no impact on the
value of counters (counter-reset and counter-increment are ignored).
Therefore, it seems logical to implement the counter mechanism in the
boxes instead of the document elements. In this test, due to the
generation of an anonymous block box, an issue arises.

The :before pseudo element (on div1) generates an inline box that is
wrapped inside an anonymous block box (because the inner div is a block
box). The scope of the counter 'test' starts at the inline box. The
inner div is a sibling of the anonymous block box and is therefore not
in the scope of the first counter 'test'. The result of the second
generated content should therefore be 0 instead of 0.0.

If we follow the specification literally, the :before pseudo element
generates an element as the first child of div1, starting the scope of
counter 'test'. The inner div element is the next sibling of the pseudo
element and therefor *in* the scope. From this perspective, the test is
correct.

If we add "div { display:inline; }", no anonymous block box is generated
and the test renders as specified.

Btw, FireFox 3.6, Opera 10.10 en IE8 render 0.0, Chrome 4.0 renders 0.

Question: In the current CSS specification, does the counter mechanism
apply to the elements/document tree or to the boxes/render tree?

Regarding the fact that elements for which no boxes are generated have
no effect on counter values, it seems logical to define the counter
mechanism on the boxes/render tree instead of the document elements. In
general, we think it would be a good idea to add a remark to the
specification to clarify the situation above. 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        ...stripped...
        <style type="text/css">
            div:before
            {
                content: counters(test, ".");
                counter-reset: test;
            }
            #div1
            {
                border: 2px solid black;
            }
        </style>
    </head>
    <body>
        <p>Test passes if there are the numbers "0" and "0.0" in the box
below.</p>
        <div id="div1">
            <div></div>
       </div>
    </body>
</html>

Thanks in advance.

If you have any further questions, do not hesitate to contact me. 
 

Best Regards,
Robert Stam
 
TallComponents
Follow us @ twitter: http://twitter.com/tallcomponents

Received on Friday, 19 February 2010 20:06:46 UTC