Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-06 14:10:11 +01:00
Code Issues Projects Releases Packages Wiki Activity

Don't update row baseline if cell is empty (#31831)

Browse source 
Gecko, Blink and WebKit agree that the if a row only has empty cells,
its baseline should be at the bottom, not at the top.

There isn't interoperability when the cells are just empty-ish, so this
patch takes the simplest approach, aligning with Blink: any out-of-flow
or in-flow content other than collapsed whitespace counts as not empty.
This commit is contained in:
Oriol Brufau 2024-03-25 10:39:02 +01:00 • committed by GitHub
parent c50df5ccbe
commit dbe3cb8a3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 47 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -54,6 +54,12 @@ impl CellLayout {
fn outer_block_size(&self) -> Au { fn outer_block_size(&self) -> Au {
self.layout.content_block_size + (self.border.block_sum() + self.padding.block_sum()).into() self.layout.content_block_size + (self.border.block_sum() + self.padding.block_sum()).into()
} }
/// Whether the cell has no in-flow or out-of-flow contents, other than collapsed whitespace.
/// Note this logic differs from 'empty-cells', which counts abspos contents as empty.
fn is_empty(&self) -> bool {
self.layout.fragments.is_empty()
}
} }
/// Information stored during the layout of rows. /// Information stored during the layout of rows.
@ -1560,7 +1566,7 @@ impl<'a> TableLayout<'a> {
let row_block_offset = row_rect.start_corner.block; let row_block_offset = row_rect.start_corner.block;
let row_baseline = self.row_baselines[row_index]; let row_baseline = self.row_baselines[row_index];
if cell.effective_vertical_align() == VerticalAlignKeyword::Baseline { if cell.effective_vertical_align() == VerticalAlignKeyword::Baseline && !layout.is_empty() {
let baseline = row_block_offset + row_baseline; let baseline = row_block_offset + row_baseline;
if row_index == 0 { if row_index == 0 {
baselines.first = Some(baseline); baselines.first = Some(baseline);

2
tests/wpt/meta-legacy-layout/css/CSS2/tables/table-vertical-align-baseline-008.xht.ini Normal file
View file

@ -0,0 +1,2 @@
[table-vertical-align-baseline-008.xht]
expected: FAIL

13
tests/wpt/meta/MANIFEST.json
View file

@ -106867,6 +106867,19 @@
{} {}
] ]
], ],
"table-vertical-align-baseline-008.xht": [
"60079c7ce26491a0d91c8e818a1a7ead406c3a20",
[
null,
[
[
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
"=="
]
],
{}
]
],
"table-visual-layout-017.xht": [ "table-visual-layout-017.xht": [
"25067cb68385a520a10a31949d742b520c7e9cd6", "25067cb68385a520a10a31949d742b520c7e9cd6",
[ [

2
tests/wpt/meta/css/CSS2/normal-flow/max-width-applies-to-014.xht.ini
View file

@ -1,2 +0,0 @@
[max-width-applies-to-014.xht]
expected: FAIL

2
tests/wpt/meta/css/CSS2/normal-flow/min-height-applies-to-014.xht.ini
View file

@ -1,2 +0,0 @@
[min-height-applies-to-014.xht]
expected: FAIL

2
tests/wpt/meta/css/CSS2/normal-flow/min-width-applies-to-014.xht.ini
View file

@ -1,2 +0,0 @@
[min-width-applies-to-014.xht]
expected: FAIL

25
tests/wpt/tests/css/CSS2/tables/table-vertical-align-baseline-008.xht Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Test for baseline alignment of table cells</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com" />
<link rel="help" href="https://github.com/servo/servo/issues/31722" />
<link rel="help" href="https://drafts.csswg.org/css2/#height-layout" />
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
<meta name="assert" content="Since the cell is empty, the baseline of the row
is synthesized from the bottom content edge of the cell." />
<style><![CDATA[
.wrapper { float: left; font-size: 0; background: red }
.wrapper > * { width: 50px; height: 100px; background: green }
]]></style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div class="wrapper">
<div style="display: inline-block"></div>
<table style="display: inline-table; border-spacing: 0">
<td style="vertical-align: baseline; padding: 0"></td>
</table>
</div>
</body>
</html>