layout: Include spanned gutters when laying out contents of table cell (#38290)

If a cell would e.g. span 2 columns, each 50px wide, separated by a 10px
gutter, then we used to lay out the contents of the cell with a 100px
wide containing block. Now we will include the size of the gutter.

Testing: Adding new test
Fixes: #38277

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
Oriol Brufau 2025-07-29 10:57:22 +02:00 committed by GitHub
parent 61273a4321
commit 7ce5de4e2d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 35 additions and 1 deletions

View file

@ -1091,11 +1091,14 @@ impl<'a> TableLayout<'a> {
.padding(containing_block_for_table.style.writing_mode) .padding(containing_block_for_table.style.writing_mode)
.percentages_relative_to(self.basis_for_cell_padding_percentage); .percentages_relative_to(self.basis_for_cell_padding_percentage);
let inline_border_padding_sum = border.inline_sum() + padding.inline_sum(); let inline_border_padding_sum = border.inline_sum() + padding.inline_sum();
let border_spacing_spanned =
self.table.border_spacing().inline * (cell.colspan - 1) as i32;
let mut total_cell_width: Au = (coordinate.x..coordinate.x + cell.colspan) let mut total_cell_width: Au = (coordinate.x..coordinate.x + cell.colspan)
.map(|column_index| self.distributed_column_widths[column_index]) .map(|column_index| self.distributed_column_widths[column_index])
.sum::<Au>() - .sum::<Au>() -
inline_border_padding_sum; inline_border_padding_sum +
border_spacing_spanned;
total_cell_width = total_cell_width.max(Au::zero()); total_cell_width = total_cell_width.max(Au::zero());
let containing_block_for_children = ContainingBlock { let containing_block_for_children = ContainingBlock {

View file

@ -107621,6 +107621,19 @@
{} {}
] ]
], ],
"border-spacing-095.html": [
"8e5c8f55ccaeb749894a63970ac349cfbce98d53",
[
null,
[
[
"/css/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"border-spacing-applies-to-016.xht": [ "border-spacing-applies-to-016.xht": [
"0536763244237b77645937fe30e4898f1efcbfb5", "0536763244237b77645937fe30e4898f1efcbfb5",
[ [

View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<title>CSS Test: Border-spacing: cell spanning multiple columns</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#propdef-border-spacing">
<link rel="help" href="https://github.com/servo/servo/issues/38277">
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
<meta name="assert" content="The cell spans 3 columns and 2 gutters, each 20px wide.
The contents of the cell should be able to use the entire 100px, not just the 60px
of the columns.">
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<table cellpadding="0" style="border-spacing: 20px; margin: -20px">
<tr>
<td colspan="3" style="width: 100px; background: red">
<div style="height: 100px; background: green"></div>
</td>
</tr>
</table>