<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Table's wrapper-box (not the table itself) should form containing block for abspos descendants (e.g. abspos should stomp on table border)"
href="https://bugs.webkit.org/show_bug.cgi?id=161700">161700</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Table's wrapper-box (not the table itself) should form containing block for abspos descendants (e.g. abspos should stomp on table border)
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Layout and Rendering
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>dholbert@mozilla.com
</td>
</tr>
<tr>
<th>CC</th>
<td>simon.fraser@apple.com
</td>
</tr></table>
<p>
<div>
<pre>(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: <a href="https://jsfiddle.net/1mzw8vr3/">https://jsfiddle.net/1mzw8vr3/</a>
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:
<span class="quote">> The width of the table wrapper box is the
> border-edge width of the table box inside it</span >
<a href="https://www.w3.org/TR/CSS21/tables.html#model">https://www.w3.org/TR/CSS21/tables.html#model</a>
* FACT 2: the table wrapper box (and not the table) is what "position:relative" gets applied to in the testcase:
<span class="quote">> The computed values of properties 'position' [...]
> on the table element are used on the table wrapper box
> and not the table box</span >
<a href="https://www.w3.org/TR/CSS21/tables.html#model">https://www.w3.org/TR/CSS21/tables.html#model</a>
* 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.
<span class="quote">> 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.</span >
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 <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=644806">https://bugs.chromium.org/p/chromium/issues/detail?id=644806</a> on this same bug in Chrome/Blink.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>