Bug 161700 – Table's wrapper-box (not the table itself) should form containing block for abspos descendants (e.g. abspos should stomp on table border)

• Status: NEW
• Component: Layout and Rendering

[Daniel Holbert]

(Version info: I'm using Safari 9.1 on Mac OS X El Capitan, if it matters.)

What steps will reproduce the problem?
(1) Load testcase: https://jsfiddle.net/1mzw8vr3/

What is the expected output?
 No red should be visible.  (The lime abspos element should cover up the red border entirely.)

What do you see instead?
 The entire red border is visible.

Please use labels and text to provide additional information.
 If the container here were a block instead of a table, then Safari's rendering would be correct. However, since it's a table, the containing block for the lime element (for positioning & sizing) should be the *table wrapper box*, which is outside of the table's border-box.  So, the "0,0" position should make the lime box stomp on top of the border's upper-left corner, and the right/bottom:0 styling should also make the lime box stretch to entirely cover the rest of the border as well.

SPEC SUPPORT:
* FACT 1: the table wrapper box is outside of the table-border:
> The width of the table wrapper box is the
> border-edge width of the table box inside it
https://www.w3.org/TR/CSS21/tables.html#model

* FACT 2: the table wrapper box (and not the table) is what "position:relative" gets applied to in the testcase:
> The computed values of properties 'position' [...]
> on the table element are used on the table wrapper box
> and not the table box
https://www.w3.org/TR/CSS21/tables.html#model

* FACT 3: The absolutely positioned thing looks for the nearest positioned ancestor box (which in this case is the table wrapper box, per FACT 2) to use as its containing block.
> If the element has 'position: absolute', the containing block
> is established by the nearest ancestor with a 'position'
> of 'absolute', 'relative' or 'fixed', in the following way:
>   1. In the case that the ancestor is an inline element, [...]
>   2. Otherwise, the containing block is formed by
>      the padding edge of the ancestor.

Therefore: the containing block for the abspos element here (the lime thing) should be the rectangle that exactly covers up the red border -- the table wrapper-box.

Firefox and Edge both match my expectations here.

Also, I've filed https://bugs.chromium.org/p/chromium/issues/detail?id=644806 on this same bug in Chrome/Blink.

[Daniel Holbert]

Sorry, I left out a spec link for "FACT 3" -- that link is https://www.w3.org/TR/CSS22/visudet.html#containing-block-details

[Radar WebKit Bug Importer]

<rdar://problem/101170345>

[Karl Dubost]

Created attachment 462986 [details]
rendering in safari, firefox, chrome