LibWeb/CSS: Use serialize_a_number() for Ratio serialization

Author: https://github.com/AtkinsSJ
Commit: 92dc2faa10
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5898

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();
 }
 
 }

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