Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-06 16:45:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

62
components/layout_2020/table/layout.rs
View file

@ -2130,37 +2130,8 @@ impl<'a> TableLayout<'a> {
};
let all_rows = 0..self.table.size.height;
let all_columns = 0..self.table.size.width;
apply_border(&self.table.layout_style_for_grid(), &all_rows, &all_columns);
for column_group in &self.table.column_groups {
apply_border(
&column_group.layout_style(),
&all_rows,
&column_group.track_range,
);
}
for (column_index, column) in self.table.columns.iter().enumerate() {
apply_border(
&column.layout_style(),
&all_rows,
&(column_index..column_index + 1),
);
}
for row_group in &self.table.row_groups {
apply_border(
&row_group.layout_style(),
&row_group.track_range,
&all_columns,
);
}
for (row_index, row) in self.table.rows.iter().enumerate() {
apply_border(
&row.layout_style(),
&(row_index..row_index + 1),
&all_columns,
);
}
for row_index in 0..self.table.size.height {
for column_index in 0..self.table.size.width {
for row_index in all_rows.clone() {
for column_index in all_columns.clone() {
let cell = match self.table.slots[row_index][column_index] {
TableSlot::Cell(ref cell) => cell,
_ => continue,
@ -2173,6 +2144,35 @@ impl<'a> TableLayout<'a> {
);
}
}
for (row_index, row) in self.table.rows.iter().enumerate() {
apply_border(
&row.layout_style(),
&(row_index..row_index + 1),
&all_columns,
);
}
for row_group in &self.table.row_groups {
apply_border(
&row_group.layout_style(),
&row_group.track_range,
&all_columns,
);
}
for (column_index, column) in self.table.columns.iter().enumerate() {
apply_border(
&column.layout_style(),
&all_rows,
&(column_index..column_index + 1),
);
}
for column_group in &self.table.column_groups {
apply_border(
&column_group.layout_style(),
&all_rows,
&column_group.track_range,
);
}
apply_border(&self.table.layout_style_for_grid(), &all_rows, &all_columns);
self.collapsed_borders = Some(collapsed_borders);
}

13
tests/wpt/meta/MANIFEST.json vendored
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",
[

2
tests/wpt/meta/css/css-tables/subpixel-collapsed-borders-003.html.ini vendored
View file

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

135
tests/wpt/tests/css/CSS2/borders/border-conflict-style-107.html vendored Normal file
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>