From 9c062d9d4e2ece509ef1a487531799024bf825b8 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Tue, 9 Sep 2025 15:49:31 +0100 Subject: [PATCH] LibWeb: Improve interpolation of mixed percentage-dimension values If we are interpolating between a dimension and a percentage value and the dimension component is 0, we now return a percentage value rather than a `calc()` value. --- Libraries/LibWeb/CSS/Interpolation.cpp | 38 ++++++ .../border-image-width-interpolation.txt | 19 ++- ...ext-decoration-thickness-interpolation.txt | 115 +++++++++--------- .../animation/translate-interpolation.txt | 59 +++++---- .../animations/calc-interpolation.txt | 11 +- 5 files changed, 138 insertions(+), 104 deletions(-) diff --git a/Libraries/LibWeb/CSS/Interpolation.cpp b/Libraries/LibWeb/CSS/Interpolation.cpp index eb1981bab10..fb4ab5d561a 100644 --- a/Libraries/LibWeb/CSS/Interpolation.cpp +++ b/Libraries/LibWeb/CSS/Interpolation.cpp @@ -1100,6 +1100,44 @@ static RefPtr interpolate_value_impl(DOM::Element& element, Ca } }; + auto to_raw_value = [](StyleValue const& value) -> double { + switch (value.type()) { + case StyleValue::Type::Angle: + return value.as_angle().raw_value(); + case StyleValue::Type::Frequency: + return value.as_frequency().raw_value(); + case StyleValue::Type::Integer: + return value.as_integer().integer(); + case StyleValue::Type::Length: + return value.as_length().raw_value(); + case StyleValue::Type::Number: + return value.as_number().number(); + case StyleValue::Type::Percentage: + return value.as_percentage().raw_value(); + case StyleValue::Type::Time: + return value.as_time().raw_value(); + default: + VERIFY_NOT_REACHED(); + } + }; + + // https://drafts.csswg.org/css-values-4/#combine-mixed + // The computed value of a percentage-dimension mix is defined as + // FIXME: a computed dimension if the percentage component is zero or is defined specifically to compute to a dimension value + // a computed percentage if the dimension component is zero + // a computed calc() expression otherwise + if (from.type() != StyleValue::Type::Calculated && to.type() == StyleValue::Type::Percentage) { + auto dimension_component = to_raw_value(from) * (1.f - delta); + auto percentage_component = to.as_percentage().raw_value() * delta; + if (dimension_component == 0.f) + return PercentageStyleValue::create(Percentage { percentage_component }); + } else if (from.type() == StyleValue::Type::Percentage && to.type() != StyleValue::Type::Calculated) { + auto dimension_component = to_raw_value(to) * delta; + auto percentage_component = from.as_percentage().raw_value() * (1.f - delta); + if (dimension_component == 0) + return PercentageStyleValue::create(Percentage { percentage_component }); + } + auto from_node = to_calculation_node(from); auto to_node = to_calculation_node(to); diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-image-width-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-image-width-interpolation.txt index 2a65de251d5..9cfec4c34e3 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-image-width-interpolation.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-backgrounds/animations/border-image-width-interpolation.txt @@ -2,8 +2,7 @@ Harness status: OK Found 558 tests -550 Pass -8 Fail +558 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] @@ -281,25 +280,25 @@ Pass Web Animations: property from [10px 20% 30 40px] to [8 Pass Web Animations: property from [10px 20% 30 40px] to [80px 70% 60 50px] at (5) should be [360px 270% 180 90px] Pass Web Animations: property from [10px 20% 30 40px] to [80px 70% 60 50px] at (10) should be [710px 520% 330 140px] Pass CSS Transitions: property from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] -Fail CSS Transitions: property from [10%] to [20px] at (0) should be [10%] +Pass CSS Transitions: property from [10%] to [20px] at (0) should be [10%] Pass CSS Transitions: property from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] Pass CSS Transitions: property from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] Pass CSS Transitions: property from [10%] to [20px] at (1) should be [calc(0% + 20px)] Pass CSS Transitions: property from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] Pass CSS Transitions with transition: all: property from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] -Fail CSS Transitions with transition: all: property from [10%] to [20px] at (0) should be [10%] +Pass CSS Transitions with transition: all: property from [10%] to [20px] at (0) should be [10%] Pass CSS Transitions with transition: all: property from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] Pass CSS Transitions with transition: all: property from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] Pass CSS Transitions with transition: all: property from [10%] to [20px] at (1) should be [calc(0% + 20px)] Pass CSS Transitions with transition: all: property from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] Pass CSS Animations: property from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] -Fail CSS Animations: property from [10%] to [20px] at (0) should be [10%] +Pass CSS Animations: property from [10%] to [20px] at (0) should be [10%] Pass CSS Animations: property from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] Pass CSS Animations: property from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] Pass CSS Animations: property from [10%] to [20px] at (1) should be [calc(0% + 20px)] Pass CSS Animations: property from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] Pass Web Animations: property from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] -Fail Web Animations: property from [10%] to [20px] at (0) should be [10%] +Pass Web Animations: property from [10%] to [20px] at (0) should be [10%] Pass Web Animations: property from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] Pass Web Animations: property from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] Pass Web Animations: property from [10%] to [20px] at (1) should be [calc(0% + 20px)] @@ -308,25 +307,25 @@ Pass CSS Transitions: property from [10px] to [20%] at (-0. Pass CSS Transitions: property from [10px] to [20%] at (0) should be [calc(0% + 10px)] Pass CSS Transitions: property from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] Pass CSS Transitions: property from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] -Fail CSS Transitions: property from [10px] to [20%] at (1) should be [20%] +Pass CSS Transitions: property from [10px] to [20%] at (1) should be [20%] Pass CSS Transitions: property from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] Pass CSS Transitions with transition: all: property from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] Pass CSS Transitions with transition: all: property from [10px] to [20%] at (0) should be [calc(0% + 10px)] Pass CSS Transitions with transition: all: property from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] Pass CSS Transitions with transition: all: property from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] -Fail CSS Transitions with transition: all: property from [10px] to [20%] at (1) should be [20%] +Pass CSS Transitions with transition: all: property from [10px] to [20%] at (1) should be [20%] Pass CSS Transitions with transition: all: property from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] Pass CSS Animations: property from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] Pass CSS Animations: property from [10px] to [20%] at (0) should be [calc(0% + 10px)] Pass CSS Animations: property from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] Pass CSS Animations: property from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] -Fail CSS Animations: property from [10px] to [20%] at (1) should be [20%] +Pass CSS Animations: property from [10px] to [20%] at (1) should be [20%] Pass CSS Animations: property from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] Pass Web Animations: property from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] Pass Web Animations: property from [10px] to [20%] at (0) should be [calc(0% + 10px)] Pass Web Animations: property from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] Pass Web Animations: property from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] -Fail Web Animations: property from [10px] to [20%] at (1) should be [20%] +Pass Web Animations: property from [10px] to [20%] at (1) should be [20%] Pass Web Animations: property from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] Pass CSS Transitions: property from [10px auto auto 20] to [110px auto auto 120] at (-0.3) should be [ 0px auto auto 0] Pass CSS Transitions: property from [10px auto auto 20] to [110px auto auto 120] at (0) should be [ 10px auto auto 20] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-text-decor/animations/text-decoration-thickness-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-text-decor/animations/text-decoration-thickness-interpolation.txt index 23a3a5d07f0..d41c1df8975 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-text-decor/animations/text-decoration-thickness-interpolation.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-text-decor/animations/text-decoration-thickness-interpolation.txt @@ -2,8 +2,7 @@ Harness status: OK Found 288 tests -232 Pass -56 Fail +288 Pass Pass CSS Transitions: property from [16px] to [0px] at (0) should be [16px] Pass CSS Transitions: property from [16px] to [0px] at (0.3) should be [11.2px] Pass CSS Transitions: property from [16px] to [0px] at (0.6) should be [6.4px] @@ -135,35 +134,35 @@ Pass Web Animations: property from [16px] to [2em] a Pass CSS Transitions: property from [16px] to [0%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions: property from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass CSS Transitions: property from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail CSS Transitions: property from [16px] to [0%] at (1) should be [0%] +Pass CSS Transitions: property from [16px] to [0%] at (1) should be [0%] Pass CSS Transitions with transition: all: property from [16px] to [0%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions with transition: all: property from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass CSS Transitions with transition: all: property from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail CSS Transitions with transition: all: property from [16px] to [0%] at (1) should be [0%] +Pass CSS Transitions with transition: all: property from [16px] to [0%] at (1) should be [0%] Pass CSS Animations: property from [16px] to [0%] at (0) should be [calc(0% + 16px)] Pass CSS Animations: property from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass CSS Animations: property from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail CSS Animations: property from [16px] to [0%] at (1) should be [0%] +Pass CSS Animations: property from [16px] to [0%] at (1) should be [0%] Pass Web Animations: property from [16px] to [0%] at (0) should be [calc(0% + 16px)] Pass Web Animations: property from [16px] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass Web Animations: property from [16px] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail Web Animations: property from [16px] to [0%] at (1) should be [0%] +Pass Web Animations: property from [16px] to [0%] at (1) should be [0%] Pass CSS Transitions: property from [16px] to [200%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions: property from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass CSS Transitions: property from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail CSS Transitions: property from [16px] to [200%] at (1) should be [200%] +Pass CSS Transitions: property from [16px] to [200%] at (1) should be [200%] Pass CSS Transitions with transition: all: property from [16px] to [200%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions with transition: all: property from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass CSS Transitions with transition: all: property from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail CSS Transitions with transition: all: property from [16px] to [200%] at (1) should be [200%] +Pass CSS Transitions with transition: all: property from [16px] to [200%] at (1) should be [200%] Pass CSS Animations: property from [16px] to [200%] at (0) should be [calc(0% + 16px)] Pass CSS Animations: property from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass CSS Animations: property from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail CSS Animations: property from [16px] to [200%] at (1) should be [200%] +Pass CSS Animations: property from [16px] to [200%] at (1) should be [200%] Pass Web Animations: property from [16px] to [200%] at (0) should be [calc(0% + 16px)] Pass Web Animations: property from [16px] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass Web Animations: property from [16px] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail Web Animations: property from [16px] to [200%] at (1) should be [200%] +Pass Web Animations: property from [16px] to [200%] at (1) should be [200%] Pass CSS Transitions: property from [1em] to [0px] at (0) should be [16px] Pass CSS Transitions: property from [1em] to [0px] at (0.3) should be [11.2px] Pass CSS Transitions: property from [1em] to [0px] at (0.6) should be [6.4px] @@ -199,96 +198,96 @@ Pass Web Animations: property from [1em] to [32px] a Pass CSS Transitions: property from [1em] to [0%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions: property from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass CSS Transitions: property from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail CSS Transitions: property from [1em] to [0%] at (1) should be [0%] +Pass CSS Transitions: property from [1em] to [0%] at (1) should be [0%] Pass CSS Transitions with transition: all: property from [1em] to [0%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions with transition: all: property from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass CSS Transitions with transition: all: property from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail CSS Transitions with transition: all: property from [1em] to [0%] at (1) should be [0%] +Pass CSS Transitions with transition: all: property from [1em] to [0%] at (1) should be [0%] Pass CSS Animations: property from [1em] to [0%] at (0) should be [calc(0% + 16px)] Pass CSS Animations: property from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass CSS Animations: property from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail CSS Animations: property from [1em] to [0%] at (1) should be [0%] +Pass CSS Animations: property from [1em] to [0%] at (1) should be [0%] Pass Web Animations: property from [1em] to [0%] at (0) should be [calc(0% + 16px)] Pass Web Animations: property from [1em] to [0%] at (0.3) should be [calc(0% + 11.2px)] Pass Web Animations: property from [1em] to [0%] at (0.6) should be [calc(0% + 6.4px)] -Fail Web Animations: property from [1em] to [0%] at (1) should be [0%] +Pass Web Animations: property from [1em] to [0%] at (1) should be [0%] Pass CSS Transitions: property from [1em] to [200%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions: property from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass CSS Transitions: property from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail CSS Transitions: property from [1em] to [200%] at (1) should be [200%] +Pass CSS Transitions: property from [1em] to [200%] at (1) should be [200%] Pass CSS Transitions with transition: all: property from [1em] to [200%] at (0) should be [calc(0% + 16px)] Pass CSS Transitions with transition: all: property from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass CSS Transitions with transition: all: property from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail CSS Transitions with transition: all: property from [1em] to [200%] at (1) should be [200%] +Pass CSS Transitions with transition: all: property from [1em] to [200%] at (1) should be [200%] Pass CSS Animations: property from [1em] to [200%] at (0) should be [calc(0% + 16px)] Pass CSS Animations: property from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass CSS Animations: property from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail CSS Animations: property from [1em] to [200%] at (1) should be [200%] +Pass CSS Animations: property from [1em] to [200%] at (1) should be [200%] Pass Web Animations: property from [1em] to [200%] at (0) should be [calc(0% + 16px)] Pass Web Animations: property from [1em] to [200%] at (0.3) should be [calc(60% + 11.2px)] Pass Web Animations: property from [1em] to [200%] at (0.6) should be [calc(120% + 6.4px)] -Fail Web Animations: property from [1em] to [200%] at (1) should be [200%] -Fail CSS Transitions: property from [100%] to [0px] at (0) should be [100%] -Fail CSS Transitions: property from [100%] to [0px] at (0.3) should be [70%] -Fail CSS Transitions: property from [100%] to [0px] at (0.6) should be [40%] -Fail CSS Transitions: property from [100%] to [0px] at (1) should be [0%] -Fail CSS Transitions with transition: all: property from [100%] to [0px] at (0) should be [100%] -Fail CSS Transitions with transition: all: property from [100%] to [0px] at (0.3) should be [70%] -Fail CSS Transitions with transition: all: property from [100%] to [0px] at (0.6) should be [40%] -Fail CSS Transitions with transition: all: property from [100%] to [0px] at (1) should be [0%] -Fail CSS Animations: property from [100%] to [0px] at (0) should be [100%] -Fail CSS Animations: property from [100%] to [0px] at (0.3) should be [70%] -Fail CSS Animations: property from [100%] to [0px] at (0.6) should be [40%] -Fail CSS Animations: property from [100%] to [0px] at (1) should be [0%] -Fail Web Animations: property from [100%] to [0px] at (0) should be [100%] -Fail Web Animations: property from [100%] to [0px] at (0.3) should be [70%] -Fail Web Animations: property from [100%] to [0px] at (0.6) should be [40%] -Fail Web Animations: property from [100%] to [0px] at (1) should be [0%] -Fail CSS Transitions: property from [100%] to [32px] at (0) should be [100%] +Pass Web Animations: property from [1em] to [200%] at (1) should be [200%] +Pass CSS Transitions: property from [100%] to [0px] at (0) should be [100%] +Pass CSS Transitions: property from [100%] to [0px] at (0.3) should be [70%] +Pass CSS Transitions: property from [100%] to [0px] at (0.6) should be [40%] +Pass CSS Transitions: property from [100%] to [0px] at (1) should be [0%] +Pass CSS Transitions with transition: all: property from [100%] to [0px] at (0) should be [100%] +Pass CSS Transitions with transition: all: property from [100%] to [0px] at (0.3) should be [70%] +Pass CSS Transitions with transition: all: property from [100%] to [0px] at (0.6) should be [40%] +Pass CSS Transitions with transition: all: property from [100%] to [0px] at (1) should be [0%] +Pass CSS Animations: property from [100%] to [0px] at (0) should be [100%] +Pass CSS Animations: property from [100%] to [0px] at (0.3) should be [70%] +Pass CSS Animations: property from [100%] to [0px] at (0.6) should be [40%] +Pass CSS Animations: property from [100%] to [0px] at (1) should be [0%] +Pass Web Animations: property from [100%] to [0px] at (0) should be [100%] +Pass Web Animations: property from [100%] to [0px] at (0.3) should be [70%] +Pass Web Animations: property from [100%] to [0px] at (0.6) should be [40%] +Pass Web Animations: property from [100%] to [0px] at (1) should be [0%] +Pass CSS Transitions: property from [100%] to [32px] at (0) should be [100%] Pass CSS Transitions: property from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)] Pass CSS Transitions: property from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)] Pass CSS Transitions: property from [100%] to [32px] at (1) should be [calc(0% + 32px)] -Fail CSS Transitions with transition: all: property from [100%] to [32px] at (0) should be [100%] +Pass CSS Transitions with transition: all: property from [100%] to [32px] at (0) should be [100%] Pass CSS Transitions with transition: all: property from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)] Pass CSS Transitions with transition: all: property from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)] Pass CSS Transitions with transition: all: property from [100%] to [32px] at (1) should be [calc(0% + 32px)] -Fail CSS Animations: property from [100%] to [32px] at (0) should be [100%] +Pass CSS Animations: property from [100%] to [32px] at (0) should be [100%] Pass CSS Animations: property from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)] Pass CSS Animations: property from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)] Pass CSS Animations: property from [100%] to [32px] at (1) should be [calc(0% + 32px)] -Fail Web Animations: property from [100%] to [32px] at (0) should be [100%] +Pass Web Animations: property from [100%] to [32px] at (0) should be [100%] Pass Web Animations: property from [100%] to [32px] at (0.3) should be [calc(70% + 9.6px)] Pass Web Animations: property from [100%] to [32px] at (0.6) should be [calc(40% + 19.2px)] Pass Web Animations: property from [100%] to [32px] at (1) should be [calc(0% + 32px)] -Fail CSS Transitions: property from [100%] to [0em] at (0) should be [100%] -Fail CSS Transitions: property from [100%] to [0em] at (0.3) should be [70%] -Fail CSS Transitions: property from [100%] to [0em] at (0.6) should be [40%] -Fail CSS Transitions: property from [100%] to [0em] at (1) should be [0%] -Fail CSS Transitions with transition: all: property from [100%] to [0em] at (0) should be [100%] -Fail CSS Transitions with transition: all: property from [100%] to [0em] at (0.3) should be [70%] -Fail CSS Transitions with transition: all: property from [100%] to [0em] at (0.6) should be [40%] -Fail CSS Transitions with transition: all: property from [100%] to [0em] at (1) should be [0%] -Fail CSS Animations: property from [100%] to [0em] at (0) should be [100%] -Fail CSS Animations: property from [100%] to [0em] at (0.3) should be [70%] -Fail CSS Animations: property from [100%] to [0em] at (0.6) should be [40%] -Fail CSS Animations: property from [100%] to [0em] at (1) should be [0%] -Fail Web Animations: property from [100%] to [0em] at (0) should be [100%] -Fail Web Animations: property from [100%] to [0em] at (0.3) should be [70%] -Fail Web Animations: property from [100%] to [0em] at (0.6) should be [40%] -Fail Web Animations: property from [100%] to [0em] at (1) should be [0%] -Fail CSS Transitions: property from [100%] to [2em] at (0) should be [100%] +Pass CSS Transitions: property from [100%] to [0em] at (0) should be [100%] +Pass CSS Transitions: property from [100%] to [0em] at (0.3) should be [70%] +Pass CSS Transitions: property from [100%] to [0em] at (0.6) should be [40%] +Pass CSS Transitions: property from [100%] to [0em] at (1) should be [0%] +Pass CSS Transitions with transition: all: property from [100%] to [0em] at (0) should be [100%] +Pass CSS Transitions with transition: all: property from [100%] to [0em] at (0.3) should be [70%] +Pass CSS Transitions with transition: all: property from [100%] to [0em] at (0.6) should be [40%] +Pass CSS Transitions with transition: all: property from [100%] to [0em] at (1) should be [0%] +Pass CSS Animations: property from [100%] to [0em] at (0) should be [100%] +Pass CSS Animations: property from [100%] to [0em] at (0.3) should be [70%] +Pass CSS Animations: property from [100%] to [0em] at (0.6) should be [40%] +Pass CSS Animations: property from [100%] to [0em] at (1) should be [0%] +Pass Web Animations: property from [100%] to [0em] at (0) should be [100%] +Pass Web Animations: property from [100%] to [0em] at (0.3) should be [70%] +Pass Web Animations: property from [100%] to [0em] at (0.6) should be [40%] +Pass Web Animations: property from [100%] to [0em] at (1) should be [0%] +Pass CSS Transitions: property from [100%] to [2em] at (0) should be [100%] Pass CSS Transitions: property from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)] Pass CSS Transitions: property from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)] Pass CSS Transitions: property from [100%] to [2em] at (1) should be [calc(0% + 32px)] -Fail CSS Transitions with transition: all: property from [100%] to [2em] at (0) should be [100%] +Pass CSS Transitions with transition: all: property from [100%] to [2em] at (0) should be [100%] Pass CSS Transitions with transition: all: property from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)] Pass CSS Transitions with transition: all: property from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)] Pass CSS Transitions with transition: all: property from [100%] to [2em] at (1) should be [calc(0% + 32px)] -Fail CSS Animations: property from [100%] to [2em] at (0) should be [100%] +Pass CSS Animations: property from [100%] to [2em] at (0) should be [100%] Pass CSS Animations: property from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)] Pass CSS Animations: property from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)] Pass CSS Animations: property from [100%] to [2em] at (1) should be [calc(0% + 32px)] -Fail Web Animations: property from [100%] to [2em] at (0) should be [100%] +Pass Web Animations: property from [100%] to [2em] at (0) should be [100%] Pass Web Animations: property from [100%] to [2em] at (0.3) should be [calc(70% + 9.6px)] Pass Web Animations: property from [100%] to [2em] at (0.6) should be [calc(40% + 19.2px)] Pass Web Animations: property from [100%] to [2em] at (1) should be [calc(0% + 32px)] \ No newline at end of file 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 9bc5e1be11e..36a63385308 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 @@ -2,8 +2,7 @@ Harness status: OK Found 408 tests -380 Pass -28 Fail +408 Pass Pass CSS Transitions: property from [-100px] to [100px] at (-1) should be [-300px] Pass CSS Transitions: property from [-100px] to [100px] at (0) should be [-100px] Pass CSS Transitions: property from [-100px] to [100px] at (0.25) should be [-50px] @@ -152,25 +151,25 @@ Pass CSS Transitions: property from [480px 400px 320px] to [240% 160 Pass CSS Transitions: property from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px] Pass CSS Transitions: property from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px] Pass CSS Transitions: property from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px] -Fail CSS Transitions: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] +Pass CSS Transitions: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] Pass CSS Transitions: property from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px] Pass CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px] Pass CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px] Pass CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px] Pass CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px] -Fail CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] +Pass CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] Pass CSS Transitions with transition: all: property from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px] Pass CSS Animations: property from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px] Pass CSS Animations: property from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px] Pass CSS Animations: property from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px] Pass CSS Animations: property from [480px 400px 320px] to [240% 160%] at (0.875) should be [calc(210% + 60px) calc(140% + 50px) 40px] -Fail CSS Animations: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] +Pass CSS Animations: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] Pass CSS Animations: property from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px] Pass Web Animations: property from [480px 400px 320px] to [240% 160%] at (-1) should be [calc(960px - 240%) calc(800px - 160%) 640px] Pass Web Animations: property from [480px 400px 320px] to [240% 160%] at (0) should be [calc(0% + 480px) calc(0% + 400px) 320px] Pass Web Animations: property from [480px 400px 320px] to [240% 160%] at (0.125) should be [calc(420px + 30%) calc(350px + 20%) 280px] Pass 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%] +Pass Web Animations: property from [480px 400px 320px] to [240% 160%] at (1) should be [240% 160%] Pass Web Animations: property from [480px 400px 320px] to [240% 160%] at (2) should be [calc(480% - 480px) calc(320% - 400px) -320px] 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] @@ -196,30 +195,30 @@ Pass Web Animations: property from [none] to [none] at (0.125) shoul 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] -Fail CSS Transitions: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] -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 (2) should be [16px 160% 1600px] -Fail CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] -Fail CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] -Fail CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] -Fail CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] -Fail CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] -Fail CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] -Fail CSS Animations: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] -Fail CSS Animations: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] -Fail CSS Animations: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] -Fail CSS Animations: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] -Fail CSS Animations: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] -Fail CSS Animations: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] -Fail Web Animations: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] -Fail Web Animations: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] -Fail Web Animations: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] -Fail Web Animations: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] -Fail Web Animations: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] -Fail Web Animations: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] +Pass CSS Transitions: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] +Pass CSS Transitions: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] +Pass CSS Transitions: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] +Pass CSS Transitions: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] +Pass CSS Transitions: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] +Pass CSS Transitions: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] +Pass CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] +Pass CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] +Pass CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] +Pass CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] +Pass CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] +Pass CSS Transitions with transition: all: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] +Pass CSS Animations: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] +Pass CSS Animations: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] +Pass CSS Animations: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] +Pass CSS Animations: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] +Pass CSS Animations: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] +Pass CSS Animations: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] +Pass Web Animations: property from [none] to [8px 80% 800px] at (-1) should be [-8px -80% -800px] +Pass Web Animations: property from [none] to [8px 80% 800px] at (0) should be [0px 0%] +Pass Web Animations: property from [none] to [8px 80% 800px] at (0.125) should be [1px 10% 100px] +Pass Web Animations: property from [none] to [8px 80% 800px] at (0.875) should be [7px 70% 700px] +Pass Web Animations: property from [none] to [8px 80% 800px] at (1) should be [8px 80% 800px] +Pass Web Animations: property from [none] to [8px 80% 800px] at (2) should be [16px 160% 1600px] Pass CSS Transitions: property from neutral to [20px] at (-1) should be [0px] Pass CSS Transitions: property from neutral to [20px] at (0) should be [10px] Pass CSS Transitions: property from neutral to [20px] at (0.25) should be [12.5px] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/animations/calc-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/animations/calc-interpolation.txt index bcd5db4f19c..2925139495e 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-values/animations/calc-interpolation.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-values/animations/calc-interpolation.txt @@ -2,8 +2,7 @@ Harness status: OK Found 140 tests -136 Pass -4 Fail +140 Pass Pass CSS Transitions: property from [0px] to [calc(infinity * 1px)] at (-0.25) should be [-8.5070575e+37px] Pass CSS Transitions: property from [0px] to [calc(infinity * 1px)] at (0) should be [0px] Pass CSS Transitions: property from [0px] to [calc(infinity * 1px)] at (0.25) should be [8.5070575e+37px] @@ -117,28 +116,28 @@ Pass Web Animations: property from [0em] to [100px] at (0.75) shou Pass Web Animations: property from [0em] to [100px] at (1) should be [100px] Pass Web Animations: property from [0em] to [100px] at (1.25) should be [125px] Pass CSS Transitions: property from [0%] to [100px] at (-0.25) should be [calc(0% + -25px)] -Fail CSS Transitions: property from [0%] to [100px] at (0) should be [0%] +Pass CSS Transitions: property from [0%] to [100px] at (0) should be [0%] Pass CSS Transitions: property from [0%] to [100px] at (0.25) should be [calc(0% + 25px)] Pass CSS Transitions: property from [0%] to [100px] at (0.5) should be [calc(0% + 50px)] Pass CSS Transitions: property from [0%] to [100px] at (0.75) should be [calc(0% + 75px)] Pass CSS Transitions: property from [0%] to [100px] at (1) should be [calc(0% + 100px)] Pass CSS Transitions: property from [0%] to [100px] at (1.25) should be [calc(0% + 125px)] Pass CSS Transitions with transition: all: property from [0%] to [100px] at (-0.25) should be [calc(0% + -25px)] -Fail CSS Transitions with transition: all: property from [0%] to [100px] at (0) should be [0%] +Pass CSS Transitions with transition: all: property from [0%] to [100px] at (0) should be [0%] Pass CSS Transitions with transition: all: property from [0%] to [100px] at (0.25) should be [calc(0% + 25px)] Pass CSS Transitions with transition: all: property from [0%] to [100px] at (0.5) should be [calc(0% + 50px)] Pass CSS Transitions with transition: all: property from [0%] to [100px] at (0.75) should be [calc(0% + 75px)] Pass CSS Transitions with transition: all: property from [0%] to [100px] at (1) should be [calc(0% + 100px)] Pass CSS Transitions with transition: all: property from [0%] to [100px] at (1.25) should be [calc(0% + 125px)] Pass CSS Animations: property from [0%] to [100px] at (-0.25) should be [calc(0% + -25px)] -Fail CSS Animations: property from [0%] to [100px] at (0) should be [0%] +Pass CSS Animations: property from [0%] to [100px] at (0) should be [0%] Pass CSS Animations: property from [0%] to [100px] at (0.25) should be [calc(0% + 25px)] Pass CSS Animations: property from [0%] to [100px] at (0.5) should be [calc(0% + 50px)] Pass CSS Animations: property from [0%] to [100px] at (0.75) should be [calc(0% + 75px)] Pass CSS Animations: property from [0%] to [100px] at (1) should be [calc(0% + 100px)] Pass CSS Animations: property from [0%] to [100px] at (1.25) should be [calc(0% + 125px)] Pass Web Animations: property from [0%] to [100px] at (-0.25) should be [calc(0% + -25px)] -Fail Web Animations: property from [0%] to [100px] at (0) should be [0%] +Pass Web Animations: property from [0%] to [100px] at (0) should be [0%] Pass Web Animations: property from [0%] to [100px] at (0.25) should be [calc(0% + 25px)] Pass Web Animations: property from [0%] to [100px] at (0.5) should be [calc(0% + 50px)] Pass Web Animations: property from [0%] to [100px] at (0.75) should be [calc(0% + 75px)]