synthesizedBaseline uses incorrect line under edge for vertical-lr an…

…d sideways items https://bugs.webkit.org/show_bug.cgi?id=263461 rdar://117273063 Reviewed by Alan Baradlay. To synthesize a baseline, the spec says the following: "synthesize the alphabetic baseline from the line-under line, and the central baseline by averaging the positions of the two edges or lines." When the writing mode is vertical-lr and text-orientation is sideways, we must synthesize the alphabetic baseline. This means that the baseline for the item in this writing-mode is its block-start and not the block-end like in vertical-rl writing mode. We can first determine the baseline that we are synthesizing according to the logic in: https://drafts.csswg.org/css-inline-3/#dominant-baseline-property If the baseline type is alphabetic and we are in a vertical-lr writing mode according to the formatting context root, then we can return 0_lu for the synthesized baseline. * LayoutTests/TestExpectations: * LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-container-baseline-001-expected.txt: * Source/WebCore/rendering/RenderBox.cpp: (WebCore::synthesizedBaseline): Canonical link: https://commits.webkit.org/269668@main
WebKit · Oct 23, 2023 · bc94fc4 · bc94fc4
1 parent 53f8f07
commit bc94fc4
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 6 deletions.
diff --git a/LayoutTests/TestExpectations b/LayoutTests/TestExpectations
@@ -4603,7 +4603,6 @@ webkit.org/b/221473 imported/w3c/web-platform-tests/css/css-flexbox/table-as-ite
 webkit.org/b/221474 imported/w3c/web-platform-tests/css/css-flexbox/svg-root-as-flex-item-002.html [ ImageOnlyFailure ]
 
 # align baseline in flexbox.
-webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-003.html [ ImageOnlyFailure ]
 webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-align-self-baseline-horiz-006.xhtml [ ImageOnlyFailure ]
 webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-001.html [ ImageOnlyFailure ]
 webkit.org/b/221478 imported/w3c/web-platform-tests/css/css-flexbox/flexbox-baseline-multi-line-vert-002.html [ ImageOnlyFailure ]

diff --git a/...3c/web-platform-tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under-expected.html b/...3c/web-platform-tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under-expected.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<body>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div style="width:100px; height: 100px; background-color: green;"></div>
+</body>
+</html>
diff --git a/...mported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under.html b/...mported/w3c/web-platform-tests/css/css-flexbox/baseline-synthesis-vert-lr-line-under.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<head>
+<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
+<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-export">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#line-under">
+<meta name="assert" content="Line under edge of vertical-lr/sideways item is at its block start edge">
+<style>
+.flexbox {
+    display: flex;
+    writing-mode: vertical-lr;
+    text-orientation: sideways;
+    align-items: baseline;
+    background-color: red;
+    position: relative;
+}
+.item {
+    width: 50px;
+    height: 50px;
+    background-color: green;
+}
+.wide {
+    width: 100px;
+}
+.absolute {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+}
+</style>
+</head>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<body>
+    <div class="flexbox">
+        <div class="item wide"></div>
+        <div class="item"></div>
+        <div class="item absolute"></div>
+    </div>
+</body>
diff --git a/...ed/w3c/web-platform-tests/css/css-grid/alignment/grid-container-baseline-001-expected.txt b/...ed/w3c/web-platform-tests/css/css-grid/alignment/grid-container-baseline-001-expected.txt
@@ -34,7 +34,7 @@ FAIL .wrapper 4 assert_equals:
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
 </div>
-offsetLeft expected 0 but got 75
+offsetLeft expected 0 but got 150
 FAIL .wrapper 5 assert_equals:
 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
@@ -45,7 +45,7 @@ FAIL .wrapper 5 assert_equals:
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
 </div>
-offsetLeft expected 0 but got 75
+offsetLeft expected 0 but got 150
 FAIL .wrapper 6 assert_equals:
 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
@@ -56,7 +56,7 @@ FAIL .wrapper 6 assert_equals:
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
 </div>
-offsetLeft expected 0 but got 75
+offsetLeft expected 0 but got 150
 FAIL .wrapper 7 assert_equals:
 <div class="wrapper" style="writing-mode: vertical-lr; text-orientation: sideways;">
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
@@ -67,7 +67,7 @@ FAIL .wrapper 7 assert_equals:
   </div>
   <div style="display: inline-block; width: 20px; height: 10px; background: black" data-offset-x="0"></div>
 </div>
-offsetLeft expected 0 but got 75
+offsetLeft expected 0 but got 150
 PASS .wrapper 8
 PASS .wrapper 9
 PASS .wrapper 10

diff --git a/Source/WebCore/rendering/RenderBox.cpp b/Source/WebCore/rendering/RenderBox.cpp
@@ -5692,14 +5692,33 @@ LayoutBoxExtent RenderBox::scrollPaddingForViewportRect(const LayoutRect& viewpo
 
 LayoutUnit synthesizedBaseline(const RenderBox& box, const RenderStyle& parentStyle, LineDirectionMode direction, BaselineSynthesisEdge edge)
 {
+    auto baselineType = [&] {
+        // https://drafts.csswg.org/css-inline-3/#alignment-baseline-property
+        // https://drafts.csswg.org/css-inline-3/#dominant-baseline-property
+
+        auto isHorizontalWritingMode = parentStyle.isHorizontalWritingMode();
+        auto textOrientation = parentStyle.textOrientation();
+
+        if (isHorizontalWritingMode || textOrientation == TextOrientation::Sideways)
+            return FontBaseline::AlphabeticBaseline;
+        if (textOrientation == TextOrientation::Upright || textOrientation == TextOrientation::Mixed)
+            return FontBaseline::CentralBaseline;
+
+        ASSERT_NOT_IMPLEMENTED_YET();
+        return FontBaseline::AlphabeticBaseline;
+    }();
+
+    if (baselineType == FontBaseline::AlphabeticBaseline && parentStyle.writingMode() == WritingMode::VerticalLr)
+        return 0_lu;
+
     auto boxSize = direction == HorizontalLine ? box.height() : box.width();
 
     if (edge == ContentBox)
         boxSize -= direction == HorizontalLine ? box.verticalBorderAndPaddingExtent() : box.horizontalBorderAndPaddingExtent();
     else if (edge == MarginBox)
         boxSize += direction == HorizontalLine ? box.verticalMarginExtent() : box.horizontalMarginExtent();
 
-    if (parentStyle.isHorizontalWritingMode() || parentStyle.textOrientation() == TextOrientation::Sideways)
+    if (baselineType == FontBaseline::AlphabeticBaseline)
         return boxSize;
     return boxSize / 2;
 }