LibWeb: Support individual translate CSS property

Author: https://github.com/awesomekling
Commit: 66a821e731
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2506
Reviewed-by: https://github.com/shannonbooth

Libraries/LibWeb/CSS/CSSStyleValue.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2023, Andreas Kling <andreas@ladybird.org>
+ * Copyright (c) 2018-2024, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  * Copyright (c) 2022-2023, MacDue <macdue@dueutil.tech>
@@ -56,6 +56,7 @@
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransitionStyleValue.h>
+#include <LibWeb/CSS/StyleValues/TranslationStyleValue.h>
 #include <LibWeb/CSS/StyleValues/URLStyleValue.h>
 #include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
 
@@ -336,6 +337,12 @@ TransitionStyleValue const& CSSStyleValue::as_transition() const
     return static_cast<TransitionStyleValue const&>(*this);
 }
 
+TranslationStyleValue const& CSSStyleValue::as_translation() const
+{
+    VERIFY(is_translation());
+    return static_cast<TranslationStyleValue const&>(*this);
+}
+
 UnresolvedStyleValue const& CSSStyleValue::as_unresolved() const
 {
     VERIFY(is_unresolved());

Libraries/LibWeb/CSS/CSSStyleValue.h

@@ -132,6 +132,7 @@ public:
         Time,
         Transformation,
         Transition,
+        Translation,
         Unresolved,
         URL,
         ValueList,
@@ -322,6 +323,10 @@ public:
     TransitionStyleValue const& as_transition() const;
     TransitionStyleValue& as_transition() { return const_cast<TransitionStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_transition()); }
 
+    bool is_translation() const { return type() == Type::Translation; }
+    TranslationStyleValue const& as_translation() const;
+    TranslationStyleValue& as_translation() { return const_cast<TranslationStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_translation()); }
+
     bool is_unresolved() const { return type() == Type::Unresolved; }
     UnresolvedStyleValue const& as_unresolved() const;
     UnresolvedStyleValue& as_unresolved() { return const_cast<UnresolvedStyleValue&>(const_cast<CSSStyleValue const&>(*this).as_unresolved()); }

Libraries/LibWeb/CSS/ComputedValues.h

@@ -508,6 +508,7 @@ public:
     CSS::TransformBox const& transform_box() const { return m_noninherited.transform_box; }
     CSS::TransformOrigin const& transform_origin() const { return m_noninherited.transform_origin; }
     Optional<CSS::Transformation> const& rotate() const { return m_noninherited.rotate; }
+    Optional<CSS::Transformation> const& translate() const { return m_noninherited.translate; }
 
     Gfx::FontCascadeList const& font_list() const { return *m_inherited.font_list; }
     CSSPixels font_size() const { return m_inherited.font_size; }
@@ -684,6 +685,7 @@ protected:
         CSS::ObjectPosition object_position { InitialValues::object_position() };
         CSS::UnicodeBidi unicode_bidi { InitialValues::unicode_bidi() };
         Optional<CSS::Transformation> rotate;
+        Optional<CSS::Transformation> translate;
 
         Optional<MaskReference> mask;
         CSS::MaskType mask_type { InitialValues::mask_type() };
@@ -800,6 +802,7 @@ public:
     void set_transformations(Vector<CSS::Transformation> value) { m_noninherited.transformations = move(value); }
     void set_transform_box(CSS::TransformBox value) { m_noninherited.transform_box = value; }
     void set_transform_origin(CSS::TransformOrigin value) { m_noninherited.transform_origin = value; }
+    void set_translate(CSS::Transformation value) { m_noninherited.translate = move(value); }
     void set_box_sizing(CSS::BoxSizing value) { m_noninherited.box_sizing = value; }
     void set_vertical_align(Variant<CSS::VerticalAlign, CSS::LengthPercentage> value) { m_noninherited.vertical_align = move(value); }
     void set_visibility(CSS::Visibility value) { m_inherited.visibility = value; }

Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018-2022, Andreas Kling <andreas@ladybird.org>
+ * Copyright (c) 2018-2024, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2020-2021, the SerenityOS developers.
  * Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
  * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
@@ -76,6 +76,7 @@
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransitionStyleValue.h>
+#include <LibWeb/CSS/StyleValues/TranslationStyleValue.h>
 #include <LibWeb/CSS/StyleValues/URLStyleValue.h>
 #include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
 #include <LibWeb/Dump.h>
@@ -6928,6 +6929,33 @@ Optional<CSS::GridSize> Parser::parse_grid_size(ComponentValue const& component_
     return {};
 }
 
+RefPtr<CSSStyleValue> Parser::parse_translate_value(TokenStream<ComponentValue>& tokens)
+{
+    if (tokens.remaining_token_count() == 1) {
+        // "none"
+        if (auto none = parse_all_as_single_keyword_value(tokens, Keyword::None))
+            return none;
+    }
+
+    auto transaction = tokens.begin_transaction();
+
+    auto maybe_x = parse_length_percentage(tokens);
+    if (!maybe_x.has_value())
+        return nullptr;
+
+    if (!tokens.has_next_token()) {
+        transaction.commit();
+        return TranslationStyleValue::create(maybe_x.release_value(), LengthPercentage(Length::make_px(0)));
+    }
+
+    auto maybe_y = parse_length_percentage(tokens);
+    if (!maybe_y.has_value())
+        return nullptr;
+
+    transaction.commit();
+    return TranslationStyleValue::create(maybe_x.release_value(), maybe_y.release_value());
+}
+
 Optional<CSS::GridFitContent> Parser::parse_fit_content(Vector<ComponentValue> const& component_values)
 {
     // https://www.w3.org/TR/css-grid-2/#valdef-grid-template-columns-fit-content
@@ -7945,6 +7973,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue>> Parser::parse_css_value(Prope
         if (auto parsed_value = parse_transition_value(tokens); parsed_value && !tokens.has_next_token())
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::Translate:
+        if (auto parsed_value = parse_translate_value(tokens); parsed_value && !tokens.has_next_token())
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
     default:
         break;
     }

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -344,6 +344,7 @@ private:
     RefPtr<CSSStyleValue> parse_transform_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_transform_origin_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_transition_value(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue> parse_translate_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_grid_track_size_list(TokenStream<ComponentValue>&, bool allow_separate_line_name_blocks = false);
     RefPtr<CSSStyleValue> parse_grid_auto_track_sizes(TokenStream<ComponentValue>&);
     RefPtr<GridAutoFlowStyleValue> parse_grid_auto_flow_value(TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/Properties.json

@@ -2725,6 +2725,13 @@
       "easing-function"
     ]
   },
+  "translate": {
+    "animation-type": "custom",
+    "inherited": false,
+    "initial": "none",
+    "affects-layout": false,
+    "affects-stacking-context": true
+  },
   "unicode-bidi": {
     "animation-type": "none",
     "inherited": false,

Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -34,6 +34,7 @@
 #include <LibWeb/CSS/StyleValues/StringStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
 #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
+#include <LibWeb/CSS/StyleValues/TranslationStyleValue.h>
 #include <LibWeb/Layout/BlockContainer.h>
 #include <LibWeb/Layout/Node.h>
 #include <LibWeb/Platform/FontPlugin.h>
@@ -599,6 +600,20 @@ Optional<CSS::Transformation> StyleProperties::rotate(Layout::Node const& layout
     return CSS::Transformation(CSS::TransformFunction::Rotate3d, move(values));
 }
 
+Optional<CSS::Transformation> StyleProperties::translate() const
+{
+    auto const& value = property(CSS::PropertyID::Translate);
+    if (!value.is_translation())
+        return {};
+    auto const& translation = value.as_translation();
+
+    Vector<TransformValue> values;
+    values.append(translation.x());
+    values.append(translation.y());
+
+    return CSS::Transformation(CSS::TransformFunction::Translate, move(values));
+}
+
 static Optional<LengthPercentage> length_percentage_for_style_value(CSSStyleValue const& value)
 {
     if (value.is_length())

Libraries/LibWeb/CSS/StyleProperties.h

@@ -176,6 +176,7 @@ public:
     Optional<CSS::TransformBox> transform_box() const;
     CSS::TransformOrigin transform_origin() const;
     Optional<CSS::Transformation> rotate(Layout::Node const&) const;
+    Optional<CSS::Transformation> translate() const;
 
     Optional<CSS::MaskType> mask_type() const;
     Color stop_color() const;

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;
+};
+
+}