From 92dc2faa10e1cafa8dfebed42e78ae156f8cb1df Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Mon, 18 Aug 2025 14:12:24 +0100
Subject: [PATCH] LibWeb/CSS: Use serialize_a_number() for Ratio serialization

---
 Libraries/LibWeb/CSS/Ratio.cpp                      | 13 +++++++++++--
 .../expected/interpolation-longhand-properties.txt  |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/Libraries/LibWeb/CSS/Ratio.cpp b/Libraries/LibWeb/CSS/Ratio.cpp
index e3b7efae597..435ef483d44 100644
--- a/Libraries/LibWeb/CSS/Ratio.cpp
+++ b/Libraries/LibWeb/CSS/Ratio.cpp
@@ -1,10 +1,11 @@
 /*
- * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2022-2025, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #include "Ratio.h"
+#include <LibWeb/CSS/Serialize.h>
 #include <math.h>
 
 namespace Web::CSS {
@@ -24,7 +25,15 @@ bool Ratio::is_degenerate() const
 
 String Ratio::to_string() const
 {
-    return MUST(String::formatted("{:.5} / {:.5}", m_first_value, m_second_value));
+    // https://drafts.csswg.org/cssom/#serialize-a-css-value
+    // -> <ratio>
+    // The numerator serialized as per <number> followed by the literal string " / ", followed by the denominator
+    // serialized as per <number>.
+    StringBuilder builder;
+    serialize_a_number(builder, m_first_value);
+    builder.append(" / "sv);
+    serialize_a_number(builder, m_second_value);
+    return builder.to_string_without_validation();
 }
 
 }
diff --git a/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt b/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt
index 600f85b64d9..56ef7dd19d4 100644
--- a/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt
+++ b/Tests/LibWeb/Text/expected/interpolation-longhand-properties.txt
@@ -2,7 +2,7 @@ At time 400:
   accent-color: rgb(78, 88, 99)
   align-content: flex-start
   animation-duration: 0s
-  aspect-ratio: 1.54415 / 1
+  aspect-ratio: 1.544154 / 1
   background-color: rgb(78, 88, 99)
   background-repeat: repeat-x
   bottom: auto