From 46bef977ff5baeabc9a886fbfa7cce951a1964f5 Mon Sep 17 00:00:00 2001
From: Sajid Anwar <sajidanwar94@gmail.com>
Date: Sat, 27 Jun 2026 04:18:36 +0000
Subject: [PATCH] Bug 2050458 - Restrict alignment-baseline synthesis to atomic
 inlines. r=layout-reviewers,dshin

Differential Revision: https://phabricator.services.mozilla.com/D308969
---
 layout/base/Baseline.cpp                      | 20 ++++----
 layout/generic/nsIFrame.cpp                   |  6 +++
 layout/generic/nsIFrame.h                     |  1 +
 ...ent-baseline-flex-item-export-001-ref.html | 26 ++++++++++
 ...ignment-baseline-flex-item-export-001.html | 48 +++++++++++++++++++
 5 files changed, 93 insertions(+), 8 deletions(-)
 create mode 100644 testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001.html

diff --git a/layout/base/Baseline.cpp b/layout/base/Baseline.cpp
index f7017a44a7db..70e26d870ccb 100644
--- a/layout/base/Baseline.cpp
+++ b/layout/base/Baseline.cpp
@@ -56,19 +56,23 @@ static nscoord SynthesizeBOffsetFromInnerBox(const nsIFrame* aFrame,
     MOZ_CRASH();
   })();
 
-  StyleAlignmentBaseline baseline = aFrame->AlignmentBaseline();
-  if (baseline == StyleAlignmentBaseline::Baseline) {
-    baseline = aWM.IsCentralBaseline() ? StyleAlignmentBaseline::Central
-                                       : StyleAlignmentBaseline::Alphabetic;
-  }
-
   BaselineSharingGroup group = aGroup;
   if (aWM.IsLineInverted()) {
     group = GetOppositeBaselineSharingGroup(aGroup);
   }
 
-  // Synthesize the inline baseline for an atomic inline from its margin box.
-  // See: https://www.w3.org/TR/css-inline-3/#baseline-synthesis-box
+  // Atomic inlines (inline boxes that are either replaced or which establish
+  // new non-inline formatting contexts) can synthesize a baseline according to
+  // its `alignment-baseline` property. Otherwise, synthesize the baseline
+  // using the default dominant baseline defined by the writing mode.
+  StyleAlignmentBaseline baseline = aFrame->AlignmentBaseline();
+  if (!aFrame->IsAtomicInline() ||
+      baseline == StyleAlignmentBaseline::Baseline) {
+    baseline = aWM.IsCentralBaseline() ? StyleAlignmentBaseline::Central
+                                       : StyleAlignmentBaseline::Alphabetic;
+  }
+
+  // See: https://drafts.csswg.org/css-inline-3/#baseline-synthesis-box
   switch (baseline) {
     case StyleAlignmentBaseline::Baseline:
       MOZ_ASSERT_UNREACHABLE("Baseline is already handled");
diff --git a/layout/generic/nsIFrame.cpp b/layout/generic/nsIFrame.cpp
index 8b332d2e3efb..3199c1e08f5a 100644
--- a/layout/generic/nsIFrame.cpp
+++ b/layout/generic/nsIFrame.cpp
@@ -597,6 +597,12 @@ bool nsIFrame::IsReplaced() const {
   return false;
 }
 
+bool nsIFrame::IsAtomicInline() const {
+  // See: https://drafts.csswg.org/css-display-4/#atomic-inline
+  return IsInlineOutside() &&
+         (IsReplaced() || !StyleDisplay()->IsInlineInsideStyle());
+}
+
 bool nsIFrame::ShouldPropagateRepaintsToRoot() const {
   if (!IsPrimaryFrame()) {
     // special case for table frames because style images are associated to the
diff --git a/layout/generic/nsIFrame.h b/layout/generic/nsIFrame.h
index 8d342754d629..8096bfa048f0 100644
--- a/layout/generic/nsIFrame.h
+++ b/layout/generic/nsIFrame.h
@@ -3631,6 +3631,7 @@ class nsIFrame : public nsQueryFrame {
 #endif
 
   bool IsReplaced() const;
+  bool IsAtomicInline() const;
 
   /**
    * Returns a transformation matrix that converts points in this frame's
diff --git a/testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001-ref.html b/testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001-ref.html
new file mode 100644
index 000000000000..a724beb90688
--- /dev/null
+++ b/testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-synthesis-box">
+  <link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
+  <meta name="flags" content="image" />
+  <meta charset="utf-8">
+  <style>
+    :root {
+      font: 200px/1 'BaselineDiagnostic';
+    }
+
+    .flex-container {
+      display: inline-flex;
+    }
+
+    img {
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <span>X<span class="flex-container"><img src="/images/checkerboard.svg"></span></span>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001.html b/testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001.html
new file mode 100644
index 000000000000..0c4b9a3a3b3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-inline/alignment-baseline/alignment-baseline-flex-item-export-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="help" href="https://drafts.csswg.org/css-inline-3/#baseline-synthesis-box">
+  <link rel="match" href="alignment-baseline-flex-item-export-001-ref.html">
+  <link rel="stylesheet" href="/fonts/baseline-diagnostic/baseline-diagnostic-font.css">
+  <script src="support/variant-class.js"></script>
+  <meta name="assert" content="alignment-baseline on a flex item does not affect the exported baseline of the flex container" />
+  <meta name="flags" content="image" />
+  <meta charset="utf-8">
+  <meta name="variant" content="?class=baseline">
+  <meta name="variant" content="?class=text-bottom">
+  <meta name="variant" content="?class=alphabetic">
+  <meta name="variant" content="?class=ideographic">
+  <meta name="variant" content="?class=middle">
+  <meta name="variant" content="?class=central">
+  <meta name="variant" content="?class=mathematical">
+  <meta name="variant" content="?class=hanging">
+  <meta name="variant" content="?class=text-top">
+  <style>
+    :root {
+      font: 200px/1 'BaselineDiagnostic';
+    }
+
+    .flex-container {
+      display: inline-flex;
+    }
+
+    img {
+      width: 100px;
+      height: 100px;
+    }
+
+    .baseline     img { alignment-baseline: baseline; }
+    .text-bottom  img { alignment-baseline: text-bottom; }
+    .alphabetic   img { alignment-baseline: alphabetic; }
+    .ideographic  img { alignment-baseline: ideographic; }
+    .middle       img { alignment-baseline: middle; }
+    .central      img { alignment-baseline: central; }
+    .mathematical img { alignment-baseline: mathematical; }
+    .hanging      img { alignment-baseline: hanging; }
+    .text-top     img { alignment-baseline: text-top; }
+  </style>
+</head>
+<body>
+  <span>X<span class="flex-container"><img src="/images/checkerboard.svg"></span></span>
+</body>
+</html>