Skip to content
Permalink
Browse files
Add margin when comptuing baseline position for tables.
https://bugs.webkit.org/show_bug.cgi?id=97239
rdar://problem/100910532

Reviewed by Brent Fulgham.

After computing the baseline of a table, we need to take into
consideration any margins that are shifting the element. Without adding
the margin to the baseline, any items that are basline against the table
may become offset by that amount.

* Source/WebCore/rendering/RenderTable.cpp:
(WebCore::RenderTable::baselinePosition const):

Canonical link: https://commits.webkit.org/255357@main
  • Loading branch information
sgill26 authored and pascoej committed Oct 10, 2022
1 parent 263b327 commit c0048e83eb237ba2dba8a01bfc46bf0de42412a2
Show file tree
Hide file tree
Showing 7 changed files with 194 additions and 3 deletions.
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baselines</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<style>
.container {
border: solid 1px black;
}
.block {
display: inline-block;
background: aqua;
}
.table {
display: inline-table;
font-size: 40px;
background: tan;
}
.margin {
margin-block-start: 50px;
}
</style>
<body>
<div class="container">
<div class="margin">
<div class="block">aaa</div>
<table class="table" cellspacing="0" cellpadding="0"><td>bbb</table>
</div>
</div>

</body>
</html>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baselines</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<style>
.container {
border: solid 1px black;
}
.block {
display: inline-block;
background: aqua;
}
.table {
display: inline-table;
font-size: 40px;
background: tan;
}
.margin {
margin-block-start: 50px;
}
</style>
<body>
<div class="container">
<div class="margin">
<div class="block">aaa</div>
<table class="table" cellspacing="0" cellpadding="0"><td>bbb</table>
</div>
</div>

</body>
</html>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<style>
.container {
border: solid 1px black;
writing-mode: vertical-rl;
}
.block {
display: inline-block;
background: aqua;
}
.table {
display: inline-table;
font-size: 40px;
background: tan;
}
.margin {
margin-block-start: 50px;
}
</style>
<body>
<div class="container">
<div class="margin">
<div class="block">aaa</div>
<table class="table" cellspacing="0" cellpadding="0"><td>bbb</table>
</div>
</div>
</body>
</html>
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<style>
.container {
border: solid 1px black;
writing-mode: vertical-rl;
}
.block {
display: inline-block;
background: aqua;
}
.table {
display: inline-table;
font-size: 40px;
background: tan;
}
.margin {
margin-block-start: 50px;
}
</style>
<body>
<div class="container">
<div class="margin">
<div class="block">aaa</div>
<table class="table" cellspacing="0" cellpadding="0"><td>bbb</table>
</div>
</div>
</body>
</html>
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baseline synthesis</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<link rel="match" href="inline-table-inline-block-baseline-vert-rl-ref.html">
<style>
.container {
border: solid 1px black;
writing-mode: vertical-rl;
}
.block {
display: inline-block;
background: aqua;
}
.table {
display: inline-table;
font-size: 40px;
background: tan;
margin-block-start: 50px;
}
</style>
<body>
<div class="container">
<div class="block">aaa</div>
<table class="table" cellspacing="0" cellpadding="0"><td>bbb</table>
</div>
</body>
</html>
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<title>CSS Box Alignment Test: inline-block and inline-table baselines</title>
<link rel="author" title="Sammy Gill" href="sammy.gill@apple.com">
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-export">
<link rel="match" href="inline-table-inline-block-baseline-ref.html">
<style>
.container {
border: solid 1px black;
}
.block {
display: inline-block;
background: aqua;
}
.table {
display: inline-table;
font-size: 40px;
background: tan;
margin-block-start: 50px;
}
</style>
<body>
<div class="container">
<div class="block">aaa</div>
<table class="table" cellspacing="0" cellpadding="0"><td>bbb</table>
</div>
</body>
</html>
@@ -1508,9 +1508,9 @@ RenderTableCell* RenderTable::cellAfter(const RenderTableCell* cell) const

LayoutUnit RenderTable::baselinePosition(FontBaseline baselineType, bool firstLine, LineDirectionMode direction, LinePositionMode linePositionMode) const
{
return valueOrCompute(firstLineBaseline(), [&] {
return RenderBox::baselinePosition(baselineType, firstLine, direction, linePositionMode);
});
if (auto baselinePos = firstLineBaseline())
return (direction == HorizontalLine ? marginTop() : marginRight()) + baselinePos.value();
return RenderBox::baselinePosition(baselineType, firstLine, direction, linePositionMode);
}

std::optional<LayoutUnit> RenderTable::inlineBlockBaseline(LineDirectionMode) const

0 comments on commit c0048e8

Please sign in to comment.