Re: [CSS21] Is a replaced element allowed to be a table box?

On 15/07/2012 02:53, "Gérard Talbot" wrote:
>
> Le Sam 14 juillet 2012 19:45, Anton Prowse a écrit :
>> On 15/05/2012 00:01, Anton Prowse wrote:
>>> 17.2 (The CSS table model) says:
>>>
>>>     # The following 'display' values assign table formatting rules to  an
>>>     # arbitrary element:
>>>     #
>>>     # table [...]
>>>     # [...]
>>>     #
>>>     # Replaced elements with these 'display' values are treated as  their
>>>     # given display types during layout. For example, an image that is
>>>     # set to 'display: table-cell' will fill the available cell space,
>>>     # and its dimensions might contribute towards the table sizing
>>>     # algorithms, as with an ordinary cell.
>>>
>>> So what's the deal with
>>>
>>> <img style="display:table">
>>>
>>> where presumably an anonymous table wrapper box is generated around the
>>> image, but no caption box is present.
>>>
>>> Similarly, how about
>>>
>>> <div style="display:table">
>>>       <img style="display:table-row">
>>> </div>
>>>
>>> for example?
>>>
>>> Does table fix-up occur?  Does the image display?  If a table
>>> formatting context is established in the first example, does it
>>> make sense  that the image then displays?
>>
>> From what I can tell, Gecko takes a replaced element with  display:table
>> or display:table-row, gives the replaced element the used value
>> display:block and generates a wrapper box with used value display:table
>> or display:table-row respectively.  Then it goes and does all the table
>> fix-up stuff.
>
> By "fix-up stuff", do you mean generate missing child(ren) or parent(s)
> (as stated in section 17.2.1 Anonymous table boxes/objects
>   http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes ) or do you mean
> something else?

Yup, I mean the anonymous box generation.

>> This seems like a pretty useful heuristic.  Can any other implementers
>> comment on what they do?
>>
>>
>> Also, I was surprised to discover that none of Gecko, Webkit and Presto
>> permits a replaced box to be a table-cell box. Instead they appear to
>> wrap the replaced box in an anonymous table cell, and change the display
>> type of the replaced box.  Trident seems fine with it though.

> Anton, do you have a particular test in mind for saying this?

I can't seem to reproduce the bit where they change the display type of 
the replaced box (observable via the dev tools for each browser) 
although I'm certain that I was seeing that when playing around 
yesterday.  But I've attached a test case that demonstrates the box 
generation issues.

Lots of fun observations fall out of that test case.

Firstly, it supports my claim above that no-one's really allowing a 
replaced box to be a table-cell box.  They're wrapping it in an 
anonymous table cell.  Even sneaky Trident I think, which has the 
courtesy to feign it by giving each replaced box its own cell, but which 
is caught out by another observation below.

Now, in Gecko, notice how the replaced contents are baseline-aligned, as 
per the initial value of the 'vertical-align' property for the cells, 
and that the baseline of the first cell in the first row is the baseline 
of a line box, indicating that the replaced content in those cells is 
interpreted as being inline-level, probably inline-block.  Not so for 
Webkit, which determines the cell baseline to be the content area bottom 
edge, as does Trident.  (Hence we spot that those replaced table cells 
aren't table cells at all! The replaced elements are each wrapped in an 
anonymous table-cell.)  In fact, Trident cares so much about keeping the 
replaced child of the last cell on the first row aligned to that 
baseline that it allows that child to overlap its own cell's bottom 
border.  Heaven forbid that it overlap its own cell's /top/ border 
though!  (Try increasing the top border.)  Presto, on the other hand, 
bottom-aligns the cell contents.  Presto also bottom-aligns the 
cells+borders when distributing cells in the table grid, whereas 
everyone else top-aligns them.

> I ask because this test
>
> Image as 'display: table-cell'
> http://test.csswg.org/suites/css2.1/20110323/html4/table-cell-002.htm
>
> is passed by Chrome 20.0.1132.57 and Opera 12.0.

With only one replaced "table-cell", the smoke and mirrors work ;-)


So the question is, is there /really/ such a thing as a replaced 
table-cell?  Maybe other implementers could comment.  I got the 
impression that Simon Sapin had implemented this.

Cheers,
Anton Prowse
http://dev.moonhenge.net