LibWeb: Support individual `translate` CSS property

Libraries/LibWeb/CMakeLists.txt

@@ -154,6 +154,7 @@ set(SOURCES
     CSS/StyleValues/StyleValueList.cpp
     CSS/StyleValues/TransformationStyleValue.cpp
     CSS/StyleValues/TransitionStyleValue.cpp
+    CSS/StyleValues/TranslationStyleValue.cpp
     CSS/StyleValues/UnresolvedStyleValue.cpp
     CSS/Supports.cpp
     CSS/SyntaxHighlighter/SyntaxHighlighter.cpp

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

Libraries/LibWeb/Forward.h

@@ -227,6 +227,7 @@ class TimeStyleValue;
 class Transformation;
 class TransformationStyleValue;
 class TransitionStyleValue;
+class TranslationStyleValue;
 class UnresolvedStyleValue;
 class URLStyleValue;
 class VisualViewport;

Libraries/LibWeb/Layout/Node.cpp

@@ -82,6 +82,8 @@ bool Node::can_contain_boxes_with_position_absolute() const
     // Any computed value other than none for the transform affects containing block and stacking context
     if (!computed_values().transformations().is_empty())
         return true;
+    if (computed_values().translate().has_value())
+        return true;
     if (computed_values().rotate().has_value())
         return true;
 
@@ -177,6 +179,9 @@ bool Node::establishes_stacking_context() const
     if (!computed_values().transformations().is_empty())
         return true;
 
+    if (computed_values().translate().has_value())
+        return true;
+
     if (computed_values().rotate().has_value())
         return true;
 
@@ -717,6 +722,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto rotate_value = computed_style.rotate(*this); rotate_value.has_value())
         computed_values.set_rotate(rotate_value.release_value());
 
+    if (auto translate_value = computed_style.translate(); translate_value.has_value())
+        computed_values.set_translate(translate_value.release_value());
+
     computed_values.set_transformations(computed_style.transformations());
     if (auto transform_box = computed_style.transform_box(); transform_box.has_value())
         computed_values.set_transform_box(transform_box.value());

Libraries/LibWeb/Layout/Node.h

@@ -184,6 +184,8 @@ public:
             return true;
         if (computed_values().rotate().has_value())
             return true;
+        if (computed_values().translate().has_value())
+            return true;
         return false;
     }
 

Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -1128,9 +1128,12 @@ void PaintableBox::resolve_paint_properties()
     set_box_shadow_data(move(resolved_box_shadow_data));
 
     auto const& transformations = computed_values.transformations();
+    auto const& translate = computed_values.translate();
     auto const& rotate = computed_values.rotate();
-    if (!transformations.is_empty() || rotate.has_value()) {
+    if (!transformations.is_empty() || translate.has_value() || rotate.has_value()) {
         auto matrix = Gfx::FloatMatrix4x4::identity();
+        if (translate.has_value())
+            matrix = matrix * translate->to_matrix(*this).release_value();
         if (rotate.has_value())
             matrix = matrix * rotate->to_matrix(*this).release_value();
         for (auto const& transform : transformations)

Libraries/LibWeb/Painting/PaintableBox.h

@@ -135,6 +135,8 @@ public:
             return true;
         if (computed_values().rotate().has_value())
             return true;
+        if (computed_values().translate().has_value())
+            return true;
         return false;
     }
 

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt

@@ -1,6 +1,6 @@
 All supported properties and their default values exposed from CSSStyleDeclaration from getComputedStyle:
 'cssText': ''
-'length': '204'
+'length': '205'
 'parentRule': 'null'
 'cssFloat': 'none'
 'WebkitAlignContent': 'normal'
@@ -552,6 +552,7 @@ All supported properties and their default values exposed from CSSStyleDeclarati
 'transition-property': 'all'
 'transitionTimingFunction': 'ease'
 'transition-timing-function': 'ease'
+'translate': 'none'
 'unicodeBidi': 'normal'
 'unicode-bidi': 'normal'
 'userSelect': 'auto'

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -197,13 +197,14 @@ All properties associated with getComputedStyle(document.body):
     "194": "transition-duration",
     "195": "transition-property",
     "196": "transition-timing-function",
-    "197": "unicode-bidi",
-    "198": "user-select",
-    "199": "vertical-align",
-    "200": "width",
-    "201": "x",
-    "202": "y",
-    "203": "z-index"
+    "197": "translate",
+    "198": "unicode-bidi",
+    "199": "user-select",
+    "200": "vertical-align",
+    "201": "width",
+    "202": "x",
+    "203": "y",
+    "204": "z-index"
 }
 All properties associated with document.body.style by default:
 {}

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -195,6 +195,7 @@ transition-delay: 0s
 transition-duration: 0s
 transition-property: all
 transition-timing-function: ease
+translate: none
 unicode-bidi: normal
 user-select: auto
 vertical-align: baseline

Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt

@@ -6,79 +6,80 @@ Rerun
 
 Found 408 tests
 
-408 Fail
+50 Pass
+358 Fail
 Details
 Result	Test Name	MessageFail	CSS Transitions: property <translate> from [-100px] to [100px] at (-1) should be [-300px]	
 Fail	CSS Transitions: property <translate> from [-100px] to [100px] at (0) should be [-100px]	
 Fail	CSS Transitions: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]	
 Fail	CSS Transitions: property <translate> from [-100px] to [100px] at (0.75) should be [50px]	
-Fail	CSS Transitions: property <translate> from [-100px] to [100px] at (1) should be [100px]	
+Pass	CSS Transitions: property <translate> from [-100px] to [100px] at (1) should be [100px]	
 Fail	CSS Transitions: property <translate> from [-100px] to [100px] at (2) should be [300px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (-1) should be [-300px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (0) should be [-100px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (0.75) should be [50px]	
-Fail	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (1) should be [100px]	
+Pass	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (1) should be [100px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px] to [100px] at (2) should be [300px]	
 Fail	CSS Animations: property <translate> from [-100px] to [100px] at (-1) should be [-300px]	
-Fail	CSS Animations: property <translate> from [-100px] to [100px] at (0) should be [-100px]	
+Pass	CSS Animations: property <translate> from [-100px] to [100px] at (0) should be [-100px]	
 Fail	CSS Animations: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]	
 Fail	CSS Animations: property <translate> from [-100px] to [100px] at (0.75) should be [50px]	
-Fail	CSS Animations: property <translate> from [-100px] to [100px] at (1) should be [100px]	
+Pass	CSS Animations: property <translate> from [-100px] to [100px] at (1) should be [100px]	
 Fail	CSS Animations: property <translate> from [-100px] to [100px] at (2) should be [300px]	
 Fail	Web Animations: property <translate> from [-100px] to [100px] at (-1) should be [-300px]	
-Fail	Web Animations: property <translate> from [-100px] to [100px] at (0) should be [-100px]	
+Pass	Web Animations: property <translate> from [-100px] to [100px] at (0) should be [-100px]	
 Fail	Web Animations: property <translate> from [-100px] to [100px] at (0.25) should be [-50px]	
 Fail	Web Animations: property <translate> from [-100px] to [100px] at (0.75) should be [50px]	
-Fail	Web Animations: property <translate> from [-100px] to [100px] at (1) should be [100px]	
+Pass	Web Animations: property <translate> from [-100px] to [100px] at (1) should be [100px]	
 Fail	Web Animations: property <translate> from [-100px] to [100px] at (2) should be [300px]	
 Fail	CSS Transitions: property <translate> from [-100%] to [100%] at (-1) should be [-300%]	
 Fail	CSS Transitions: property <translate> from [-100%] to [100%] at (0) should be [-100%]	
 Fail	CSS Transitions: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]	
 Fail	CSS Transitions: property <translate> from [-100%] to [100%] at (0.75) should be [50%]	
-Fail	CSS Transitions: property <translate> from [-100%] to [100%] at (1) should be [100%]	
+Pass	CSS Transitions: property <translate> from [-100%] to [100%] at (1) should be [100%]	
 Fail	CSS Transitions: property <translate> from [-100%] to [100%] at (2) should be [300%]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (-1) should be [-300%]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (0) should be [-100%]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (0.75) should be [50%]	
-Fail	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (1) should be [100%]	
+Pass	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (1) should be [100%]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100%] to [100%] at (2) should be [300%]	
 Fail	CSS Animations: property <translate> from [-100%] to [100%] at (-1) should be [-300%]	
-Fail	CSS Animations: property <translate> from [-100%] to [100%] at (0) should be [-100%]	
+Pass	CSS Animations: property <translate> from [-100%] to [100%] at (0) should be [-100%]	
 Fail	CSS Animations: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]	
 Fail	CSS Animations: property <translate> from [-100%] to [100%] at (0.75) should be [50%]	
-Fail	CSS Animations: property <translate> from [-100%] to [100%] at (1) should be [100%]	
+Pass	CSS Animations: property <translate> from [-100%] to [100%] at (1) should be [100%]	
 Fail	CSS Animations: property <translate> from [-100%] to [100%] at (2) should be [300%]	
 Fail	Web Animations: property <translate> from [-100%] to [100%] at (-1) should be [-300%]	
-Fail	Web Animations: property <translate> from [-100%] to [100%] at (0) should be [-100%]	
+Pass	Web Animations: property <translate> from [-100%] to [100%] at (0) should be [-100%]	
 Fail	Web Animations: property <translate> from [-100%] to [100%] at (0.25) should be [-50%]	
 Fail	Web Animations: property <translate> from [-100%] to [100%] at (0.75) should be [50%]	
-Fail	Web Animations: property <translate> from [-100%] to [100%] at (1) should be [100%]	
+Pass	Web Animations: property <translate> from [-100%] to [100%] at (1) should be [100%]	
 Fail	Web Animations: property <translate> from [-100%] to [100%] at (2) should be [300%]	
 Fail	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]	
 Fail	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]	
 Fail	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]	
 Fail	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]	
-Fail	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
+Pass	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
 Fail	CSS Transitions: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]	
-Fail	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
+Pass	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
 Fail	CSS Transitions with transition: all: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]	
 Fail	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]	
-Fail	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]	
+Pass	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]	
 Fail	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]	
 Fail	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]	
-Fail	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
+Pass	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
 Fail	CSS Animations: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]	
 Fail	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px]	
-Fail	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]	
+Pass	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px]	
 Fail	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px]	
 Fail	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px]	
-Fail	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
+Pass	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (1) should be [100px 50px]	
 Fail	Web Animations: property <translate> from [-100px -50px] to [100px 50px] at (2) should be [300px 150px]	
 Fail	CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (-1) should be [140px 80px 20px]	
 Fail	CSS Transitions: property <translate> from [220px 240px 260px] to [300px 400px 500px] at (0) should be [220px 240px 260px]	
@@ -176,30 +177,30 @@ Fail	Web Animations: property <translate> from [480px 400px 320px] to [240% 160%
 Fail	Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px]	
 Fail	Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%]	
 Fail	Web Animations: property <translate> from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px]	
-Fail	CSS Transitions: property <translate> from [none] to [none] at (-1) should be [none]	
-Fail	CSS Transitions: property <translate> from [none] to [none] at (0) should be [none]	
-Fail	CSS Transitions: property <translate> from [none] to [none] at (0.125) should be [none]	
-Fail	CSS Transitions: property <translate> from [none] to [none] at (0.875) should be [none]	
-Fail	CSS Transitions: property <translate> from [none] to [none] at (1) should be [none]	
-Fail	CSS Transitions: property <translate> from [none] to [none] at (2) should be [none]	
-Fail	CSS Transitions with transition: all: property <translate> from [none] to [none] at (-1) should be [none]	
-Fail	CSS Transitions with transition: all: property <translate> from [none] to [none] at (0) should be [none]	
-Fail	CSS Transitions with transition: all: property <translate> from [none] to [none] at (0.125) should be [none]	
-Fail	CSS Transitions with transition: all: property <translate> from [none] to [none] at (0.875) should be [none]	
-Fail	CSS Transitions with transition: all: property <translate> from [none] to [none] at (1) should be [none]	
-Fail	CSS Transitions with transition: all: property <translate> from [none] to [none] at (2) should be [none]	
-Fail	CSS Animations: property <translate> from [none] to [none] at (-1) should be [none]	
-Fail	CSS Animations: property <translate> from [none] to [none] at (0) should be [none]	
-Fail	CSS Animations: property <translate> from [none] to [none] at (0.125) should be [none]	
-Fail	CSS Animations: property <translate> from [none] to [none] at (0.875) should be [none]	
-Fail	CSS Animations: property <translate> from [none] to [none] at (1) should be [none]	
-Fail	CSS Animations: property <translate> from [none] to [none] at (2) should be [none]	
-Fail	Web Animations: property <translate> from [none] to [none] at (-1) should be [none]	
-Fail	Web Animations: property <translate> from [none] to [none] at (0) should be [none]	
-Fail	Web Animations: property <translate> from [none] to [none] at (0.125) should be [none]	
-Fail	Web Animations: property <translate> from [none] to [none] at (0.875) should be [none]	
-Fail	Web Animations: property <translate> from [none] to [none] at (1) should be [none]	
-Fail	Web Animations: property <translate> from [none] to [none] at (2) should be [none]	
+Pass	CSS Transitions: property <translate> from [none] to [none] at (-1) should be [none]	
+Pass	CSS Transitions: property <translate> from [none] to [none] at (0) should be [none]	
+Pass	CSS Transitions: property <translate> from [none] to [none] at (0.125) should be [none]	
+Pass	CSS Transitions: property <translate> from [none] to [none] at (0.875) should be [none]	
+Pass	CSS Transitions: property <translate> from [none] to [none] at (1) should be [none]	
+Pass	CSS Transitions: property <translate> from [none] to [none] at (2) should be [none]	
+Pass	CSS Transitions with transition: all: property <translate> from [none] to [none] at (-1) should be [none]	
+Pass	CSS Transitions with transition: all: property <translate> from [none] to [none] at (0) should be [none]	
+Pass	CSS Transitions with transition: all: property <translate> from [none] to [none] at (0.125) should be [none]	
+Pass	CSS Transitions with transition: all: property <translate> from [none] to [none] at (0.875) should be [none]	
+Pass	CSS Transitions with transition: all: property <translate> from [none] to [none] at (1) should be [none]	
+Pass	CSS Transitions with transition: all: property <translate> from [none] to [none] at (2) should be [none]	
+Pass	CSS Animations: property <translate> from [none] to [none] at (-1) should be [none]	
+Pass	CSS Animations: property <translate> from [none] to [none] at (0) should be [none]	
+Pass	CSS Animations: property <translate> from [none] to [none] at (0.125) should be [none]	
+Pass	CSS Animations: property <translate> from [none] to [none] at (0.875) should be [none]	
+Pass	CSS Animations: property <translate> from [none] to [none] at (1) should be [none]	
+Pass	CSS Animations: property <translate> from [none] to [none] at (2) should be [none]	
+Pass	Web Animations: property <translate> from [none] to [none] at (-1) should be [none]	
+Pass	Web Animations: property <translate> from [none] to [none] at (0) should be [none]	
+Pass	Web Animations: property <translate> from [none] to [none] at (0.125) should be [none]	
+Pass	Web Animations: property <translate> from [none] to [none] at (0.875) should be [none]	
+Pass	Web Animations: property <translate> from [none] to [none] at (1) should be [none]	
+Pass	Web Animations: property <translate> from [none] to [none] at (2) should be [none]	
 Fail	CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px]	
 Fail	CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (0) should be [0px 0%]	
 Fail	CSS Transitions: property <translate> from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px]	
@@ -228,25 +229,25 @@ Fail	CSS Transitions: property <translate> from neutral to [20px] at (-1) should
 Fail	CSS Transitions: property <translate> from neutral to [20px] at (0) should be [10px]	
 Fail	CSS Transitions: property <translate> from neutral to [20px] at (0.25) should be [12.5px]	
 Fail	CSS Transitions: property <translate> from neutral to [20px] at (0.75) should be [17.5px]	
-Fail	CSS Transitions: property <translate> from neutral to [20px] at (1) should be [20px]	
+Pass	CSS Transitions: property <translate> from neutral to [20px] at (1) should be [20px]	
 Fail	CSS Transitions: property <translate> from neutral to [20px] at (2) should be [30px]	
 Fail	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (-1) should be [0px]	
 Fail	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (0) should be [10px]	
 Fail	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (0.25) should be [12.5px]	
 Fail	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (0.75) should be [17.5px]	
-Fail	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (1) should be [20px]	
+Pass	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (1) should be [20px]	
 Fail	CSS Transitions with transition: all: property <translate> from neutral to [20px] at (2) should be [30px]	
 Fail	CSS Animations: property <translate> from neutral to [20px] at (-1) should be [0px]	
 Fail	CSS Animations: property <translate> from neutral to [20px] at (0) should be [10px]	
 Fail	CSS Animations: property <translate> from neutral to [20px] at (0.25) should be [12.5px]	
 Fail	CSS Animations: property <translate> from neutral to [20px] at (0.75) should be [17.5px]	
-Fail	CSS Animations: property <translate> from neutral to [20px] at (1) should be [20px]	
+Pass	CSS Animations: property <translate> from neutral to [20px] at (1) should be [20px]	
 Fail	CSS Animations: property <translate> from neutral to [20px] at (2) should be [30px]	
 Fail	Web Animations: property <translate> from neutral to [20px] at (-1) should be [0px]	
 Fail	Web Animations: property <translate> from neutral to [20px] at (0) should be [10px]	
 Fail	Web Animations: property <translate> from neutral to [20px] at (0.25) should be [12.5px]	
 Fail	Web Animations: property <translate> from neutral to [20px] at (0.75) should be [17.5px]	
-Fail	Web Animations: property <translate> from neutral to [20px] at (1) should be [20px]	
+Pass	Web Animations: property <translate> from neutral to [20px] at (1) should be [20px]	
 Fail	Web Animations: property <translate> from neutral to [20px] at (2) should be [30px]	
 Fail	CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (-1) should be [-200px -100px -200px]	
 Fail	CSS Transitions: property <translate> from [initial] to [200px 100px 200px] at (0) should be [0px]	
@@ -300,25 +301,25 @@ Fail	CSS Transitions: property <translate> from [unset] to [20px] at (-1) should
 Fail	CSS Transitions: property <translate> from [unset] to [20px] at (0) should be [0px]	
 Fail	CSS Transitions: property <translate> from [unset] to [20px] at (0.25) should be [5px]	
 Fail	CSS Transitions: property <translate> from [unset] to [20px] at (0.75) should be [15px]	
-Fail	CSS Transitions: property <translate> from [unset] to [20px] at (1) should be [20px]	
+Pass	CSS Transitions: property <translate> from [unset] to [20px] at (1) should be [20px]	
 Fail	CSS Transitions: property <translate> from [unset] to [20px] at (2) should be [40px]	
 Fail	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (-1) should be [-20px]	
 Fail	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (0) should be [0px]	
 Fail	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (0.25) should be [5px]	
 Fail	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (0.75) should be [15px]	
-Fail	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (1) should be [20px]	
+Pass	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (1) should be [20px]	
 Fail	CSS Transitions with transition: all: property <translate> from [unset] to [20px] at (2) should be [40px]	
 Fail	CSS Animations: property <translate> from [unset] to [20px] at (-1) should be [-20px]	
 Fail	CSS Animations: property <translate> from [unset] to [20px] at (0) should be [0px]	
 Fail	CSS Animations: property <translate> from [unset] to [20px] at (0.25) should be [5px]	
 Fail	CSS Animations: property <translate> from [unset] to [20px] at (0.75) should be [15px]	
-Fail	CSS Animations: property <translate> from [unset] to [20px] at (1) should be [20px]	
+Pass	CSS Animations: property <translate> from [unset] to [20px] at (1) should be [20px]	
 Fail	CSS Animations: property <translate> from [unset] to [20px] at (2) should be [40px]	
 Fail	Web Animations: property <translate> from [unset] to [20px] at (-1) should be [-20px]	
 Fail	Web Animations: property <translate> from [unset] to [20px] at (0) should be [0px]	
 Fail	Web Animations: property <translate> from [unset] to [20px] at (0.25) should be [5px]	
 Fail	Web Animations: property <translate> from [unset] to [20px] at (0.75) should be [15px]	
-Fail	Web Animations: property <translate> from [unset] to [20px] at (1) should be [20px]	
+Pass	Web Animations: property <translate> from [unset] to [20px] at (1) should be [20px]	
 Fail	Web Animations: property <translate> from [unset] to [20px] at (2) should be [40px]	
 Fail	CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (-1) should be [0px 300px 400px]	
 Fail	CSS Transitions: property <translate> from [inherit] to [200px 100px 200px] at (0) should be [100px 200px 300px]	

Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt

@@ -6,17 +6,18 @@ Rerun
 
 Found 19 tests
 
-19 Fail
+8 Pass
+11 Fail
 Details
-Result	Test Name	MessageFail	Property translate value 'none'	
-Fail	Property translate value '0px'	
-Fail	Property translate value '100%'	
-Fail	Property translate value '100px 0px'	
-Fail	Property translate value '100px 0.1px'	
+Result	Test Name	MessagePass	Property translate value 'none'	
+Pass	Property translate value '0px'	
+Pass	Property translate value '100%'	
+Pass	Property translate value '100px 0px'	
+Pass	Property translate value '100px 0.1px'	
 Fail	Property translate value '100px 0%'	
 Fail	Property translate value '100px calc(10px - 10%)'	
-Fail	Property translate value '100px 200%'	
-Fail	Property translate value '100% 200px'	
+Pass	Property translate value '100px 200%'	
+Pass	Property translate value '100% 200px'	
 Fail	Property translate value '100px 200px 0px'	
 Fail	Property translate value '100px 0px 300px'	
 Fail	Property translate value '100px 0px 0px'	
@@ -25,5 +26,5 @@ Fail	Property translate value '100% 200% 300px'
 Fail	Property translate value '100% 0% 200px'	
 Fail	Property translate value '0% 0% 100px'	
 Fail	Property translate value '0em 0em 100px'	
-Fail	Property translate value '0'	
+Pass	Property translate value '0'	
 Fail	Property translate value '1px 2px 0'	

Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt

@@ -6,17 +6,18 @@ Rerun
 
 Found 20 tests
 
-20 Fail
+8 Pass
+12 Fail
 Details
-Result	Test Name	MessageFail	e.style['translate'] = "none" should set the property value	
-Fail	e.style['translate'] = "0px" should set the property value	
-Fail	e.style['translate'] = "100%" should set the property value	
-Fail	e.style['translate'] = "100px 0px" should set the property value	
-Fail	e.style['translate'] = "100px 0.1px" should set the property value	
+Result	Test Name	MessagePass	e.style['translate'] = "none" should set the property value	
+Pass	e.style['translate'] = "0px" should set the property value	
+Pass	e.style['translate'] = "100%" should set the property value	
+Pass	e.style['translate'] = "100px 0px" should set the property value	
+Pass	e.style['translate'] = "100px 0.1px" should set the property value	
 Fail	e.style['translate'] = "100px 0%" should set the property value	
 Fail	e.style['translate'] = "100px calc(10px - 10%)" should set the property value	
-Fail	e.style['translate'] = "100px 200%" should set the property value	
-Fail	e.style['translate'] = "100% 200px" should set the property value	
+Pass	e.style['translate'] = "100px 200%" should set the property value	
+Pass	e.style['translate'] = "100% 200px" should set the property value	
 Fail	e.style['translate'] = "100px 200px 0px" should set the property value	
 Fail	e.style['translate'] = "100px 0px 300px" should set the property value	
 Fail	e.style['translate'] = "100px 0px 0px" should set the property value	
@@ -26,5 +27,5 @@ Fail	e.style['translate'] = "100% 0% 200px" should set the property value
 Fail	e.style['translate'] = "0% 0% 100px" should set the property value	
 Fail	e.style['translate'] = "0em 0em 100px" should set the property value	
 Fail	e.style['translate'] = "calc(10% + 10px) calc(20% + 20px) calc(30em + 30px)" should set the property value	
-Fail	e.style['translate'] = "0" should set the property value	
+Pass	e.style['translate'] = "0" should set the property value	
 Fail	e.style['translate'] = "1px 2px 0" should set the property value