From 6e92e1d7d59152a3d4cc0d6bb8b247da3c32e5f7 Mon Sep 17 00:00:00 2001
From: Oriol Brufau <obrufau@igalia.com>
Date: Mon, 1 Sep 2025 04:52:17 +0200
Subject: [PATCH] layout: Avoid setting baseline for phantom line boxes
 (#39055)

Phantom line boxes should be treated as non-existing for most purposes,
so don't let them affect the baseline of their block container.

Testing: An existing test passes, and also adding a new one which
doesn't rely on `<button>`

Signed-off-by: Oriol Brufau <obrufau@igalia.com>
---
 components/layout/flow/inline/mod.rs          |  8 ++-
 tests/wpt/meta/MANIFEST.json                  | 13 +++++
 .../button-layout/block-in-inline.html.ini    |  2 -
 .../visudet/inline-block-baseline-015.html    | 55 +++++++++++++++++++
 4 files changed, 73 insertions(+), 5 deletions(-)
 delete mode 100644 tests/wpt/meta/html/rendering/widgets/button-layout/block-in-inline.html.ini
 create mode 100644 tests/wpt/tests/css/CSS2/visudet/inline-block-baseline-015.html
diff --git a/components/layout/flow/inline/mod.rs b/components/layout/flow/inline/mod.rs
index 30099ce27a5..84df84332b4 100644
--- a/components/layout/flow/inline/mod.rs
+++ b/components/layout/flow/inline/mod.rs
@@ -993,9 +993,11 @@ impl InlineFormattingContextLayout<'_> {
             return;
         }
 
-        let baseline = baseline_offset + block_start_position;
-        self.baselines.first.get_or_insert(baseline);
-        self.baselines.last = Some(baseline);
+        if line_to_layout.has_content {
+            let baseline = baseline_offset + block_start_position;
+            self.baselines.first.get_or_insert(baseline);
+            self.baselines.last = Some(baseline);
+        }
 
         // The inline part of this start offset was taken into account when determining
         // the inline start of the line in `calculate_inline_start_for_current_line` so
diff --git a/tests/wpt/meta/MANIFEST.json b/tests/wpt/meta/MANIFEST.json
index 1010c1f3a96..f49618fcb20 100644
--- a/tests/wpt/meta/MANIFEST.json
+++ b/tests/wpt/meta/MANIFEST.json
@@ -118868,6 +118868,19 @@
         {}
        ]
       ],
+      "inline-block-baseline-015.html": [
+       "34b4de90b5432c058c25f54927799ac687d95abd",
+       [
+        null,
+        [
+         [
+          "/css/reference/ref-filled-green-200px-square.html",
+          "=="
+         ]
+        ],
+        {}
+       ]
+      ],
       "line-height-201.html": [
        "00ab2aa52755d27c5bbd3b41d91a6f8e138c2899",
        [
diff --git a/tests/wpt/meta/html/rendering/widgets/button-layout/block-in-inline.html.ini b/tests/wpt/meta/html/rendering/widgets/button-layout/block-in-inline.html.ini
deleted file mode 100644
index d342f0c6653..00000000000
--- a/tests/wpt/meta/html/rendering/widgets/button-layout/block-in-inline.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[block-in-inline.html]
-  expected: FAIL
diff --git a/tests/wpt/tests/css/CSS2/visudet/inline-block-baseline-015.html b/tests/wpt/tests/css/CSS2/visudet/inline-block-baseline-015.html
new file mode 100644
index 00000000000..34b4de90b54
--- /dev/null
+++ b/tests/wpt/tests/css/CSS2/visudet/inline-block-baseline-015.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>Vertical-align: baseline of inline-block with phantom line box</title>
+<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css2/#leading">
+<link rel="help" href="https://drafts.csswg.org/css2/#inline-formatting">
+<link rel="match" href="../../reference/ref-filled-green-200px-square.html">
+<meta name="assert" content="
+  From https://drafts.csswg.org/css2/#leading
+  > The baseline of an inline-block is the baseline of its last line box in the normal flow,
+  > unless it has either no in-flow line boxes or if its overflow property has a computed
+  > value other than visible, in which case the baseline is the bottom margin edge.
+
+  Here we have 2 inline-blocks. The 1st one is completely empty, so it baseline is its
+  bottom margin edge. The 2nd one has an empty span followed by a block.
+
+  The span would typically be placed in a line box. However, it's a phantom line box.
+  From https://drafts.csswg.org/css2/#inline-formatting
+  > Line boxes that contain no text, no preserved white space, no inline elements with
+  > non-zero margins, padding, or borders, and no other in-flow content (such as images,
+  > inline blocks or inline tables), and do not end with a preserved newline must be
+  > treated as zero-height line boxes for the purposes of determining the positions of
+  > any elements inside of them, and must be treated as not existing for any other purpose.
+
+  So for the purpose of finding the baseline of the 2nd inline-block we ignore the phantom
+  line box, and thus the baseline is also the bottom margin edge.
+
+  Therefore, the inline-blocks should have their bottom margin edges aligned.
+">
+
+<style>
+.wrapper {
+  width: 200px;
+  background: red;
+  line-height: 0;
+  font-size: 0;
+}
+.green {
+  width: 100px;
+  height: 200px;
+  background: green;
+}
+.inline-block {
+  display: inline-block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div class="wrapper">
+  <div class="inline-block green"></div>
+  <div class="inline-block">
+    <span></span>
+    <div class="green"></div>
+  </div>
+</div>
