diff --git a/Libraries/LibWeb/CSS/ComputedProperties.cpp b/Libraries/LibWeb/CSS/ComputedProperties.cpp index 1afdcd5b724..751a5b00ef9 100644 --- a/Libraries/LibWeb/CSS/ComputedProperties.cpp +++ b/Libraries/LibWeb/CSS/ComputedProperties.cpp @@ -222,23 +222,39 @@ Size ComputedProperties::size_value(PropertyID id) const return Size::make_auto(); } -LengthPercentage ComputedProperties::length_percentage_or_fallback(PropertyID id, LengthPercentage const& fallback) const +LengthPercentage ComputedProperties::length_percentage_or_fallback(PropertyID id, Layout::NodeWithStyle const& layout_node, ClampNegativeLengths disallow_negative_lengths, LengthPercentage const& fallback) const { - return length_percentage(id).value_or(fallback); + return length_percentage(id, layout_node, disallow_negative_lengths).value_or(fallback); } -Optional ComputedProperties::length_percentage(PropertyID id) const +Optional ComputedProperties::length_percentage(PropertyID id, Layout::NodeWithStyle const& layout_node, ClampNegativeLengths disallow_negative_lengths) const { auto const& value = property(id); if (value.is_calculated()) return LengthPercentage { value.as_calculated() }; - if (value.is_percentage()) - return value.as_percentage().percentage(); + if (value.is_percentage()) { + auto percentage = value.as_percentage().percentage(); - if (value.is_length()) - return value.as_length().length(); + // FIXME: This value can be negative as interpolation does not yet clamp values to allowed ranges - remove this + // once we do that. + if (disallow_negative_lengths == ClampNegativeLengths::Yes && percentage.as_fraction() < 0) + return {}; + + return percentage; + } + + if (value.is_length()) { + auto length = value.as_length().length(); + + // FIXME: This value can be negative as interpolation does not yet clamp values to allowed ranges - remove this + // once we do that. + if (disallow_negative_lengths == ClampNegativeLengths::Yes && length.to_px(layout_node) < 0) + return {}; + + return length; + } if (value.has_auto()) return LengthPercentage { Length::make_auto() }; @@ -251,13 +267,13 @@ Length ComputedProperties::length(PropertyID property_id) const return property(property_id).as_length().length(); } -LengthBox ComputedProperties::length_box(PropertyID left_id, PropertyID top_id, PropertyID right_id, PropertyID bottom_id, Length const& default_value) const +LengthBox ComputedProperties::length_box(PropertyID left_id, PropertyID top_id, PropertyID right_id, PropertyID bottom_id, Layout::NodeWithStyle const& layout_node, ClampNegativeLengths disallow_negative_lengths, Length const& default_value) const { LengthBox box; - box.left() = length_percentage_or_fallback(left_id, default_value); - box.top() = length_percentage_or_fallback(top_id, default_value); - box.right() = length_percentage_or_fallback(right_id, default_value); - box.bottom() = length_percentage_or_fallback(bottom_id, default_value); + box.left() = length_percentage_or_fallback(left_id, layout_node, disallow_negative_lengths, default_value); + box.top() = length_percentage_or_fallback(top_id, layout_node, disallow_negative_lengths, default_value); + box.right() = length_percentage_or_fallback(right_id, layout_node, disallow_negative_lengths, default_value); + box.bottom() = length_percentage_or_fallback(bottom_id, layout_node, disallow_negative_lengths, default_value); return box; } diff --git a/Libraries/LibWeb/CSS/ComputedProperties.h b/Libraries/LibWeb/CSS/ComputedProperties.h index 99e7d77bd63..30743239860 100644 --- a/Libraries/LibWeb/CSS/ComputedProperties.h +++ b/Libraries/LibWeb/CSS/ComputedProperties.h @@ -76,10 +76,15 @@ public: Size size_value(PropertyID) const; [[nodiscard]] Variant gap_value(PropertyID) const; - LengthPercentage length_percentage_or_fallback(PropertyID, LengthPercentage const& fallback) const; - Optional length_percentage(PropertyID) const; Length length(PropertyID) const; LengthBox length_box(PropertyID left_id, PropertyID top_id, PropertyID right_id, PropertyID bottom_id, Length const& default_value) const; + enum class ClampNegativeLengths { + No, + Yes, + }; + LengthPercentage length_percentage_or_fallback(PropertyID, Layout::NodeWithStyle const&, ClampNegativeLengths, LengthPercentage const& fallback) const; + Optional length_percentage(PropertyID, Layout::NodeWithStyle const&, ClampNegativeLengths) const; + LengthBox length_box(PropertyID left_id, PropertyID top_id, PropertyID right_id, PropertyID bottom_id, Layout::NodeWithStyle const&, ClampNegativeLengths, Length const& default_value) const; Color color_or_fallback(PropertyID, ColorResolutionContext, Color fallback) const; ColorInterpolation color_interpolation() const; PreferredColorScheme color_scheme(PreferredColorScheme, Optional const&> document_supported_schemes) const; diff --git a/Libraries/LibWeb/Layout/Node.cpp b/Libraries/LibWeb/Layout/Node.cpp index 9a11593d76d..f3432750ddd 100644 --- a/Libraries/LibWeb/Layout/Node.cpp +++ b/Libraries/LibWeb/Layout/Node.cpp @@ -609,7 +609,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style) computed_values.set_text_overflow(computed_style.text_overflow()); computed_values.set_text_rendering(computed_style.text_rendering()); - if (auto text_indent = computed_style.length_percentage(CSS::PropertyID::TextIndent); text_indent.has_value()) + if (auto text_indent = computed_style.length_percentage(CSS::PropertyID::TextIndent, *this, CSS::ComputedProperties::ClampNegativeLengths::No); text_indent.has_value()) computed_values.set_text_indent(text_indent.release_value()); computed_values.set_text_wrap_mode(computed_style.text_wrap_mode()); @@ -653,7 +653,7 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style) // we just manually grab the value from `color`. This makes it dependent on `color` being // specified first, so it's far from ideal. computed_values.set_text_decoration_color(computed_style.color_or_fallback(CSS::PropertyID::TextDecorationColor, CSS::ColorResolutionContext::for_layout_node_with_style(*this), computed_values.color())); - if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value()) + if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness, *this, CSS::ComputedProperties::ClampNegativeLengths::No); maybe_text_decoration_thickness.has_value()) computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value()); computed_values.set_webkit_text_fill_color(computed_style.color_or_fallback(CSS::PropertyID::WebkitTextFillColor, CSS::ColorResolutionContext::for_layout_node_with_style(*this), computed_values.color())); @@ -673,9 +673,9 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style) computed_values.set_min_height(computed_style.size_value(CSS::PropertyID::MinHeight)); computed_values.set_max_height(computed_style.size_value(CSS::PropertyID::MaxHeight)); - computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto())); - computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0))); - computed_values.set_padding(computed_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, CSS::Length::make_px(0))); + computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, *this, CSS::ComputedProperties::ClampNegativeLengths::No, CSS::Length::make_auto())); + computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, *this, CSS::ComputedProperties::ClampNegativeLengths::No, CSS::Length::make_px(0))); + computed_values.set_padding(computed_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, *this, CSS::ComputedProperties::ClampNegativeLengths::Yes, CSS::Length::make_px(0))); computed_values.set_box_shadow(computed_style.box_shadow(*this)); @@ -737,19 +737,19 @@ void NodeWithStyle::apply_style(CSS::ComputedProperties const& computed_style) computed_values.set_grid_template_areas(computed_style.grid_template_areas()); computed_values.set_grid_auto_flow(computed_style.grid_auto_flow()); - if (auto cx_value = computed_style.length_percentage(CSS::PropertyID::Cx); cx_value.has_value()) + if (auto cx_value = computed_style.length_percentage(CSS::PropertyID::Cx, *this, CSS::ComputedProperties::ClampNegativeLengths::No); cx_value.has_value()) computed_values.set_cx(*cx_value); - if (auto cy_value = computed_style.length_percentage(CSS::PropertyID::Cy); cy_value.has_value()) + if (auto cy_value = computed_style.length_percentage(CSS::PropertyID::Cy, *this, CSS::ComputedProperties::ClampNegativeLengths::No); cy_value.has_value()) computed_values.set_cy(*cy_value); - if (auto r_value = computed_style.length_percentage(CSS::PropertyID::R); r_value.has_value()) + if (auto r_value = computed_style.length_percentage(CSS::PropertyID::R, *this, CSS::ComputedProperties::ClampNegativeLengths::No); r_value.has_value()) computed_values.set_r(*r_value); - if (auto rx_value = computed_style.length_percentage(CSS::PropertyID::Rx); rx_value.has_value()) + if (auto rx_value = computed_style.length_percentage(CSS::PropertyID::Rx, *this, CSS::ComputedProperties::ClampNegativeLengths::No); rx_value.has_value()) computed_values.set_rx(*rx_value); - if (auto ry_value = computed_style.length_percentage(CSS::PropertyID::Ry); ry_value.has_value()) + if (auto ry_value = computed_style.length_percentage(CSS::PropertyID::Ry, *this, CSS::ComputedProperties::ClampNegativeLengths::No); ry_value.has_value()) computed_values.set_ry(*ry_value); - if (auto x_value = computed_style.length_percentage(CSS::PropertyID::X); x_value.has_value()) + if (auto x_value = computed_style.length_percentage(CSS::PropertyID::X, *this, CSS::ComputedProperties::ClampNegativeLengths::No); x_value.has_value()) computed_values.set_x(*x_value); - if (auto y_value = computed_style.length_percentage(CSS::PropertyID::Y); y_value.has_value()) + if (auto y_value = computed_style.length_percentage(CSS::PropertyID::Y, *this, CSS::ComputedProperties::ClampNegativeLengths::No); y_value.has_value()) computed_values.set_y(*y_value); auto const& fill = computed_style.property(CSS::PropertyID::Fill); diff --git a/Libraries/LibWeb/SVG/SVGElement.cpp b/Libraries/LibWeb/SVG/SVGElement.cpp index 9d75f159299..1413f9ec110 100644 --- a/Libraries/LibWeb/SVG/SVGElement.cpp +++ b/Libraries/LibWeb/SVG/SVGElement.cpp @@ -313,8 +313,10 @@ GC::Ref SVGElement::svg_animated_length_for_property(CSS::Pro // FIXME: Create a proper animated value when animations are supported. auto make_length = [&](SVGLength::ReadOnly read_only) { if (auto const computed_properties = this->computed_properties()) { - if (auto length = computed_properties->length_percentage(property); length.has_value()) - return SVGLength::from_length_percentage(realm(), *length, read_only); + if (auto layout_node = this->layout_node()) { + if (auto length = computed_properties->length_percentage(property, *layout_node, CSS::ComputedProperties::ClampNegativeLengths::Yes); length.has_value()) + return SVGLength::from_length_percentage(realm(), *length, read_only); + } } return SVGLength::create(realm(), 0, 0, read_only); }; diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-bottom-composition.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-bottom-composition.txt new file mode 100644 index 00000000000..79fa862d754 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-bottom-composition.txt @@ -0,0 +1,26 @@ +Harness status: OK + +Found 20 tests + +1 Pass +19 Fail +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (-0.3) should be [120px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (0) should be [150px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (0.5) should be [200px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (1) should be [250px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (1.5) should be [300px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (-0.5) should be [114px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (0) should be [110px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (0.5) should be [106px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (1) should be [102px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (1.5) should be [98px] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (-0.3) should be [calc(130px + 4%)] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (0) should be [calc(100px + 10%)] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (0.5) should be [calc(50px + 20%)] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (1) should be [30%] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (1.5) should be [calc(-50px + 40%)] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (-0.3) should be [135px] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (0) should be [150px] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (0.5) should be [175px] +Pass Compositing: property underlying [50px] from add [100px] to replace [200px] at (1) should be [200px] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (1.5) should be [225px] \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-interpolation.txt new file mode 100644 index 00000000000..0cc402e3ca0 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-interpolation.txt @@ -0,0 +1,149 @@ +Harness status: OK + +Found 144 tests + +144 Pass +Pass CSS Transitions: property from neutral to [20px] at (-0.3) should be [7px] +Pass CSS Transitions: property from neutral to [20px] at (0) should be [10px] +Pass CSS Transitions: property from neutral to [20px] at (0.3) should be [13px] +Pass CSS Transitions: property from neutral to [20px] at (0.6) should be [16px] +Pass CSS Transitions: property from neutral to [20px] at (1) should be [20px] +Pass CSS Transitions: property from neutral to [20px] at (1.5) should be [25px] +Pass CSS Transitions with transition: all: property from neutral to [20px] at (-0.3) should be [7px] +Pass CSS Transitions with transition: all: property from neutral to [20px] at (0) should be [10px] +Pass CSS Transitions with transition: all: property from neutral to [20px] at (0.3) should be [13px] +Pass CSS Transitions with transition: all: property from neutral to [20px] at (0.6) should be [16px] +Pass 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.5) should be [25px] +Pass CSS Animations: property from neutral to [20px] at (-0.3) should be [7px] +Pass CSS Animations: property from neutral to [20px] at (0) should be [10px] +Pass CSS Animations: property from neutral to [20px] at (0.3) should be [13px] +Pass CSS Animations: property from neutral to [20px] at (0.6) should be [16px] +Pass CSS Animations: property from neutral to [20px] at (1) should be [20px] +Pass CSS Animations: property from neutral to [20px] at (1.5) should be [25px] +Pass Web Animations: property from neutral to [20px] at (-0.3) should be [7px] +Pass Web Animations: property from neutral to [20px] at (0) should be [10px] +Pass Web Animations: property from neutral to [20px] at (0.3) should be [13px] +Pass Web Animations: property from neutral to [20px] at (0.6) should be [16px] +Pass Web Animations: property from neutral to [20px] at (1) should be [20px] +Pass Web Animations: property from neutral to [20px] at (1.5) should be [25px] +Pass CSS Transitions: property from [initial] to [20px] at (-0.3) should be [0px] +Pass CSS Transitions: property from [initial] to [20px] at (0) should be [0px] +Pass CSS Transitions: property from [initial] to [20px] at (0.3) should be [6px] +Pass CSS Transitions: property from [initial] to [20px] at (0.6) should be [12px] +Pass CSS Transitions: property from [initial] to [20px] at (1) should be [20px] +Pass CSS Transitions: property from [initial] to [20px] at (1.5) should be [30px] +Pass CSS Transitions with transition: all: property from [initial] to [20px] at (-0.3) should be [0px] +Pass CSS Transitions with transition: all: property from [initial] to [20px] at (0) should be [0px] +Pass CSS Transitions with transition: all: property from [initial] to [20px] at (0.3) should be [6px] +Pass CSS Transitions with transition: all: property from [initial] to [20px] at (0.6) should be [12px] +Pass CSS Transitions with transition: all: property from [initial] to [20px] at (1) should be [20px] +Pass CSS Transitions with transition: all: property from [initial] to [20px] at (1.5) should be [30px] +Pass CSS Animations: property from [initial] to [20px] at (-0.3) should be [0px] +Pass CSS Animations: property from [initial] to [20px] at (0) should be [0px] +Pass CSS Animations: property from [initial] to [20px] at (0.3) should be [6px] +Pass CSS Animations: property from [initial] to [20px] at (0.6) should be [12px] +Pass CSS Animations: property from [initial] to [20px] at (1) should be [20px] +Pass CSS Animations: property from [initial] to [20px] at (1.5) should be [30px] +Pass Web Animations: property from [initial] to [20px] at (-0.3) should be [0px] +Pass Web Animations: property from [initial] to [20px] at (0) should be [0px] +Pass Web Animations: property from [initial] to [20px] at (0.3) should be [6px] +Pass Web Animations: property from [initial] to [20px] at (0.6) should be [12px] +Pass Web Animations: property from [initial] to [20px] at (1) should be [20px] +Pass Web Animations: property from [initial] to [20px] at (1.5) should be [30px] +Pass CSS Transitions: property from [inherit] to [20px] at (-0.3) should be [33px] +Pass CSS Transitions: property from [inherit] to [20px] at (0) should be [30px] +Pass CSS Transitions: property from [inherit] to [20px] at (0.3) should be [27px] +Pass CSS Transitions: property from [inherit] to [20px] at (0.6) should be [24px] +Pass CSS Transitions: property from [inherit] to [20px] at (1) should be [20px] +Pass CSS Transitions: property from [inherit] to [20px] at (1.5) should be [15px] +Pass CSS Transitions with transition: all: property from [inherit] to [20px] at (-0.3) should be [33px] +Pass CSS Transitions with transition: all: property from [inherit] to [20px] at (0) should be [30px] +Pass CSS Transitions with transition: all: property from [inherit] to [20px] at (0.3) should be [27px] +Pass CSS Transitions with transition: all: property from [inherit] to [20px] at (0.6) should be [24px] +Pass CSS Transitions with transition: all: property from [inherit] to [20px] at (1) should be [20px] +Pass CSS Transitions with transition: all: property from [inherit] to [20px] at (1.5) should be [15px] +Pass CSS Animations: property from [inherit] to [20px] at (-0.3) should be [33px] +Pass CSS Animations: property from [inherit] to [20px] at (0) should be [30px] +Pass CSS Animations: property from [inherit] to [20px] at (0.3) should be [27px] +Pass CSS Animations: property from [inherit] to [20px] at (0.6) should be [24px] +Pass CSS Animations: property from [inherit] to [20px] at (1) should be [20px] +Pass CSS Animations: property from [inherit] to [20px] at (1.5) should be [15px] +Pass Web Animations: property from [inherit] to [20px] at (-0.3) should be [33px] +Pass Web Animations: property from [inherit] to [20px] at (0) should be [30px] +Pass Web Animations: property from [inherit] to [20px] at (0.3) should be [27px] +Pass Web Animations: property from [inherit] to [20px] at (0.6) should be [24px] +Pass Web Animations: property from [inherit] to [20px] at (1) should be [20px] +Pass Web Animations: property from [inherit] to [20px] at (1.5) should be [15px] +Pass CSS Transitions: property from [unset] to [20px] at (-0.3) should be [0px] +Pass CSS Transitions: property from [unset] to [20px] at (0) should be [0px] +Pass CSS Transitions: property from [unset] to [20px] at (0.3) should be [6px] +Pass CSS Transitions: property from [unset] to [20px] at (0.6) should be [12px] +Pass CSS Transitions: property from [unset] to [20px] at (1) should be [20px] +Pass CSS Transitions: property from [unset] to [20px] at (1.5) should be [30px] +Pass CSS Transitions with transition: all: property from [unset] to [20px] at (-0.3) should be [0px] +Pass CSS Transitions with transition: all: property from [unset] to [20px] at (0) should be [0px] +Pass CSS Transitions with transition: all: property from [unset] to [20px] at (0.3) should be [6px] +Pass CSS Transitions with transition: all: property from [unset] to [20px] at (0.6) should be [12px] +Pass 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.5) should be [30px] +Pass CSS Animations: property from [unset] to [20px] at (-0.3) should be [0px] +Pass CSS Animations: property from [unset] to [20px] at (0) should be [0px] +Pass CSS Animations: property from [unset] to [20px] at (0.3) should be [6px] +Pass CSS Animations: property from [unset] to [20px] at (0.6) should be [12px] +Pass CSS Animations: property from [unset] to [20px] at (1) should be [20px] +Pass CSS Animations: property from [unset] to [20px] at (1.5) should be [30px] +Pass Web Animations: property from [unset] to [20px] at (-0.3) should be [0px] +Pass Web Animations: property from [unset] to [20px] at (0) should be [0px] +Pass Web Animations: property from [unset] to [20px] at (0.3) should be [6px] +Pass Web Animations: property from [unset] to [20px] at (0.6) should be [12px] +Pass Web Animations: property from [unset] to [20px] at (1) should be [20px] +Pass Web Animations: property from [unset] to [20px] at (1.5) should be [30px] +Pass CSS Transitions: property from [0px] to [10px] at (-0.3) should be [0px] +Pass CSS Transitions: property from [0px] to [10px] at (0) should be [0px] +Pass CSS Transitions: property from [0px] to [10px] at (0.3) should be [3px] +Pass CSS Transitions: property from [0px] to [10px] at (0.6) should be [6px] +Pass CSS Transitions: property from [0px] to [10px] at (1) should be [10px] +Pass CSS Transitions: property from [0px] to [10px] at (1.5) should be [15px] +Pass CSS Transitions with transition: all: property from [0px] to [10px] at (-0.3) should be [0px] +Pass CSS Transitions with transition: all: property from [0px] to [10px] at (0) should be [0px] +Pass CSS Transitions with transition: all: property from [0px] to [10px] at (0.3) should be [3px] +Pass CSS Transitions with transition: all: property from [0px] to [10px] at (0.6) should be [6px] +Pass CSS Transitions with transition: all: property from [0px] to [10px] at (1) should be [10px] +Pass CSS Transitions with transition: all: property from [0px] to [10px] at (1.5) should be [15px] +Pass CSS Animations: property from [0px] to [10px] at (-0.3) should be [0px] +Pass CSS Animations: property from [0px] to [10px] at (0) should be [0px] +Pass CSS Animations: property from [0px] to [10px] at (0.3) should be [3px] +Pass CSS Animations: property from [0px] to [10px] at (0.6) should be [6px] +Pass CSS Animations: property from [0px] to [10px] at (1) should be [10px] +Pass CSS Animations: property from [0px] to [10px] at (1.5) should be [15px] +Pass Web Animations: property from [0px] to [10px] at (-0.3) should be [0px] +Pass Web Animations: property from [0px] to [10px] at (0) should be [0px] +Pass Web Animations: property from [0px] to [10px] at (0.3) should be [3px] +Pass Web Animations: property from [0px] to [10px] at (0.6) should be [6px] +Pass Web Animations: property from [0px] to [10px] at (1) should be [10px] +Pass Web Animations: property from [0px] to [10px] at (1.5) should be [15px] +Pass CSS Transitions: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (-0.3) should be [17px 37px 57px 77px] +Pass CSS Transitions: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0) should be [20px 40px 60px 80px] +Pass CSS Transitions: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.3) should be [23px 43px 63px 83px] +Pass CSS Transitions: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.6) should be [26px 46px 66px 86px] +Pass CSS Transitions: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1) should be [30px 50px 70px 90px] +Pass CSS Transitions: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1.5) should be [35px 55px 75px 95px] +Pass CSS Transitions with transition: all: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (-0.3) should be [17px 37px 57px 77px] +Pass CSS Transitions with transition: all: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0) should be [20px 40px 60px 80px] +Pass CSS Transitions with transition: all: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.3) should be [23px 43px 63px 83px] +Pass CSS Transitions with transition: all: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.6) should be [26px 46px 66px 86px] +Pass CSS Transitions with transition: all: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1) should be [30px 50px 70px 90px] +Pass CSS Transitions with transition: all: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1.5) should be [35px 55px 75px 95px] +Pass CSS Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (-0.3) should be [17px 37px 57px 77px] +Pass CSS Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0) should be [20px 40px 60px 80px] +Pass CSS Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.3) should be [23px 43px 63px 83px] +Pass CSS Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.6) should be [26px 46px 66px 86px] +Pass CSS Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1) should be [30px 50px 70px 90px] +Pass CSS Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1.5) should be [35px 55px 75px 95px] +Pass Web Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (-0.3) should be [17px 37px 57px 77px] +Pass Web Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0) should be [20px 40px 60px 80px] +Pass Web Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.3) should be [23px 43px 63px 83px] +Pass Web Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (0.6) should be [26px 46px 66px 86px] +Pass Web Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1) should be [30px 50px 70px 90px] +Pass Web Animations: property from [20px 40px 60px 80px] to [30px 50px 70px 90px] at (1.5) should be [35px 55px 75px 95px] \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-top-composition.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-top-composition.txt new file mode 100644 index 00000000000..5ffd03e2d97 --- /dev/null +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-box/animation/padding-top-composition.txt @@ -0,0 +1,26 @@ +Harness status: OK + +Found 20 tests + +1 Pass +19 Fail +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (-0.3) should be [120px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (0) should be [150px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (0.5) should be [200px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (1) should be [250px] +Fail Compositing: property underlying [50px] from add [100px] to add [200px] at (1.5) should be [300px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (-0.5) should be [114px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (0) should be [110px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (0.5) should be [106px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (1) should be [102px] +Fail Compositing: property underlying [100px] from add [10px] to add [2px] at (1.5) should be [98px] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (-0.3) should be [calc(130px + 4%)] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (0) should be [calc(100px + 10%)] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (0.5) should be [calc(50px + 20%)] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (1) should be [30%] +Fail Compositing: property underlying [10%] from add [100px] to add [20%] at (1.5) should be [calc(-50px + 40%)] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (-0.3) should be [135px] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (0) should be [150px] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (0.5) should be [175px] +Pass Compositing: property underlying [50px] from add [100px] to replace [200px] at (1) should be [200px] +Fail Compositing: property underlying [50px] from add [100px] to replace [200px] at (1.5) should be [225px] \ No newline at end of file diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-bottom-composition.html b/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-bottom-composition.html new file mode 100644 index 00000000000..346b1ef39f6 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-bottom-composition.html @@ -0,0 +1,65 @@ + + +padding-bottom composition + + + + + + + + + + diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-interpolation.html new file mode 100644 index 00000000000..78063d1c546 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-interpolation.html @@ -0,0 +1,108 @@ + + +padding interpolation + + + + + + + + + + + + diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-top-composition.html b/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-top-composition.html new file mode 100644 index 00000000000..88279e990a8 --- /dev/null +++ b/Tests/LibWeb/Text/input/wpt-import/css/css-box/animation/padding-top-composition.html @@ -0,0 +1,65 @@ + + +padding-top composition + + + + + + + + + +