[LFC][IFC] Incorrect middle alignment for inline boxes when line-heig…

…ht is present

https://bugs.webkit.org/show_bug.cgi?id=225166
<rdar://77272112>

Reviewed by Simon Fraser.

Source/WebCore:

Let's use the layout bounds instead of the baseline when computing the inline box's baseline offset from the root inline box's baseline.
The difference here is that the layout bounds (per spec) is adjusted with the line-height value.
These two values (layout bounds's ascent and the inline box's baseline) resolve to the same value as long as the line-height property is not set.

Tests: fast/inline/incorrect-middle-alignment-with-line-height.html
       fast/inline/incorrect-middle-baseline-alignment-with-line-height.html

* layout/inlineformatting/InlineFormattingContextGeometry.cpp:
(WebCore::Layout::LineBoxBuilder::computeLineBoxHeightAndAlignInlineLevelBoxesVertically):

LayoutTests:

* fast/inline/incorrect-middle-alignment-with-line-height-expected.html: Added.
* fast/inline/incorrect-middle-alignment-with-line-height.html: Added.
* fast/inline/incorrect-middle-baseline-alignment-with-line-height-expected.html: Added.
* fast/inline/incorrect-middle-baseline-alignment-with-line-height.html: Added.


git-svn-id: http://svn.webkit.org/repository/webkit/trunk@276767 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,16 @@
+2021-04-29  Zalan Bujtas  <zalan@apple.com>
+
+        [LFC][IFC] Incorrect middle alignment for inline boxes when line-height is present
+        https://bugs.webkit.org/show_bug.cgi?id=225166
+        <rdar://77272112>
+
+        Reviewed by Simon Fraser.
+
+        * fast/inline/incorrect-middle-alignment-with-line-height-expected.html: Added.
+        * fast/inline/incorrect-middle-alignment-with-line-height.html: Added.
+        * fast/inline/incorrect-middle-baseline-alignment-with-line-height-expected.html: Added.
+        * fast/inline/incorrect-middle-baseline-alignment-with-line-height.html: Added.
+
 2021-04-28  Wenson Hsieh  <wenson_hsieh@apple.com>
 
         [iOS] Coalesce adjacent selection geometries when rendering individual selection quads

LayoutTests/fast/inline/incorrect-middle-alignment-with-line-height-expected.html

@@ -0,0 +1,14 @@
+<style>
+table {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 10;
+  background-color: green;
+  border-spacing: 0px;
+}
+td {
+  padding-top: 50px;
+  vertical-align: baseline;
+}
+</style>
+<div><table><td style="height: 300px; width: 0px;"></td><td>middle align with line-height</td></table></div>

LayoutTests/fast/inline/incorrect-middle-alignment-with-line-height.html

@@ -0,0 +1,14 @@
+<style>
+table {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 10;
+  background-color: green;
+  border-spacing: 0px;
+}
+
+td {
+  vertical-align: middle;
+}
+</style>
+<div><table><td style="height: 300px; width: 0px;"></td><td>middle align with line-height</td></table></div>

LayoutTests/fast/inline/incorrect-middle-baseline-alignment-with-line-height-expected.html

@@ -0,0 +1,10 @@
+<style>
+div {
+  font-family: Ahem;
+  font-size: 20px;
+  background-color: green;
+  height: 112px;
+  padding-top: 90px; 
+}
+</style>
+<div>middle align with line-height</div>

LayoutTests/fast/inline/incorrect-middle-baseline-alignment-with-line-height.html

@@ -0,0 +1,12 @@
+<style>
+div {
+  font-family: Ahem;
+  font-size: 20px;
+  line-height: 10;
+  background-color: green; 
+}
+span {
+  vertical-align: middle;
+}
+</style>
+<div><span>middle align with line-height</span></div>

Source/WebCore/ChangeLog

@@ -1,3 +1,21 @@
+2021-04-29  Zalan Bujtas  <zalan@apple.com>
+
+        [LFC][IFC] Incorrect middle alignment for inline boxes when line-height is present
+        https://bugs.webkit.org/show_bug.cgi?id=225166
+        <rdar://77272112>
+
+        Reviewed by Simon Fraser.
+
+        Let's use the layout bounds instead of the baseline when computing the inline box's baseline offset from the root inline box's baseline.
+        The difference here is that the layout bounds (per spec) is adjusted with the line-height value.
+        These two values (layout bounds's ascent and the inline box's baseline) resolve to the same value as long as the line-height property is not set.
+
+        Tests: fast/inline/incorrect-middle-alignment-with-line-height.html
+               fast/inline/incorrect-middle-baseline-alignment-with-line-height.html
+
+        * layout/inlineformatting/InlineFormattingContextGeometry.cpp:
+        (WebCore::Layout::LineBoxBuilder::computeLineBoxHeightAndAlignInlineLevelBoxesVertically):
+
 2021-04-29  Said Abou-Hallawa  <said@apple.com>
 
         [GPU Process] REGRESSION(r272888): Don't assert the validity of the dataURL mimeType inside GPU Process

Source/WebCore/layout/inlineformatting/InlineFormattingContextGeometry.cpp

@@ -503,12 +503,12 @@ void LineBoxBuilder::computeLineBoxHeightAndAlignInlineLevelBoxesVertically(Line
                     break;
                 case VerticalAlign::Middle: {
                     auto logicalTopOffsetFromParentBaseline = (inlineLevelBox.layoutBounds().height() / 2 + parentInlineBox.style().fontMetrics().xHeight() / 2);
-                    baselineOffsetFromParentBaseline = logicalTopOffsetFromParentBaseline - inlineLevelBox.baseline();
+                    baselineOffsetFromParentBaseline = logicalTopOffsetFromParentBaseline - inlineLevelBox.layoutBounds().ascent;
                     break;
                 }
                 case VerticalAlign::BaselineMiddle: {
                     auto logicalTopOffsetFromParentBaseline = inlineLevelBox.layoutBounds().height() / 2;
-                    baselineOffsetFromParentBaseline = logicalTopOffsetFromParentBaseline - inlineLevelBox.baseline();
+                    baselineOffsetFromParentBaseline = logicalTopOffsetFromParentBaseline - inlineLevelBox.layoutBounds().ascent;
                     break;
                 }
                 case VerticalAlign::Length: {