LibWeb: Support individual translate CSS property

Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.cpp

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <AK/String.h>
+#include <LibWeb/CSS/StyleValues/CSSMathValue.h>
+#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
+#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
+#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
+#include <LibWeb/CSS/StyleValues/TranslationStyleValue.h>
+
+namespace Web::CSS {
+
+// https://www.w3.org/TR/2021/WD-css-transforms-2-20211109/#individual-transform-serialization
+String TranslationStyleValue::to_string() const
+{
+    auto resolve_to_string = [](LengthPercentage const& value) -> Optional<String> {
+        if (value.is_length()) {
+            if (value.length().raw_value() == 0)
+                return {};
+        }
+        if (value.is_percentage()) {
+            if (value.percentage().value() == 0)
+                return {};
+        }
+        return value.to_string();
+    };
+
+    auto x_value = resolve_to_string(m_properties.x);
+    auto y_value = resolve_to_string(m_properties.y);
+
+    StringBuilder builder;
+    builder.append(x_value.value_or("0px"_string));
+    if (y_value.has_value()) {
+        builder.append(" "sv);
+        builder.append(y_value.value());
+    }
+
+    return builder.to_string_without_validation();
+}
+
+}

Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.h

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <andreas@ladybird.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/CSS/CSSStyleValue.h>
+#include <LibWeb/CSS/PercentageOr.h>
+
+namespace Web::CSS {
+
+class TranslationStyleValue : public StyleValueWithDefaultOperators<TranslationStyleValue> {
+public:
+    static ValueComparingNonnullRefPtr<TranslationStyleValue> create(LengthPercentage x, LengthPercentage y)
+    {
+        return adopt_ref(*new (nothrow) TranslationStyleValue(move(x), move(y)));
+    }
+
+    virtual ~TranslationStyleValue() override = default;
+
+    LengthPercentage const& x() const { return m_properties.x; }
+    LengthPercentage const& y() const { return m_properties.y; }
+
+    virtual String to_string() const override;
+
+    bool properties_equal(TranslationStyleValue const& other) const { return m_properties == other.m_properties; }
+
+private:
+    explicit TranslationStyleValue(
+        LengthPercentage x,
+        LengthPercentage y)
+        : StyleValueWithDefaultOperators(Type::Translation)
+        , m_properties {
+            .x = move(x),
+            .y = move(y),
+        }
+    {
+    }
+
+    struct Properties {
+        LengthPercentage x;
+        LengthPercentage y;
+        bool operator==(Properties const&) const = default;
+    } m_properties;
+};
+
+}