[Webkit-unassigned] [Bug 161700] New: Table's wrapper-box (not the table itself) should form containing block for abspos descendants (e.g. abspos should stomp on table border)

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=161700

            Bug ID: 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)
    Classification: Unclassified
           Product: WebKit
           Version: Safari 9
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: dholbert at mozilla.com
                CC: simon.fraser at apple.com

(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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160907/a893dd05/attachment.html>