-
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: Hide collapsed borders crossed by spanning cells
For example, a cell with `rowspan="2"` can cross a collapsed border that was set on the rows. Now the slice of this row border that is crossed by the cell will be hidden. Signed-off-by: Oriol Brufau <[email protected]>
- Loading branch information
1 parent
dc0e225
commit ba05f6b
Showing
4 changed files
with
178 additions
and
0 deletions.
There are no files selected for viewing
44 changes: 44 additions & 0 deletions
44
css/css-tables/tentative/border-collapse-spanning-cells-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,44 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test (Tables): spanning cells crossing collapsed track 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://github.com/servo/servo/issues/35123"> | ||
| <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> | ||
| <meta name="assert" content=" | ||
| The cells with colspan cross columns with red borders. | ||
| These red borders shouldn't be visible. | ||
| "> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> | ||
|
|
||
| <style> | ||
| table { border-collapse: collapse; font: 20px/1 Ahem; color: transparent; background: green; } | ||
| table { border: 30px solid green; } | ||
| tr, col { border: 20px solid red } | ||
| td { padding: 0; border: 20px solid green; } | ||
| td[rowspan], td[colspan] { border: none } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <table> | ||
| <col></col> <col></col> <col></col> <col></col> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4">X X X X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4">X X X X</td> | ||
| </tr> | ||
| </table> |
44 changes: 44 additions & 0 deletions
44
css/css-tables/tentative/border-collapse-spanning-cells-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,44 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test (Tables): spanning cells crossing collapsed track 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://github.com/servo/servo/issues/35123"> | ||
| <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> | ||
| <meta name="assert" content=" | ||
| The cells with rowspan cross rows with red borders. | ||
| These red borders shouldn't be visible. | ||
| "> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> | ||
|
|
||
| <style> | ||
| table { border-collapse: collapse; font: 20px/1 Ahem; color: transparent; background: green; } | ||
| table { border: 30px solid green; } | ||
| tr, col { border: 20px solid red } | ||
| td { padding: 0; border: 20px solid green; } | ||
| td[rowspan], td[colspan] { border: none } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <table> | ||
| <col></col> <col></col> <col></col> <col></col> | ||
| <tr> | ||
| <td>X</td> | ||
| <td rowspan="4">X<br><br>X<br><br>X<br><br>X</td> | ||
| <td>X</td> | ||
| <td rowspan="4">X<br><br>X<br><br>X<br><br>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| </table> |
47 changes: 47 additions & 0 deletions
47
css/css-tables/tentative/border-collapse-spanning-cells-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,47 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test (Tables): spanning cells crossing collapsed track 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://github.com/servo/servo/issues/35123"> | ||
| <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> | ||
| <meta name="assert" content=" | ||
| The cell with colspan and rowspan crosses columns and rows with red borders. | ||
| These red borders shouldn't be visible. | ||
| "> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> | ||
|
|
||
| <style> | ||
| table { border-collapse: collapse; font: 20px/1 Ahem; color: transparent; background: green; } | ||
| table { border: 30px solid green; } | ||
| tr, col { border: 20px solid red } | ||
| td { padding: 0; border: 20px solid green; } | ||
| td[rowspan], td[colspan] { border: none } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <table> | ||
| <col></col> <col></col> <col></col> <col></col> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td colspan="2" rowspan="2">X X<br><br>X X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| </table> |
43 changes: 43 additions & 0 deletions
43
css/css-tables/tentative/border-collapse-spanning-cells-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,43 @@ | ||
| <!DOCTYPE html> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Test (Tables): spanning cells crossing collapsed track 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://github.com/servo/servo/issues/35123"> | ||
| <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> | ||
| <meta name="assert" content=" | ||
| The cells with colspan cross columns with red borders. | ||
| The cells with rowspan cross rows with red borders. | ||
| These red borders shouldn't be visible. | ||
| "> | ||
| <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> | ||
|
|
||
| <style> | ||
| table { border-collapse: collapse; font: 20px/1 Ahem; color: transparent; background: green; } | ||
| table { border: 30px solid green; } | ||
| tr, col { border: 20px solid red } | ||
| td { padding: 0; border: 20px solid green; } | ||
| td[rowspan], td[colspan] { border: none } | ||
| </style> | ||
|
|
||
| <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> | ||
|
|
||
| <table> | ||
| <col></col> <col></col> <col></col> <col></col> | ||
| <tr> | ||
| <td>X</td> | ||
| <td rowspan="4">X<br><br>X<br><br>X<br><br>X</td> | ||
| <td>X</td> | ||
| <td rowspan="4">X<br><br>X<br><br>X<br><br>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4">X X X X</td> | ||
| </tr> | ||
| <tr> | ||
| <td>X</td> | ||
| <td>X</td> | ||
| </tr> | ||
| <tr> | ||
| <td colspan="4">X X X X</td> | ||
| </tr> | ||
| </table> |