Skip to content

Commit 4a30d0b

Browse files
Loirooriolservo-wpt-sync
Loirooriol
authored and
servo-wpt-sync
committed
layout: Fix painting order of collapsed table borders
In #35075 I painted them in front of the decorations (backgrounds and borders) of any block-level box in the same stacking context. I did that because other browsers paint them in front of the decorations of the descendants of the table, but my approach also painted them in front of decorations of following siblings of the table, which was wrong. This patch makes it so that collapsed table orders are painted in the same step as decorations. However, tables defer painting their collapsed borders after the decorations of their descendants. This matches Blink and WebKit, and brings us closer to Gecko (which is slightly different in some corner cases). Signed-off-by: Oriol Brufau <[email protected]>
1 parent 1272914 commit 4a30d0b

13 files changed

+236
-0
lines changed

‎css/css-tables/tentative/collapsed-borders-painting-order-001.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the table is painted in front of the border of the
10+
block descendant.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse">
14+
<td style="border: 50px solid green; padding: 0">
15+
<div style="border: 50px solid red; margin: -50px"></div>
16+
</td>
17+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-002.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the table is painted in front of the border of the
10+
block descendant, even if the table has `position: relative`.
11+
Gecko disagrees with this test.
12+
">
13+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
14+
<table style="border-collapse: collapse; position: relative">
15+
<td style="border: 50px solid green; padding: 0">
16+
<div style="border: 50px solid red; margin: -50px"></div>
17+
</td>
18+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-003.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the table is painted in front of the border of the
10+
block descendant, even if the table has `display: inline-table`.
11+
Gecko disagrees with this test.
12+
">
13+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
14+
<table style="border-collapse: collapse; display: inline-table">
15+
<td style="border: 50px solid green; padding: 0">
16+
<div style="border: 50px solid red; margin: -50px"></div>
17+
</td>
18+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-004.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the table is painted behind the border of the
10+
following block sibling.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse">
14+
<td style="border: 50px solid red; padding: 0"></td>
15+
</table>
16+
<div style="border: 50px solid green; width: 0px; margin-top: -100px"></div>

‎css/css-tables/tentative/collapsed-borders-painting-order-005.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the table is painted in front of the border of the
10+
following block sibling, when the table has `position: relative`.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse; position: relative">
14+
<td style="border: 50px solid green; padding: 0"></td>
15+
</table>
16+
<div style="border: 50px solid red; width: 0px; margin-top: -100px"></div>

‎css/css-tables/tentative/collapsed-borders-painting-order-006.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the table is painted in front of the border of the
10+
following block sibling, when the table has `display: inline-table`.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse; display: inline-table; vertical-align: top">
14+
<td style="border: 50px solid green; padding: 0"></td>
15+
</table>
16+
<div style="border: 50px solid red; width: 0px; margin-top: -100px"></div>

‎css/css-tables/tentative/collapsed-borders-painting-order-007.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted in front of the collapsed border
10+
of the inner table.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse">
14+
<td style="border: 50px solid green; padding: 0">
15+
<table style="border-collapse: collapse; margin: -50px">
16+
<td style="border: 50px solid red; padding: 0"></td>
17+
</table>
18+
</td>
19+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-008.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted in front of the collapsed border
10+
of the inner table, even if the outer table has `position: relative`.
11+
Gecko disagrees with this test.
12+
">
13+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
14+
<table style="border-collapse: collapse; position: relative">
15+
<td style="border: 50px solid green; padding: 0">
16+
<table style="border-collapse: collapse; margin: -50px">
17+
<td style="border: 50px solid red; padding: 0"></td>
18+
</table>
19+
</td>
20+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-009.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted behind the collapsed border
10+
of the inner table, when the inner table has `position: relative`.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse">
14+
<td style="border: 50px solid red; padding: 0">
15+
<table style="border-collapse: collapse; margin: -50px; position: relative">
16+
<td style="border: 50px solid green; padding: 0"></td>
17+
</table>
18+
</td>
19+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-010.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted behind the collapsed border
10+
of the inner table, when both tables have `position: relative`.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse; position: relative">
14+
<td style="border: 50px solid red; padding: 0">
15+
<table style="border-collapse: collapse; margin: -50px; position: relative">
16+
<td style="border: 50px solid green; padding: 0"></td>
17+
</table>
18+
</td>
19+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-011.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted in front of the collapsed border
10+
of the inner table, even if the outer table has `display: inline-table`.
11+
Gecko disagrees with this test.
12+
">
13+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
14+
<table style="border-collapse: collapse; display: inline-table">
15+
<td style="border: 50px solid green; padding: 0">
16+
<table style="border-collapse: collapse; margin: -50px">
17+
<td style="border: 50px solid red; padding: 0"></td>
18+
</table>
19+
</td>
20+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-012.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted behind the collapsed border
10+
of the inner table, when the inner table has `display: inline-table`.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse; line-height: 0">
14+
<td style="border: 50px solid red; padding: 0">
15+
<table style="border-collapse: collapse; margin: -50px; display: inline-table; vertical-align: top">
16+
<td style="border: 50px solid green; padding: 0"></td>
17+
</table>
18+
</td>
19+
</table>

‎css/css-tables/tentative/collapsed-borders-painting-order-013.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Painting order of collapsed table borders</title>
3+
<link rel="author" title="Oriol Brufau" href="[email protected]">
4+
<link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing">
5+
<link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570">
7+
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
8+
<meta name="assert" content="
9+
The collapsed border of the outer table is painted behind the collapsed border
10+
of the inner table, when both tables have `display: inline-table`.
11+
">
12+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
13+
<table style="border-collapse: collapse; line-height: 0; display: inline-table">
14+
<td style="border: 50px solid red; padding: 0">
15+
<table style="border-collapse: collapse; margin: -50px; display: inline-table; vertical-align: top">
16+
<td style="border: 50px solid green; padding: 0"></td>
17+
</table>
18+
</td>
19+
</table>

0 commit comments

Comments
 (0)