0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

LibWeb: Support individual translate CSS property

Browse source
This commit is contained in:
Andreas Kling 2024-11-22 16:42:20 +01:00 • committed by Andreas Kling
parent 6836d4edb1
commit 66a821e731
Notes: github-actions[bot] 2024-11-22 19:07:48 +00:00
22 changed files with 267 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Libraries/LibWeb/CMakeLists.txt
View file

@ -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

9
Libraries/LibWeb/CSS/CSSStyleValue.cpp
View file

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

5
Libraries/LibWeb/CSS/CSSStyleValue.h
View file

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

3
Libraries/LibWeb/CSS/ComputedValues.h
View file

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

34
Libraries/LibWeb/CSS/Parser/Parser.cpp
View file

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

1
Libraries/LibWeb/CSS/Parser/Parser.h
View file

@ -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>&);

7
Libraries/LibWeb/CSS/Properties.json
View file

@ -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,

15
Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -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())

1
Libraries/LibWeb/CSS/StyleProperties.h
View file

@ -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;

44
Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.cpp Normal file
View file

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

49
Libraries/LibWeb/CSS/StyleValues/TranslationStyleValue.h Normal file
View file

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

1
Libraries/LibWeb/Forward.h
View file

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

8
Libraries/LibWeb/Layout/Node.cpp
View file

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

2
Libraries/LibWeb/Layout/Node.h
View file

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

5
Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -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)

2
Libraries/LibWeb/Painting/PaintableBox.h
View file

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

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

@ -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'

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

@ -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:
{}

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

@ -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

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

@ -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]

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

@ -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'

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

@ -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