diff --git a/Libraries/LibWeb/CMakeLists.txt b/Libraries/LibWeb/CMakeLists.txt index d6fd8e49567..207f95eb9d1 100644 --- a/Libraries/LibWeb/CMakeLists.txt +++ b/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 diff --git a/Libraries/LibWeb/CSS/CSSStyleValue.cpp b/Libraries/LibWeb/CSS/CSSStyleValue.cpp index 78b5b0a220d..fde6552afd2 100644 --- a/Libraries/LibWeb/CSS/CSSStyleValue.cpp +++ b/Libraries/LibWeb/CSS/CSSStyleValue.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2018-2023, Andreas Kling + * Copyright (c) 2018-2024, Andreas Kling * Copyright (c) 2021-2024, Sam Atkins * Copyright (c) 2021, Tobias Christiansen * Copyright (c) 2022-2023, MacDue @@ -56,6 +56,7 @@ #include #include #include +#include #include #include @@ -336,6 +337,12 @@ TransitionStyleValue const& CSSStyleValue::as_transition() const return static_cast(*this); } +TranslationStyleValue const& CSSStyleValue::as_translation() const +{ + VERIFY(is_translation()); + return static_cast(*this); +} + UnresolvedStyleValue const& CSSStyleValue::as_unresolved() const { VERIFY(is_unresolved()); diff --git a/Libraries/LibWeb/CSS/CSSStyleValue.h b/Libraries/LibWeb/CSS/CSSStyleValue.h index 312b5d6a8bc..b4a29721d63 100644 --- a/Libraries/LibWeb/CSS/CSSStyleValue.h +++ b/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(const_cast(*this).as_transition()); } + bool is_translation() const { return type() == Type::Translation; } + TranslationStyleValue const& as_translation() const; + TranslationStyleValue& as_translation() { return const_cast(const_cast(*this).as_translation()); } + bool is_unresolved() const { return type() == Type::Unresolved; } UnresolvedStyleValue const& as_unresolved() const; UnresolvedStyleValue& as_unresolved() { return const_cast(const_cast(*this).as_unresolved()); } diff --git a/Libraries/LibWeb/CSS/ComputedValues.h b/Libraries/LibWeb/CSS/ComputedValues.h index 25c25d17c7c..d712f30e7de 100644 --- a/Libraries/LibWeb/CSS/ComputedValues.h +++ b/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 const& rotate() const { return m_noninherited.rotate; } + Optional 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 rotate; + Optional translate; Optional mask; CSS::MaskType mask_type { InitialValues::mask_type() }; @@ -800,6 +802,7 @@ public: void set_transformations(Vector 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 value) { m_noninherited.vertical_align = move(value); } void set_visibility(CSS::Visibility value) { m_inherited.visibility = value; } diff --git a/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Libraries/LibWeb/CSS/Parser/Parser.cpp index 5edc59d3e92..dc9f7839912 100644 --- a/Libraries/LibWeb/CSS/Parser/Parser.cpp +++ b/Libraries/LibWeb/CSS/Parser/Parser.cpp @@ -1,5 +1,5 @@ /* - * Copyright (c) 2018-2022, Andreas Kling + * Copyright (c) 2018-2024, Andreas Kling * Copyright (c) 2020-2021, the SerenityOS developers. * Copyright (c) 2021-2024, Sam Atkins * Copyright (c) 2021, Tobias Christiansen @@ -76,6 +76,7 @@ #include #include #include +#include #include #include #include @@ -6928,6 +6929,33 @@ Optional Parser::parse_grid_size(ComponentValue const& component_ return {}; } +RefPtr Parser::parse_translate_value(TokenStream& 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 Parser::parse_fit_content(Vector const& component_values) { // https://www.w3.org/TR/css-grid-2/#valdef-grid-template-columns-fit-content @@ -7945,6 +7973,10 @@ Parser::ParseErrorOr> 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; } diff --git a/Libraries/LibWeb/CSS/Parser/Parser.h b/Libraries/LibWeb/CSS/Parser/Parser.h index 94b4d117cba..c015040534e 100644 --- a/Libraries/LibWeb/CSS/Parser/Parser.h +++ b/Libraries/LibWeb/CSS/Parser/Parser.h @@ -344,6 +344,7 @@ private: RefPtr parse_transform_value(TokenStream&); RefPtr parse_transform_origin_value(TokenStream&); RefPtr parse_transition_value(TokenStream&); + RefPtr parse_translate_value(TokenStream&); RefPtr parse_grid_track_size_list(TokenStream&, bool allow_separate_line_name_blocks = false); RefPtr parse_grid_auto_track_sizes(TokenStream&); RefPtr parse_grid_auto_flow_value(TokenStream&); diff --git a/Libraries/LibWeb/CSS/Properties.json b/Libraries/LibWeb/CSS/Properties.json index 756011a7c6b..b3252cae1b8 100644 --- a/Libraries/LibWeb/CSS/Properties.json +++ b/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, diff --git a/Libraries/LibWeb/CSS/StyleProperties.cpp b/Libraries/LibWeb/CSS/StyleProperties.cpp index 3d1efb25652..cc8ba99ce04 100644 --- a/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -34,6 +34,7 @@ #include #include #include +#include #include #include #include @@ -599,6 +600,20 @@ Optional StyleProperties::rotate(Layout::Node const& layout return CSS::Transformation(CSS::TransformFunction::Rotate3d, move(values)); } +Optional StyleProperties::translate() const +{ + auto const& value = property(CSS::PropertyID::Translate); + if (!value.is_translation()) + return {}; + auto const& translation = value.as_translation(); + + Vector values; + values.append(translation.x()); + values.append(translation.y()); + + return CSS::Transformation(CSS::TransformFunction::Translate, move(values)); +} + static Optional length_percentage_for_style_value(CSSStyleValue const& value) { if (value.is_length()) diff --git a/Libraries/LibWeb/CSS/StyleProperties.h b/Libraries/LibWeb/CSS/StyleProperties.h index 7551757df5f..6d4b7033edd 100644 --- a/Libraries/LibWeb/CSS/StyleProperties.h +++ b/Libraries/LibWeb/CSS/StyleProperties.h @@ -176,6 +176,7 @@ public: Optional transform_box() const; CSS::TransformOrigin transform_origin() const; Optional rotate(Layout::Node const&) const; + Optional translate() const; Optional mask_type() const; Color stop_color() const; diff --git a/Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.cpp b/Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.cpp new file mode 100644 index 00000000000..06d8e098c4d --- /dev/null +++ b/Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.cpp @@ -0,0 +1,44 @@ +/* + * Copyright (c) 2024, Andreas Kling + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#include +#include +#include +#include +#include +#include + +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 { + 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(); +} + +} diff --git a/Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.h b/Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.h new file mode 100644 index 00000000000..6265befd364 --- /dev/null +++ b/Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.h @@ -0,0 +1,49 @@ +/* + * Copyright (c) 2024, Andreas Kling + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#pragma once + +#include +#include + +namespace Web::CSS { + +class TranslationStyleValue : public StyleValueWithDefaultOperators { +public: + static ValueComparingNonnullRefPtr 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; +}; + +} diff --git a/Libraries/LibWeb/Forward.h b/Libraries/LibWeb/Forward.h index cfbedd731a1..48f4fea8ead 100644 --- a/Libraries/LibWeb/Forward.h +++ b/Libraries/LibWeb/Forward.h @@ -227,6 +227,7 @@ class TimeStyleValue; class Transformation; class TransformationStyleValue; class TransitionStyleValue; +class TranslationStyleValue; class UnresolvedStyleValue; class URLStyleValue; class VisualViewport; diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp index 2cef0046948..943f421b02b 100644 --- a/Libraries/LibWeb/Layout/Node.cpp +++ b/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()); diff --git a/Libraries/LibWeb/Layout/Node.h b/Libraries/LibWeb/Layout/Node.h index 6b42ae715e4..b4f98110b03 100644 --- a/Libraries/LibWeb/Layout/Node.h +++ b/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; } diff --git a/Libraries/LibWeb/Painting/PaintableBox.cpp b/Libraries/LibWeb/Painting/PaintableBox.cpp index f13a76a981f..c8791587198 100644 --- a/Libraries/LibWeb/Painting/PaintableBox.cpp +++ b/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) diff --git a/Libraries/LibWeb/Painting/PaintableBox.h b/Libraries/LibWeb/Painting/PaintableBox.h index 5570b49bcf3..25bb4d97b78 100644 --- a/Libraries/LibWeb/Painting/PaintableBox.h +++ b/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; } diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt index a64eb0e32e6..b0b29e54c83 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-all-supported-properties-and-default-values.txt +++ b/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' diff --git a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt b/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt index 2a739619d4b..5f6b0f5553d 100644 --- a/Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt +++ b/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: {} diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index 6fe6d664a50..1d91f41e986 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/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 diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt index eaf81fbe2d1..b2bbe981ddd 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/animation/translate-interpolation.txt +++ b/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 from [-100px] to [100px] at (-1) should be [-300px] Fail CSS Transitions: property from [-100px] to [100px] at (0) should be [-100px] Fail CSS Transitions: property from [-100px] to [100px] at (0.25) should be [-50px] Fail CSS Transitions: property from [-100px] to [100px] at (0.75) should be [50px] -Fail CSS Transitions: property from [-100px] to [100px] at (1) should be [100px] +Pass CSS Transitions: property from [-100px] to [100px] at (1) should be [100px] Fail CSS Transitions: property from [-100px] to [100px] at (2) should be [300px] Fail CSS Transitions with transition: all: property from [-100px] to [100px] at (-1) should be [-300px] Fail CSS Transitions with transition: all: property from [-100px] to [100px] at (0) should be [-100px] Fail CSS Transitions with transition: all: property from [-100px] to [100px] at (0.25) should be [-50px] Fail CSS Transitions with transition: all: property from [-100px] to [100px] at (0.75) should be [50px] -Fail CSS Transitions with transition: all: property from [-100px] to [100px] at (1) should be [100px] +Pass CSS Transitions with transition: all: property from [-100px] to [100px] at (1) should be [100px] Fail CSS Transitions with transition: all: property from [-100px] to [100px] at (2) should be [300px] Fail CSS Animations: property from [-100px] to [100px] at (-1) should be [-300px] -Fail CSS Animations: property from [-100px] to [100px] at (0) should be [-100px] +Pass CSS Animations: property from [-100px] to [100px] at (0) should be [-100px] Fail CSS Animations: property from [-100px] to [100px] at (0.25) should be [-50px] Fail CSS Animations: property from [-100px] to [100px] at (0.75) should be [50px] -Fail CSS Animations: property from [-100px] to [100px] at (1) should be [100px] +Pass CSS Animations: property from [-100px] to [100px] at (1) should be [100px] Fail CSS Animations: property from [-100px] to [100px] at (2) should be [300px] Fail Web Animations: property from [-100px] to [100px] at (-1) should be [-300px] -Fail Web Animations: property from [-100px] to [100px] at (0) should be [-100px] +Pass Web Animations: property from [-100px] to [100px] at (0) should be [-100px] Fail Web Animations: property from [-100px] to [100px] at (0.25) should be [-50px] Fail Web Animations: property from [-100px] to [100px] at (0.75) should be [50px] -Fail Web Animations: property from [-100px] to [100px] at (1) should be [100px] +Pass Web Animations: property from [-100px] to [100px] at (1) should be [100px] Fail Web Animations: property from [-100px] to [100px] at (2) should be [300px] Fail CSS Transitions: property from [-100%] to [100%] at (-1) should be [-300%] Fail CSS Transitions: property from [-100%] to [100%] at (0) should be [-100%] Fail CSS Transitions: property from [-100%] to [100%] at (0.25) should be [-50%] Fail CSS Transitions: property from [-100%] to [100%] at (0.75) should be [50%] -Fail CSS Transitions: property from [-100%] to [100%] at (1) should be [100%] +Pass CSS Transitions: property from [-100%] to [100%] at (1) should be [100%] Fail CSS Transitions: property from [-100%] to [100%] at (2) should be [300%] Fail CSS Transitions with transition: all: property from [-100%] to [100%] at (-1) should be [-300%] Fail CSS Transitions with transition: all: property from [-100%] to [100%] at (0) should be [-100%] Fail CSS Transitions with transition: all: property from [-100%] to [100%] at (0.25) should be [-50%] Fail CSS Transitions with transition: all: property from [-100%] to [100%] at (0.75) should be [50%] -Fail CSS Transitions with transition: all: property from [-100%] to [100%] at (1) should be [100%] +Pass CSS Transitions with transition: all: property from [-100%] to [100%] at (1) should be [100%] Fail CSS Transitions with transition: all: property from [-100%] to [100%] at (2) should be [300%] Fail CSS Animations: property from [-100%] to [100%] at (-1) should be [-300%] -Fail CSS Animations: property from [-100%] to [100%] at (0) should be [-100%] +Pass CSS Animations: property from [-100%] to [100%] at (0) should be [-100%] Fail CSS Animations: property from [-100%] to [100%] at (0.25) should be [-50%] Fail CSS Animations: property from [-100%] to [100%] at (0.75) should be [50%] -Fail CSS Animations: property from [-100%] to [100%] at (1) should be [100%] +Pass CSS Animations: property from [-100%] to [100%] at (1) should be [100%] Fail CSS Animations: property from [-100%] to [100%] at (2) should be [300%] Fail Web Animations: property from [-100%] to [100%] at (-1) should be [-300%] -Fail Web Animations: property from [-100%] to [100%] at (0) should be [-100%] +Pass Web Animations: property from [-100%] to [100%] at (0) should be [-100%] Fail Web Animations: property from [-100%] to [100%] at (0.25) should be [-50%] Fail Web Animations: property from [-100%] to [100%] at (0.75) should be [50%] -Fail Web Animations: property from [-100%] to [100%] at (1) should be [100%] +Pass Web Animations: property from [-100%] to [100%] at (1) should be [100%] Fail Web Animations: property from [-100%] to [100%] at (2) should be [300%] Fail CSS Transitions: property from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px] Fail CSS Transitions: property from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px] Fail CSS Transitions: property from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px] Fail CSS Transitions: property from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px] -Fail CSS Transitions: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] +Pass CSS Transitions: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] Fail CSS Transitions: property from [-100px -50px] to [100px 50px] at (2) should be [300px 150px] Fail CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px] Fail CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px] Fail CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px] Fail CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px] -Fail CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] +Pass CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] Fail CSS Transitions with transition: all: property from [-100px -50px] to [100px 50px] at (2) should be [300px 150px] Fail CSS Animations: property from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px] -Fail CSS Animations: property from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px] +Pass CSS Animations: property from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px] Fail CSS Animations: property from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px] Fail CSS Animations: property from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px] -Fail CSS Animations: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] +Pass CSS Animations: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] Fail CSS Animations: property from [-100px -50px] to [100px 50px] at (2) should be [300px 150px] Fail Web Animations: property from [-100px -50px] to [100px 50px] at (-1) should be [-300px -150px] -Fail Web Animations: property from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px] +Pass Web Animations: property from [-100px -50px] to [100px 50px] at (0) should be [-100px -50px] Fail Web Animations: property from [-100px -50px] to [100px 50px] at (0.25) should be [-50px -25px] Fail Web Animations: property from [-100px -50px] to [100px 50px] at (0.75) should be [50px 25px] -Fail Web Animations: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] +Pass Web Animations: property from [-100px -50px] to [100px 50px] at (1) should be [100px 50px] Fail Web Animations: property from [-100px -50px] to [100px 50px] at (2) should be [300px 150px] Fail CSS Transitions: property from [220px 240px 260px] to [300px 400px 500px] at (-1) should be [140px 80px 20px] Fail CSS Transitions: property from [220px 240px 260px] to [300px 400px 500px] at (0) should be [220px 240px 260px] @@ -176,30 +177,30 @@ Fail Web Animations: property from [480px 400px 320px] to [240% 160% Fail Web Animations: property from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px] Fail Web Animations: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] Fail Web Animations: property from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px] -Fail CSS Transitions: property from [none] to [none] at (-1) should be [none] -Fail CSS Transitions: property from [none] to [none] at (0) should be [none] -Fail CSS Transitions: property from [none] to [none] at (0.125) should be [none] -Fail CSS Transitions: property from [none] to [none] at (0.875) should be [none] -Fail CSS Transitions: property from [none] to [none] at (1) should be [none] -Fail CSS Transitions: property from [none] to [none] at (2) should be [none] -Fail CSS Transitions with transition: all: property from [none] to [none] at (-1) should be [none] -Fail CSS Transitions with transition: all: property from [none] to [none] at (0) should be [none] -Fail CSS Transitions with transition: all: property from [none] to [none] at (0.125) should be [none] -Fail CSS Transitions with transition: all: property from [none] to [none] at (0.875) should be [none] -Fail CSS Transitions with transition: all: property from [none] to [none] at (1) should be [none] -Fail CSS Transitions with transition: all: property from [none] to [none] at (2) should be [none] -Fail CSS Animations: property from [none] to [none] at (-1) should be [none] -Fail CSS Animations: property from [none] to [none] at (0) should be [none] -Fail CSS Animations: property from [none] to [none] at (0.125) should be [none] -Fail CSS Animations: property from [none] to [none] at (0.875) should be [none] -Fail CSS Animations: property from [none] to [none] at (1) should be [none] -Fail CSS Animations: property from [none] to [none] at (2) should be [none] -Fail Web Animations: property from [none] to [none] at (-1) should be [none] -Fail Web Animations: property from [none] to [none] at (0) should be [none] -Fail Web Animations: property from [none] to [none] at (0.125) should be [none] -Fail Web Animations: property from [none] to [none] at (0.875) should be [none] -Fail Web Animations: property from [none] to [none] at (1) should be [none] -Fail Web Animations: property from [none] to [none] at (2) should be [none] +Pass CSS Transitions: property from [none] to [none] at (-1) should be [none] +Pass CSS Transitions: property from [none] to [none] at (0) should be [none] +Pass CSS Transitions: property from [none] to [none] at (0.125) should be [none] +Pass CSS Transitions: property from [none] to [none] at (0.875) should be [none] +Pass CSS Transitions: property from [none] to [none] at (1) should be [none] +Pass CSS Transitions: property from [none] to [none] at (2) should be [none] +Pass CSS Transitions with transition: all: property from [none] to [none] at (-1) should be [none] +Pass CSS Transitions with transition: all: property from [none] to [none] at (0) should be [none] +Pass CSS Transitions with transition: all: property from [none] to [none] at (0.125) should be [none] +Pass CSS Transitions with transition: all: property from [none] to [none] at (0.875) should be [none] +Pass CSS Transitions with transition: all: property from [none] to [none] at (1) should be [none] +Pass CSS Transitions with transition: all: property from [none] to [none] at (2) should be [none] +Pass CSS Animations: property from [none] to [none] at (-1) should be [none] +Pass CSS Animations: property from [none] to [none] at (0) should be [none] +Pass CSS Animations: property from [none] to [none] at (0.125) should be [none] +Pass CSS Animations: property from [none] to [none] at (0.875) should be [none] +Pass CSS Animations: property from [none] to [none] at (1) should be [none] +Pass CSS Animations: property from [none] to [none] at (2) should be [none] +Pass Web Animations: property from [none] to [none] at (-1) should be [none] +Pass Web Animations: property from [none] to [none] at (0) should be [none] +Pass Web Animations: property from [none] to [none] at (0.125) should be [none] +Pass Web Animations: property from [none] to [none] at (0.875) should be [none] +Pass Web Animations: property from [none] to [none] at (1) should be [none] +Pass Web Animations: property from [none] to [none] at (2) should be [none] Fail CSS Transitions: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] Fail CSS Transitions: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] Fail CSS Transitions: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] @@ -228,25 +229,25 @@ Fail CSS Transitions: property from neutral to [20px] at (-1) should Fail CSS Transitions: property from neutral to [20px] at (0) should be [10px] Fail CSS Transitions: property from neutral to [20px] at (0.25) should be [12.5px] Fail CSS Transitions: property from neutral to [20px] at (0.75) should be [17.5px] -Fail CSS Transitions: property from neutral to [20px] at (1) should be [20px] +Pass CSS Transitions: property from neutral to [20px] at (1) should be [20px] Fail CSS Transitions: property from neutral to [20px] at (2) should be [30px] Fail CSS Transitions with transition: all: property from neutral to [20px] at (-1) should be [0px] Fail CSS Transitions with transition: all: property from neutral to [20px] at (0) should be [10px] Fail CSS Transitions with transition: all: property from neutral to [20px] at (0.25) should be [12.5px] Fail CSS Transitions with transition: all: property from neutral to [20px] at (0.75) should be [17.5px] -Fail CSS Transitions with transition: all: property from neutral to [20px] at (1) should be [20px] +Pass CSS Transitions with transition: all: property from neutral to [20px] at (1) should be [20px] Fail CSS Transitions with transition: all: property from neutral to [20px] at (2) should be [30px] Fail CSS Animations: property from neutral to [20px] at (-1) should be [0px] Fail CSS Animations: property from neutral to [20px] at (0) should be [10px] Fail CSS Animations: property from neutral to [20px] at (0.25) should be [12.5px] Fail CSS Animations: property from neutral to [20px] at (0.75) should be [17.5px] -Fail CSS Animations: property from neutral to [20px] at (1) should be [20px] +Pass CSS Animations: property from neutral to [20px] at (1) should be [20px] Fail CSS Animations: property from neutral to [20px] at (2) should be [30px] Fail Web Animations: property from neutral to [20px] at (-1) should be [0px] Fail Web Animations: property from neutral to [20px] at (0) should be [10px] Fail Web Animations: property from neutral to [20px] at (0.25) should be [12.5px] Fail Web Animations: property from neutral to [20px] at (0.75) should be [17.5px] -Fail Web Animations: property from neutral to [20px] at (1) should be [20px] +Pass Web Animations: property from neutral to [20px] at (1) should be [20px] Fail Web Animations: property from neutral to [20px] at (2) should be [30px] Fail CSS Transitions: property from [initial] to [200px 100px 200px] at (-1) should be [-200px -100px -200px] Fail CSS Transitions: property from [initial] to [200px 100px 200px] at (0) should be [0px] @@ -300,25 +301,25 @@ Fail CSS Transitions: property from [unset] to [20px] at (-1) should Fail CSS Transitions: property from [unset] to [20px] at (0) should be [0px] Fail CSS Transitions: property from [unset] to [20px] at (0.25) should be [5px] Fail CSS Transitions: property from [unset] to [20px] at (0.75) should be [15px] -Fail CSS Transitions: property from [unset] to [20px] at (1) should be [20px] +Pass CSS Transitions: property from [unset] to [20px] at (1) should be [20px] Fail CSS Transitions: property from [unset] to [20px] at (2) should be [40px] Fail CSS Transitions with transition: all: property from [unset] to [20px] at (-1) should be [-20px] Fail CSS Transitions with transition: all: property from [unset] to [20px] at (0) should be [0px] Fail CSS Transitions with transition: all: property from [unset] to [20px] at (0.25) should be [5px] Fail CSS Transitions with transition: all: property from [unset] to [20px] at (0.75) should be [15px] -Fail CSS Transitions with transition: all: property from [unset] to [20px] at (1) should be [20px] +Pass CSS Transitions with transition: all: property from [unset] to [20px] at (1) should be [20px] Fail CSS Transitions with transition: all: property from [unset] to [20px] at (2) should be [40px] Fail CSS Animations: property from [unset] to [20px] at (-1) should be [-20px] Fail CSS Animations: property from [unset] to [20px] at (0) should be [0px] Fail CSS Animations: property from [unset] to [20px] at (0.25) should be [5px] Fail CSS Animations: property from [unset] to [20px] at (0.75) should be [15px] -Fail CSS Animations: property from [unset] to [20px] at (1) should be [20px] +Pass CSS Animations: property from [unset] to [20px] at (1) should be [20px] Fail CSS Animations: property from [unset] to [20px] at (2) should be [40px] Fail Web Animations: property from [unset] to [20px] at (-1) should be [-20px] Fail Web Animations: property from [unset] to [20px] at (0) should be [0px] Fail Web Animations: property from [unset] to [20px] at (0.25) should be [5px] Fail Web Animations: property from [unset] to [20px] at (0.75) should be [15px] -Fail Web Animations: property from [unset] to [20px] at (1) should be [20px] +Pass Web Animations: property from [unset] to [20px] at (1) should be [20px] Fail Web Animations: property from [unset] to [20px] at (2) should be [40px] Fail CSS Transitions: property from [inherit] to [200px 100px 200px] at (-1) should be [0px 300px 400px] Fail CSS Transitions: property from [inherit] to [200px 100px 200px] at (0) should be [100px 200px 300px] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt index 9d39c55f0f4..f29e3738f8d 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-computed.txt +++ b/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' \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt index e1e0562b6a4..c568e5f256d 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-transforms/parsing/translate-parsing-valid.txt +++ b/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 \ No newline at end of file