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
WebKit · Oct 10, 2022 · c0048e83eb237ba2dba8a01bfc46bf0de42412a2 · c0048e8
1 parent 263b327
commit c0048e83eb237ba2dba8a01bfc46bf0de42412a2
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 3 deletions.
diff --git a/...tform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-expected.html b/...tform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-expected.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>
diff --git a/...b-platform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.html b/...b-platform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-ref.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>
diff --git a/...sts/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-expected.html b/...sts/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-expected.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>
diff --git a/...rm-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.html b/...rm-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl-ref.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>
diff --git a/...atform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.html b/...atform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline-vert-rl.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>
diff --git a/...c/web-platform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.html b/...c/web-platform-tests/css/css-align/baseline-rules/inline-table-inline-block-baseline.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>
diff --git a/Source/WebCore/rendering/RenderTable.cpp b/Source/WebCore/rendering/RenderTable.cpp
@@ -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