- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Mon, 10 Mar 2014 23:13:18 -0400
- To: www-style list <www-style@w3.org>
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? -Boris
Received on Tuesday, 11 March 2014 03:13:52 UTC