Bug 161700

Summary: Table's wrapper-box (not the table itself) should form containing block for abspos descendants (e.g. abspos should stomp on table border)
Product: WebKit Reporter: Daniel Holbert <dholbert>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: karlcow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 9   
Hardware: All   
OS: All   
Description Flags
rendering in safari, firefox, chrome none

Description Daniel Holbert 2016-09-07 11:31:47 PDT
(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.

* 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

* 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

* 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.
Comment 1 Daniel Holbert 2016-09-07 11:33:52 PDT
Sorry, I left out a spec link for "FACT 3" -- that link is https://www.w3.org/TR/CSS22/visudet.html#containing-block-details
Comment 2 Radar WebKit Bug Importer 2022-10-14 06:22:53 PDT
Comment 3 Karl Dubost 2022-10-14 06:23:58 PDT
Created attachment 462986 [details]
rendering in safari, firefox, chrome