Don't update row baseline if cell is empty (#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.
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

View file

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

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": [
"25067cb68385a520a10a31949d742b520c7e9cd6",
[

View file

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

View file

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

View file

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

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>