layout: Fix conflict resolution for collapsed borders differing in color (#35100)

https://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution
> If border styles differ only in color, then a style set on a cell wins
> over one on a row, which wins over a row group, column, column group
> and, lastly, table.

We were actually using the opposite order.

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-01-21 06:34:05 -08:00 committed by GitHub
parent c17668bb0e
commit acfd2e6de4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 179 additions and 33 deletions

View file

@ -45915,6 +45915,19 @@
{}
]
],
"border-conflict-style-107.html": [
"8b1c72d2bc3af7c5a7feab1d44db10c3acca1ae7",
[
null,
[
[
"/css/reference/ref-filled-green-200px-square.html",
"=="
]
],
{}
]
],
"border-dynamic-001.xht": [
"dc73fecbfa648689495586e9baa02e7c3f480ca6",
[

View file

@ -1,2 +0,0 @@
[subpixel-collapsed-borders-003.html]
expected: FAIL

View file

@ -0,0 +1,135 @@
<!DOCTYPE html>
<title>CSS Test: border conflict resolution - border styles that differ only in color</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution">
<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
<meta name="assert" content="If border styles differ only in color,
then a style set on a cell wins over one on a row,
which wins over a row group, column, column group and, lastly, table.
">
<style>
br { clear: both }
table { border-collapse: collapse; float: left; }
td { padding: 0 }
.loser { border: 25px solid red }
.winner { border: 25px solid green }
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<!-- Cell wins over row -->
<table>
<tr class="loser">
<td class="winner"></td>
</tr>
</table>
<!-- Cell wins over row group -->
<table>
<tbody class="loser">
<td class="winner"></td>
</tbody>
</table>
<!-- Cell wins over column -->
<table>
<col class="loser"></col>
<td class="winner"></td>
</table>
<!-- Cell wins over column group -->
<table>
<colgroup class="loser"></col>
<td class="winner"></td>
</table>
<br>
<!-- Cell wins over table -->
<table class="loser">
<td class="winner"></td>
</table>
<!-- Row wins over row group -->
<table>
<tbody class="loser"></col>
<tr class="winner">
<td></td>
</tr>
</tbody>
</table>
<!-- Row wins over column -->
<table>
<col class="loser"></col>
<tr class="winner">
<td></td>
</tr>
</table>
<!-- Row wins over column group -->
<table>
<colgroup class="loser"></colgroup>
<tr class="winner">
<td></td>
</tr>
</table>
<br>
<!-- Row wins over table -->
<table class="loser">
<tr class="winner">
<td></td>
</tr>
</table>
<!-- Row group wins over column -->
<table>
<col class="loser"></col>
<tbody class="winner"></col>
<td></td>
</tbody>
</table>
<!-- Row group wins over column group -->
<table>
<colgroup class="loser"></colgroup>
<tbody class="winner"></col>
<td></td>
</tbody>
</table>
<!-- Row group wins over table -->
<table class="loser">
<tbody class="winner"></col>
<td></td>
</tbody>
</table>
<br>
<!-- Column wins over column group -->
<table>
<colgroup class="loser">
<col class="winner"></col>
</colgroup>
<td></td>
</table>
<!-- Column wins over table -->
<table class="loser">
<col class="winner"></col>
<td></td>
</table>
<!-- Column group wins over table -->
<table class="loser">
<colgroup class="winner"></colgroup>
<td></td>
</table>
<!-- Table wins when alone -->
<table class="winner">
<td></td>
</table>