-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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]>
- Loading branch information
1 parent
010b43b
commit ff89103
Showing
13 changed files
with
236 additions
and
0 deletions.
There are no files selected for viewing
17 changes: 17 additions & 0 deletions
17
css/css-tables/tentative/collapsed-borders-painting-order-001.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the table is painted in front of the border of the | ||
| block descendant. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse"> | ||
| <td style="border: 50px solid green; padding: 0"> | ||
| <div style="border: 50px solid red; margin: -50px"></div> | ||
| </td> | ||
| </table> |
18 changes: 18 additions & 0 deletions
18
css/css-tables/tentative/collapsed-borders-painting-order-002.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the table is painted in front of the border of the | ||
| block descendant, even if the table has `position: relative`. | ||
| Gecko disagrees with this test. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; position: relative"> | ||
| <td style="border: 50px solid green; padding: 0"> | ||
| <div style="border: 50px solid red; margin: -50px"></div> | ||
| </td> | ||
| </table> |
18 changes: 18 additions & 0 deletions
18
css/css-tables/tentative/collapsed-borders-painting-order-003.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the table is painted in front of the border of the | ||
| block descendant, even if the table has `display: inline-table`. | ||
| Gecko disagrees with this test. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; display: inline-table"> | ||
| <td style="border: 50px solid green; padding: 0"> | ||
| <div style="border: 50px solid red; margin: -50px"></div> | ||
| </td> | ||
| </table> |
16 changes: 16 additions & 0 deletions
16
css/css-tables/tentative/collapsed-borders-painting-order-004.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the table is painted behind the border of the | ||
| following block sibling. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse"> | ||
| <td style="border: 50px solid red; padding: 0"></td> | ||
| </table> | ||
| <div style="border: 50px solid green; width: 0px; margin-top: -100px"></div> |
16 changes: 16 additions & 0 deletions
16
css/css-tables/tentative/collapsed-borders-painting-order-005.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the table is painted in front of the border of the | ||
| following block sibling, when the table has `position: relative`. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; position: relative"> | ||
| <td style="border: 50px solid green; padding: 0"></td> | ||
| </table> | ||
| <div style="border: 50px solid red; width: 0px; margin-top: -100px"></div> |
16 changes: 16 additions & 0 deletions
16
css/css-tables/tentative/collapsed-borders-painting-order-006.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the table is painted in front of the border of the | ||
| following block sibling, when the table has `display: inline-table`. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; display: inline-table"> | ||
| <td style="border: 50px solid green; padding: 0"></td> | ||
| </table> | ||
| <div style="border: 50px solid red; width: 0px; margin-top: -100px"></div> |
19 changes: 19 additions & 0 deletions
19
css/css-tables/tentative/collapsed-borders-painting-order-007.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted in front of the collapsed border | ||
| of the inner table. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse"> | ||
| <td style="border: 50px solid green; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px"> | ||
| <td style="border: 50px solid red; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |
20 changes: 20 additions & 0 deletions
20
css/css-tables/tentative/collapsed-borders-painting-order-008.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted in front of the collapsed border | ||
| of the inner table, even if the outer table has `position: relative`. | ||
| Gecko disagrees with this test. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; position: relative"> | ||
| <td style="border: 50px solid green; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px"> | ||
| <td style="border: 50px solid red; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |
19 changes: 19 additions & 0 deletions
19
css/css-tables/tentative/collapsed-borders-painting-order-009.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted behind the collapsed border | ||
| of the inner table, when the inner table has `position: relative`. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse"> | ||
| <td style="border: 50px solid red; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px; position: relative"> | ||
| <td style="border: 50px solid green; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |
19 changes: 19 additions & 0 deletions
19
css/css-tables/tentative/collapsed-borders-painting-order-010.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted behind the collapsed border | ||
| of the inner table, when both tables have `position: relative`. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; position: relative"> | ||
| <td style="border: 50px solid red; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px; position: relative"> | ||
| <td style="border: 50px solid green; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |
20 changes: 20 additions & 0 deletions
20
css/css-tables/tentative/collapsed-borders-painting-order-011.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted in front of the collapsed border | ||
| of the inner table, even if the outer table has `display: inline-table`. | ||
| Gecko disagrees with this test. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; display: inline-table"> | ||
| <td style="border: 50px solid green; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px"> | ||
| <td style="border: 50px solid red; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |
19 changes: 19 additions & 0 deletions
19
css/css-tables/tentative/collapsed-borders-painting-order-012.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted behind the collapsed border | ||
| of the inner table, when the inner table has `display: inline-table`. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; line-height: 0"> | ||
| <td style="border: 50px solid red; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px; display: inline-table; vertical-align: top"> | ||
| <td style="border: 50px solid green; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |
19 changes: 19 additions & 0 deletions
19
css/css-tables/tentative/collapsed-borders-painting-order-013.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <!DOCTYPE html> | ||
| <title>Painting order of collapsed table borders</title> | ||
| <link rel="author" title="Oriol Brufau" href="[email protected]"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-tables/#border-collapsing"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-position-4/#painting-order"> | ||
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/11570"> | ||
| <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> | ||
| <meta name="assert" content=" | ||
| The collapsed border of the outer table is painted behind the collapsed border | ||
| of the inner table, when both tables have `display: inline-table`. | ||
| "> | ||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
| <table style="border-collapse: collapse; line-height: 0; display: inline-table"> | ||
| <td style="border: 50px solid red; padding: 0"> | ||
| <table style="border-collapse: collapse; margin: -50px; display: inline-table; vertical-align: top"> | ||
| <td style="border: 50px solid green; padding: 0"></td> | ||
| </table> | ||
| </td> | ||
| </table> |