Re: [css2] What is the containing block for absolutely positioned descendants of a relatively positioned table?

On 11/03/2014 03:13, Boris Zbarsky wrote:
> Consider this testcase:
>
> <!DOCTYPE html>
> <style>
>     table { caption-side: top;
>             position: relative;
>             border: 10px solid yellow; }
>     caption { opacity: 0.5; }
>     span { position: absolute; top: 0; left: 0 }
> </style>
> <body>
>     <table>
>       <caption>Some caption</caption>
>       <tr><td>
>           <span>Positioned</span>
>       </tr></td>
>     </table>
> </body>
>
> Where should the "Positioned" text be placed?  That is, what is the
> containing block for the positioned content?
>
> http://www.w3.org/TR/CSS21/visudet.html#containing-block-details and
> http://dev.w3.org/csswg/css-position/#def-containing-blocks both say
> it's the "padding edge of the ancestor" when the ancestor is
> block-level.  But a table generates two boxes: the table box and the
> table wrapper box.  Which box is the relevant one here?  Note that for
> the table wrapper box the padding, content, and border edges are all the
> same.
>
> As far as UA behavior, here's what I see:
>
> Gecko: uses table wrapper box
> IE11: uses table wrapper box
> WebKit/Blink: uses table wrapper box deflated by the border of the
>                 table box (!).
> Presto: Same as WebKit, afaict.
>
> It seems to me that the only consistent options here are using the
> padding edge of the table box or using the padding edge of the table
> wrapper box (the latter being what Gecko and IE do)...  I can't figure
> out why the WebKit behavior would be desirable; it seems strictly worse
> than using the padding edge of the table box.
>
> Thoughts?  Can we get this defined, please?

(By the way, we now have a public Editor’s Draft for CSS 2.)

http://dev.w3.org/csswg/css2/tables.html#model defines: > The computed 
values of properties 'position', 'float', 'margin-*',
> 'top', 'right', 'bottom', and 'left' on the table element are used on
> the table wrapper box and not the table box

This indicates that the table wrapper box (not the table box) is the 
ancestor that is positioned and should be used for the containing block, 
as Gecko and IE do.

Still, I agree this case is worth pointing out explicitly in the spec 
when defining "containing block". (The confusion between element, box 
and fragment strikes again.)

I filed https://www.w3.org/Bugs/Public/show_bug.cgi?id=25006 to track this.

-- 
Simon Sapin

Received on Tuesday, 11 March 2014 17:30:45 UTC