From 4efbd0dc4de1238ee9b5e35d341a388a5cd6f44d Mon Sep 17 00:00:00 2001
From: Callum Law <callumlaw1709@outlook.com>
Date: Thu, 21 Aug 2025 17:12:56 +1200
Subject: [PATCH] LibWeb: Support relative lengths in `math-depth` calcs

As this is computed before font-size we use the parent's length
resolution context.
---
 Libraries/LibWeb/CSS/StyleComputer.cpp        | 18 ++++++++------
 Libraries/LibWeb/CSS/StyleComputer.h          |  2 +-
 .../math-depth-relative-lengths-in-calc.txt   |  1 +
 .../math-depth-relative-lengths-in-calc.html  | 24 +++++++++++++++++++
 4 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 Tests/LibWeb/Text/expected/css/math-depth-relative-lengths-in-calc.txt
 create mode 100644 Tests/LibWeb/Text/input/css/math-depth-relative-lengths-in-calc.html

diff --git a/Libraries/LibWeb/CSS/StyleComputer.cpp b/Libraries/LibWeb/CSS/StyleComputer.cpp
index ffcb8835d4b..c9d95e0711f 100644
--- a/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -2394,7 +2394,7 @@ GC::Ref<ComputedProperties> StyleComputer::create_document_style() const
         style->set_property(property_id, property_initial_value(property_id));
     }
 
-    compute_math_depth(style, nullptr, {});
+    compute_math_depth(style, {});
     compute_font(style, nullptr, {});
     absolutize_values(style, nullptr);
     style->set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect().width())));
@@ -2702,7 +2702,7 @@ GC::Ref<ComputedProperties> StyleComputer::compute_properties(DOM::Element& elem
     compute_custom_properties(computed_style, abstract_element);
 
     // 2. Compute the math-depth property, since that might affect the font-size
-    compute_math_depth(computed_style, &element, pseudo_element);
+    compute_math_depth(computed_style, abstract_element);
 
     // 3. Compute the font, since that may be needed for font-relative CSS units
     compute_font(computed_style, &element, pseudo_element);
@@ -3162,14 +3162,16 @@ void StyleComputer::compute_custom_properties(ComputedProperties&, DOM::Abstract
     abstract_element.set_custom_properties(move(resolved_custom_properties));
 }
 
-void StyleComputer::compute_math_depth(ComputedProperties& style, DOM::Element const* element, Optional<CSS::PseudoElement> pseudo_element) const
+void StyleComputer::compute_math_depth(ComputedProperties& style, Optional<DOM::AbstractElement> element) const
 {
     // https://w3c.github.io/mathml-core/#propdef-math-depth
 
+    auto element_to_inherit_style_from = element.has_value() ? element->element_to_inherit_style_from() : OptionalNone {};
+
     auto inherited_math_depth = [&]() {
-        if (!element || !element->element_to_inherit_style_from(pseudo_element))
+        if (!element_to_inherit_style_from.has_value())
             return InitialValues::math_depth();
-        return element->element_to_inherit_style_from(pseudo_element)->computed_properties()->math_depth();
+        return element_to_inherit_style_from->computed_properties()->math_depth();
     };
 
     auto const& math_depth = style.property(CSS::PropertyID::MathDepth).as_math_depth();
@@ -3177,8 +3179,10 @@ void StyleComputer::compute_math_depth(ComputedProperties& style, DOM::Element c
     auto resolve_integer = [&](StyleValue const& integer_value) {
         if (integer_value.is_integer())
             return integer_value.as_integer().integer();
-        if (integer_value.is_calculated())
-            return integer_value.as_calculated().resolve_integer_deprecated({}).value();
+        if (integer_value.is_calculated()) {
+            auto parent_length_resolution_context = element_to_inherit_style_from.has_value() ? Length::ResolutionContext::for_element(element_to_inherit_style_from.value()) : Length::ResolutionContext::for_window(*m_document->window());
+            return integer_value.as_calculated().resolve_integer({ .length_resolution_context = parent_length_resolution_context }).value();
+        }
         VERIFY_NOT_REACHED();
     };
 
diff --git a/Libraries/LibWeb/CSS/StyleComputer.h b/Libraries/LibWeb/CSS/StyleComputer.h
index 9c22ed9feab..9148c98e7ca 100644
--- a/Libraries/LibWeb/CSS/StyleComputer.h
+++ b/Libraries/LibWeb/CSS/StyleComputer.h
@@ -229,7 +229,7 @@ private:
     static RefPtr<Gfx::FontCascadeList const> find_matching_font_weight_descending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
     RefPtr<Gfx::FontCascadeList const> font_matching_algorithm(FlyString const& family_name, int weight, int slope, float font_size_in_pt) const;
     void compute_custom_properties(ComputedProperties&, DOM::AbstractElement) const;
-    void compute_math_depth(ComputedProperties&, DOM::Element const*, Optional<CSS::PseudoElement>) const;
+    void compute_math_depth(ComputedProperties&, Optional<DOM::AbstractElement>) const;
     void start_needed_transitions(ComputedProperties const& old_style, ComputedProperties& new_style, DOM::Element&, Optional<PseudoElement>) const;
     void resolve_effective_overflow_values(ComputedProperties&) const;
     void transform_box_type_if_needed(ComputedProperties&, DOM::Element const&, Optional<CSS::PseudoElement>) const;
diff --git a/Tests/LibWeb/Text/expected/css/math-depth-relative-lengths-in-calc.txt b/Tests/LibWeb/Text/expected/css/math-depth-relative-lengths-in-calc.txt
new file mode 100644
index 00000000000..3a2e3f4984a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/css/math-depth-relative-lengths-in-calc.txt
@@ -0,0 +1 @@
+-1
diff --git a/Tests/LibWeb/Text/input/css/math-depth-relative-lengths-in-calc.html b/Tests/LibWeb/Text/input/css/math-depth-relative-lengths-in-calc.html
new file mode 100644
index 00000000000..59ad422da13
--- /dev/null
+++ b/Tests/LibWeb/Text/input/css/math-depth-relative-lengths-in-calc.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+    <body>
+        <style>
+            #foo {
+                font-size: 0px;
+            }
+
+            #bar {
+                font-size: 2px;
+                math-depth: calc(sign(1em - 1px));
+            }
+        </style>
+        <div id="foo">
+            <div id="bar"></div>
+        </div>
+        <script src="../include.js"></script>
+        <script>
+            test(() => {
+                println(getComputedStyle(bar).mathDepth);
+            });
+        </script>
+    </body>
+</html>