Another question about anonymous table objects

Consider the following document:

<!DOCTYPE html>
<html>
   <body>
     <div style="display: table">
       <div style="display: table-row-group">
         <div id="c1" style="display: table-cell">1</div>
         <div id="b" style="display: block">2</div>
         <div id="c2" style="display: table-cell">3</div>
       </div>
       <div style="display: table-row-group">
         <div style="display: table-row">
           <div style="display: table-cell">First</div>
           <div style="display: block">Second</div>
           <div style="display: table-cell">Third</div>
         </div>
       </div>
     </div>
   </body>
</html>

In Firefox, Safari, and Opera, this renders approximately like so:

   1    2     3
   FirstSecondThird

I don't have an IE8 beta on hand to test how that renders.  However, 
section 17.2.1 seems to prescribe a rendering more like:

   1
   2
   3
   FirstSecondThird

In what follows I'm referring to list numbers in section 17.2.1 of 
<http://www.w3.org/TR/2007/CR-CSS21-20070719>, not the current 
WG-internal draft; the additional item about whitespace that has been 
inserted in the latter doesn't matter here; if desired, assume that all 
inter-tag whitespace has been removed from the above example.

Applying the rules in section 17.2.1, in order:

1)  - The 'table-cell' box with ID "c1" does not have a 'table-row'
     parent, so a 'table-row' box is generated around it.  There are
     no consecutive 'table-cell' siblings to span, so it just
     contains the one cell with id "c1".
     - The 'table-cell' box with ID "c2" does not have a 'table-row'
     parent, so a 'table-row' box is generated around it.  There are
     no consecutive 'table-cell' siblings to span, so it just
     contains the one cell with id "c2".
2)  This rule does not apply, since all 'table-row' boxes have
     'table-row-group' parents.
3)  This rule does not apply since there are no 'table-column' boxes.
4)  This rule does not apply, since all 'table-row-group' boxes
     have 'table' parents.
5)  This rule does not apply, since all the child boxes of the
     'table' box are 'table-row-group' boxes.
6)  The first 'table-row-group' box has a single child that is not
     a 'table-row' at this point: the block with ID "b".  A
     'table-row' box is generated around this block.  It spans no
     other boxes, since at this point the sibling boxes of the block
     are table-rows.
7)  A 'table-cell' box is generated around the block with ID "b".

As a result, each of the three boxes with IDs "c1", "b", "c2" ends up in 
a separate table-row.

I assume the intent is to give the rendering the browsers actually have, 
right?  If so, the spec text needs to change accordingly...

-Boris

Received on Monday, 9 March 2009 02:15:46 UTC