diff --git a/Libraries/LibWeb/CSS/Interpolation.cpp b/Libraries/LibWeb/CSS/Interpolation.cpp index 2d4da1846de..694bed9fda9 100644 --- a/Libraries/LibWeb/CSS/Interpolation.cpp +++ b/Libraries/LibWeb/CSS/Interpolation.cpp @@ -1253,6 +1253,23 @@ static RefPtr interpolate_value_impl(DOM::Element& element, Ca return {}; return Circle { *interpolated_radius, interpolated_position->as_position() }; }, + [&](Ellipse const& from_ellipse) -> Optional { + auto const& to_ellipse = to_shape.get(); + if (!from_ellipse.radius_x.has() || !to_ellipse.radius_x.has()) + return {}; + if (!from_ellipse.radius_y.has() || !to_ellipse.radius_y.has()) + return {}; + auto interpolated_radius_x = interpolate_length_percentage(calculation_context, from_ellipse.radius_x.get(), to_ellipse.radius_x.get(), delta); + if (!interpolated_radius_x.has_value()) + return {}; + auto interpolated_radius_y = interpolate_length_percentage(calculation_context, from_ellipse.radius_y.get(), to_ellipse.radius_y.get(), delta); + if (!interpolated_radius_y.has_value()) + return {}; + auto interpolated_position = interpolate_value(element, calculation_context, from_ellipse.position, to_ellipse.position, delta, allow_discrete); + if (!interpolated_position) + return {}; + return Ellipse { *interpolated_radius_x, *interpolated_radius_y, interpolated_position->as_position() }; + }, [&](Polygon const& from_polygon) -> Optional { // If both shapes are of type polygon(), both polygons have the same number of vertices, and use the // same <'fill-rule'>, interpolate between each value in the shape functions. diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-001.txt index 33bcf786a9e..a1890da140f 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-001.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-001.txt @@ -2,8 +2,8 @@ Harness status: OK Found 366 tests -336 Pass -30 Fail +354 Pass +12 Fail Pass CSS Transitions: property from neutral to [circle(40% at 20% 20%)] at (-0.3) should be [circle(66% at 7% 33%)] Pass CSS Transitions: property from neutral to [circle(40% at 20% 20%)] at (0) should be [circle(60% at 10% 30%)] Pass CSS Transitions: property from neutral to [circle(40% at 20% 20%)] at (0.3) should be [circle(54% at 13% 27%)] @@ -160,30 +160,30 @@ Pass Web Animations: property from [circle(100% at 0% 0%)] to [circl Pass Web Animations: property from [circle(100% at 0% 0%)] to [circle(50% at 25% 25%)] at (0.6) should be [circle(70% at 15% 15%)] Pass Web Animations: property from [circle(100% at 0% 0%)] to [circle(50% at 25% 25%)] at (1) should be [circle(50% at 25% 25%)] Pass Web Animations: property from [circle(100% at 0% 0%)] to [circle(50% at 25% 25%)] at (1.5) should be [circle(25% at 37.5% 37.5%)] -Fail CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] -Fail CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0) should be [ellipse(100% 100% at 0% 0%)] -Fail CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] -Fail CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] +Pass CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] +Pass CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0) should be [ellipse(100% 100% at 0% 0%)] +Pass CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] +Pass CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] Pass CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1) should be [ellipse(50% 50% at 25% 25%)] -Fail CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] -Fail CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] -Fail CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0) should be [ellipse(100% 100% at 0% 0%)] -Fail CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] -Fail CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] +Pass CSS Transitions: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] +Pass CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] +Pass CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0) should be [ellipse(100% 100% at 0% 0%)] +Pass CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] +Pass CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] Pass CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1) should be [ellipse(50% 50% at 25% 25%)] -Fail CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] -Fail CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] +Pass CSS Transitions with transition: all: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] +Pass CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] Pass CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0) should be [ellipse(100% 100% at 0% 0%)] -Fail CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] -Fail CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] +Pass CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] +Pass CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] Pass CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1) should be [ellipse(50% 50% at 25% 25%)] -Fail CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] -Fail Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] +Pass CSS Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] +Pass Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (-0.3) should be [ellipse(115% 115% at -7.5% -7.5%)] Pass Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0) should be [ellipse(100% 100% at 0% 0%)] -Fail Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] -Fail Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] +Pass Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.3) should be [ellipse(85% 85% at 7.5% 7.5%)] +Pass Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (0.6) should be [ellipse(70% 70% at 15% 15%)] Pass Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1) should be [ellipse(50% 50% at 25% 25%)] -Fail Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] +Pass Web Animations: property from [ellipse(100% 100% at 0% 0%)] to [ellipse(50% 50% at 25% 25%)] at (1.5) should be [ellipse(25% 25% at 37.5% 37.5%)] Pass CSS Transitions: property from [polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(nonzero, -7.5px -7.5px, 17.5px 17.5px, 42.5px 42.5px)] Pass CSS Transitions: property from [polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)] Pass CSS Transitions: property from [polygon(nonzero, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(nonzero, 7.5px 7.5px, 32.5px 32.5px, 57.5px 57.5px)] diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt index 87b3ece018c..f354e9efa8e 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-002.txt @@ -2,8 +2,8 @@ Harness status: OK Found 720 tests -630 Pass -90 Fail +644 Pass +76 Fail Pass CSS Transitions: property from neutral to [inset(20px)] at (-0.3) should be [inset(7px)] Pass CSS Transitions: property from neutral to [inset(20px)] at (0) should be [inset(10px)] Pass CSS Transitions: property from neutral to [inset(20px)] at (0.3) should be [inset(13px)] @@ -329,29 +329,29 @@ Pass Web Animations: property from [circle(50px at 10px 20px)] to [c Pass Web Animations: property from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1) should be [circle(farthest-side at 30px 40px)] Pass Web Animations: property from [circle(50px at 10px 20px)] to [circle(farthest-side at 30px 40px)] at (1.5) should be [circle(farthest-side at 30px 40px)] Fail CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (-0.3) should be [ellipse(0px 0px at 17.5px 82.5px)] -Fail CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0) should be [ellipse(10px 20px at 25px 75px)] -Fail CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] -Fail CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] +Pass CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0) should be [ellipse(10px 20px at 25px 75px)] +Pass CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] +Pass CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] Pass CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1) should be [ellipse(50px 100px at 50px 50px)] -Fail CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] +Pass CSS Transitions: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] Fail CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (-0.3) should be [ellipse(0px 0px at 17.5px 82.5px)] -Fail CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0) should be [ellipse(10px 20px at 25px 75px)] -Fail CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] -Fail CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] +Pass CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0) should be [ellipse(10px 20px at 25px 75px)] +Pass CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] +Pass CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] Pass CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1) should be [ellipse(50px 100px at 50px 50px)] -Fail CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] +Pass CSS Transitions with transition: all: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] Fail CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (-0.3) should be [ellipse(0px 0px at 17.5px 82.5px)] Pass CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0) should be [ellipse(10px 20px at 25px 75px)] -Fail CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] -Fail CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] +Pass CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] +Pass CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] Pass CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1) should be [ellipse(50px 100px at 50px 50px)] -Fail CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] +Pass CSS Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] Fail Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (-0.3) should be [ellipse(0px 0px at 17.5px 82.5px)] Pass Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0) should be [ellipse(10px 20px at 25px 75px)] -Fail Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] -Fail Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] +Pass Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.3) should be [ellipse(22px 44px at 32.5px 67.5px)] +Pass Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (0.6) should be [ellipse(34px 68px at 40px 60px)] Pass Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1) should be [ellipse(50px 100px at 50px 50px)] -Fail Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] +Pass Web Animations: property from [ellipse(10px 20px at 25px 75px)] to [ellipse(50px 100px at 50px 50px)] at (1.5) should be [ellipse(70px 140px at 62.5px 37.5px)] Pass CSS Transitions with transition-behavior:allow-discrete: property from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (-0.3) should be [ellipse(closest-side farthest-side at 25px 75%)] Pass CSS Transitions with transition-behavior:allow-discrete: property from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0) should be [ellipse(closest-side farthest-side at 25px 75%)] Pass CSS Transitions with transition-behavior:allow-discrete: property from [ellipse(closest-side farthest-side at 25px 75%)] to [ellipse(closest-side farthest-side at 50px center)] at (0.3) should be [ellipse(closest-side farthest-side at 25px 75%)]