What is the containing block for absolutely positioned descendants of a relatively positioned table?

Consider this testcase:

<!DOCTYPE html>
   table { caption-side: top;
           position: relative;
           border: 10px solid yellow; }
   caption { opacity: 0.5; }
   span { position: absolute; top: 0; left: 0 }
     <caption>Some caption</caption>

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 

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?


Received on Tuesday, 11 March 2014 03:13:52 UTC