mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
layout: Hide collapsed borders crossed by spanning cells (#35129)
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 <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau
GitHub
parent
aa54a0b1a6
commit
5e5379d3bf
7 changed files with 290 additions and 21 deletions
52
tests/wpt/meta/MANIFEST.json
vendored
52
tests/wpt/meta/MANIFEST.json
vendored
|
|
@ -247576,6 +247576,58 @@
|
|||
]
|
||||
],
|
||||
"tentative": {
|
||||
"border-collapse-spanning-cells-001.html": [
|
||||
"47d5c634f8396d674f56a1bd046462201d5ac48a",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"border-collapse-spanning-cells-002.html": [
|
||||
"83543b0708bfbcae732d7883bd28f46fe856fa7b",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"border-collapse-spanning-cells-003.html": [
|
||||
"9d28d4c730e79e6e858137483eb25d4d4bcde880",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"border-collapse-spanning-cells-004.html": [
|
||||
"1eb77891053aba7ce65afd3f4965a3ab1d7d45e3",
|
||||
[
|
||||
null,
|
||||
[
|
||||
[
|
||||
"/css/reference/ref-filled-green-200px-square.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"padding-percentage.html": [
|
||||
"67f8009de365a32275232b5c5b008072a0c8fc17",
|
||||
[
|
||||
|
|
|
|||
44
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-001.html
vendored
Normal file
44
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-001.html
vendored
Normal file
|
|
@ -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="obrufau@igalia.com">
|
||||
<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
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-002.html
vendored
Normal file
44
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-002.html
vendored
Normal file
|
|
@ -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="obrufau@igalia.com">
|
||||
<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
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-003.html
vendored
Normal file
47
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-003.html
vendored
Normal file
|
|
@ -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="obrufau@igalia.com">
|
||||
<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
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-004.html
vendored
Normal file
43
tests/wpt/tests/css/css-tables/tentative/border-collapse-spanning-cells-004.html
vendored
Normal file
|
|
@ -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="obrufau@igalia.com">
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue