Skip to content

Commit 5c9eec9

Browse files
Loirooriolpull[bot]
Loirooriol
authored and
pull[bot]
committed
Don't update row baseline if cell is empty (servo#31831)
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.
1 parent 749df1e commit 5c9eec9

File tree

7 files changed

+47
-7
lines changed

7 files changed

+47
-7
lines changed

‎components/layout_2020/table/layout.rs

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ impl CellLayout {
5454
fn outer_block_size(&self) -> Au {
5555
self.layout.content_block_size + (self.border.block_sum() + self.padding.block_sum()).into()
5656
}
57+
58+
/// Whether the cell has no in-flow or out-of-flow contents, other than collapsed whitespace.
59+
/// Note this logic differs from 'empty-cells', which counts abspos contents as empty.
60+
fn is_empty(&self) -> bool {
61+
self.layout.fragments.is_empty()
62+
}
5763
}
5864

5965
/// Information stored during the layout of rows.
@@ -1560,7 +1566,7 @@ impl<'a> TableLayout<'a> {
15601566

15611567
let row_block_offset = row_rect.start_corner.block;
15621568
let row_baseline = self.row_baselines[row_index];
1563-
if cell.effective_vertical_align() == VerticalAlignKeyword::Baseline {
1569+
if cell.effective_vertical_align() == VerticalAlignKeyword::Baseline && !layout.is_empty() {
15641570
let baseline = row_block_offset + row_baseline;
15651571
if row_index == 0 {
15661572
baselines.first = Some(baseline);

‎tests/wpt/meta-legacy-layout/css/CSS2/tables/table-vertical-align-baseline-008.xht.ini

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[table-vertical-align-baseline-008.xht]
2+
expected: FAIL

‎tests/wpt/meta/MANIFEST.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106867,6 +106867,19 @@
106867106867
{}
106868106868
]
106869106869
],
106870+
"table-vertical-align-baseline-008.xht": [
106871+
"60079c7ce26491a0d91c8e818a1a7ead406c3a20",
106872+
[
106873+
null,
106874+
[
106875+
[
106876+
"/css/CSS2/reference/ref-filled-green-100px-square.xht",
106877+
"=="
106878+
]
106879+
],
106880+
{}
106881+
]
106882+
],
106870106883
"table-visual-layout-017.xht": [
106871106884
"25067cb68385a520a10a31949d742b520c7e9cd6",
106872106885
[

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

Lines changed: 0 additions & 2 deletions
This file was deleted.

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

Lines changed: 0 additions & 2 deletions
This file was deleted.

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

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎tests/wpt/tests/css/CSS2/tables/table-vertical-align-baseline-008.xht

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
<head>
4+
<title>CSS Test: Test for baseline alignment of table cells</title>
5+
<link rel="author" title="Oriol Brufau" href="[email protected]" />
6+
<link rel="help" href="https://github.com/servo/servo/issues/31722" />
7+
<link rel="help" href="https://drafts.csswg.org/css2/#height-layout" />
8+
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
9+
<meta name="assert" content="Since the cell is empty, the baseline of the row
10+
is synthesized from the bottom content edge of the cell." />
11+
<style><![CDATA[
12+
.wrapper { float: left; font-size: 0; background: red }
13+
.wrapper > * { width: 50px; height: 100px; background: green }
14+
]]></style>
15+
</head>
16+
<body>
17+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
18+
<div class="wrapper">
19+
<div style="display: inline-block"></div>
20+
<table style="display: inline-table; border-spacing: 0">
21+
<td style="vertical-align: baseline; padding: 0"></td>
22+
</table>
23+
</div>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)