mirror of
https://github.com/zebrajr/ladybird.git
synced 2025-12-06 00:19:53 +01:00
LibWeb: Always align inline text content to the alphabetic baseline
This fixes an issue where `vertical-align: middle` would incorrectly shift the text away from the natural alphabetic baseline. Fixing this makes many WPT table tests work correctly, so I'm also importing one of them here. :^)
This commit is contained in:
Andreas Kling
Tim Ledbetter
parent
20c859519b
commit
1b46a52cfc
|
|
@ -284,9 +284,15 @@ void LineBuilder::update_last_line()
|
||||||
effective_box_bottom_offset = fragment_box_state.margin_box_bottom();
|
effective_box_bottom_offset = fragment_box_state.margin_box_bottom();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
auto alphabetic_baseline = m_current_block_offset + line_box_baseline - fragment.baseline() + effective_box_top_offset;
|
||||||
|
|
||||||
|
// NOTE: Plain inline text content is always on the alphabetic baseline.
|
||||||
|
if (!fragment.is_atomic_inline())
|
||||||
|
return alphabetic_baseline;
|
||||||
|
|
||||||
switch (vertical_align) {
|
switch (vertical_align) {
|
||||||
case CSS::VerticalAlign::Baseline:
|
case CSS::VerticalAlign::Baseline:
|
||||||
return m_current_block_offset + line_box_baseline - fragment.baseline() + effective_box_top_offset;
|
return alphabetic_baseline;
|
||||||
case CSS::VerticalAlign::Top:
|
case CSS::VerticalAlign::Top:
|
||||||
return m_current_block_offset + effective_box_top_offset;
|
return m_current_block_offset + effective_box_top_offset;
|
||||||
case CSS::VerticalAlign::Middle: {
|
case CSS::VerticalAlign::Middle: {
|
||||||
|
|
@ -301,7 +307,7 @@ void LineBuilder::update_last_line()
|
||||||
case CSS::VerticalAlign::TextBottom:
|
case CSS::VerticalAlign::TextBottom:
|
||||||
case CSS::VerticalAlign::TextTop:
|
case CSS::VerticalAlign::TextTop:
|
||||||
// FIXME: These are all 'baseline'
|
// FIXME: These are all 'baseline'
|
||||||
return m_current_block_offset + line_box_baseline - fragment.baseline() + effective_box_top_offset;
|
return alphabetic_baseline;
|
||||||
}
|
}
|
||||||
VERIFY_NOT_REACHED();
|
VERIFY_NOT_REACHED();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
|
||||||
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>Reference rendering - no red, 3x3 monospace table</title>
|
||||||
|
<link rel="author" title="Opera" href="https://www.opera.com/" />
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
font-size: 2em;
|
||||||
|
border-spacing: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 1px;
|
||||||
|
left: 1px;
|
||||||
|
right: 1px;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
#red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
#green {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>There should be no red below, except for antialiasing issues.</p>
|
||||||
|
<div>
|
||||||
|
<table id="red">
|
||||||
|
<tr>
|
||||||
|
<td>Row 1, Col 1</td>
|
||||||
|
<td>Row 1, Col 2</td>
|
||||||
|
<td>Row 1, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row 22, Col 1</td>
|
||||||
|
<td>Row 22, Col 2</td>
|
||||||
|
<td>Row 22, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row 333, Col 1</td>
|
||||||
|
<td>Row 333, Col 2</td>
|
||||||
|
<td>Row 333, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
<table id="green">
|
||||||
|
<tr>
|
||||||
|
<td>Row 1, Col 1</td>
|
||||||
|
<td>Row 1, Col 2</td>
|
||||||
|
<td>Row 1, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row 22, Col 1</td>
|
||||||
|
<td>Row 22, Col 2</td>
|
||||||
|
<td>Row 22, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row 333, Col 1</td>
|
||||||
|
<td>Row 333, Col 2</td>
|
||||||
|
<td>Row 333, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||||
|
<head>
|
||||||
|
<title>CSS Test: Auto-imported from Gecko test dynamic-removal-3.html</title>
|
||||||
|
<link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/>
|
||||||
|
<link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes"/>
|
||||||
|
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/tables/reference/no_red_3x3_monospace_table-ref.xht"/>
|
||||||
|
<meta name="flags" content='dom'/>
|
||||||
|
|
||||||
|
<script type="text/javascript"><![CDATA[
|
||||||
|
function doTest() {
|
||||||
|
var t = document.getElementById("t");
|
||||||
|
t.parentNode.removeChild(t);
|
||||||
|
document.documentElement.className = "";
|
||||||
|
}
|
||||||
|
]]></script>
|
||||||
|
</head>
|
||||||
|
<body style="font-family: monospace" onload="doTest()">
|
||||||
|
<p>There should be no red below, except for antialiasing issues.</p>
|
||||||
|
<div style="position: relative; font-size: 2em;">
|
||||||
|
<div style="position: relative; z-index: 1; color: red; padding: 1px;">
|
||||||
|
|
||||||
|
<span style="display: table-row-group">
|
||||||
|
<span style="display: table-cell">Row 1, Col 1</span>
|
||||||
|
<span style="display: table-cell">Row 1, Col 2</span>
|
||||||
|
<span style="display: table-cell">Row 1, Col 3</span>
|
||||||
|
</span>
|
||||||
|
<span style="display: table-row-group">
|
||||||
|
<span style="display: table-cell">Row 22, Col 1</span>
|
||||||
|
<span id="t" style="display: table-row">To be removed</span>
|
||||||
|
<span style="display: table-cell">Row 22, Col 2</span>
|
||||||
|
<span style="display: table-cell">Row 22, Col 3</span>
|
||||||
|
</span>
|
||||||
|
<span style="display: table-row-group">
|
||||||
|
<span style="display: table-cell">Row 333, Col 1</span>
|
||||||
|
<span style="display: table-cell">Row 333, Col 2</span>
|
||||||
|
<span style="display: table-cell">Row 333, Col 3</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style="position: absolute; z-index: 2; top: 0; color: green; padding: 1px;">
|
||||||
|
|
||||||
|
<table cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; border: none">
|
||||||
|
<tr>
|
||||||
|
<td>Row 1, Col 1</td>
|
||||||
|
<td>Row 1, Col 2</td>
|
||||||
|
<td>Row 1, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row 22, Col 1</td>
|
||||||
|
<td>Row 22, Col 2</td>
|
||||||
|
<td>Row 22, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Row 333, Col 1</td>
|
||||||
|
<td>Row 333, Col 2</td>
|
||||||
|
<td>Row 333, Col 3</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user