LibWeb: Interpolate ellipse() function by computed value

This commit is contained in:
Tim Ledbetter 2025-09-13 15:26:34 +01:00 committed by Sam Atkins
commit b19fee9962
Notes: github-actions[bot] 2025-09-15 09:35:58 +00:00
3 changed files with 53 additions and 36 deletions

View file

@ -1253,6 +1253,23 @@ static RefPtr<StyleValue const> interpolate_value_impl(DOM::Element& element, Ca
return {};
return Circle { *interpolated_radius, interpolated_position->as_position() };
},
[&](Ellipse const& from_ellipse) -> Optional<BasicShape> {
auto const& to_ellipse = to_shape.get<Ellipse>();
if (!from_ellipse.radius_x.has<LengthPercentage>() || !to_ellipse.radius_x.has<LengthPercentage>())
return {};
if (!from_ellipse.radius_y.has<LengthPercentage>() || !to_ellipse.radius_y.has<LengthPercentage>())
return {};
auto interpolated_radius_x = interpolate_length_percentage(calculation_context, from_ellipse.radius_x.get<LengthPercentage>(), to_ellipse.radius_x.get<LengthPercentage>(), delta);
if (!interpolated_radius_x.has_value())
return {};
auto interpolated_radius_y = interpolate_length_percentage(calculation_context, from_ellipse.radius_y.get<LengthPercentage>(), to_ellipse.radius_y.get<LengthPercentage>(), 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<BasicShape> {
// 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.

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 366 tests
336 Pass
30 Fail
354 Pass
12 Fail
Pass CSS Transitions: property <clip-path> from neutral to [circle(40% at 20% 20%)] at (-0.3) should be [circle(66% at 7% 33%)]
Pass CSS Transitions: property <clip-path> from neutral to [circle(40% at 20% 20%)] at (0) should be [circle(60% at 10% 30%)]
Pass CSS Transitions: property <clip-path> 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 <clip-path> from [circle(100% at 0% 0%)] to [circl
Pass Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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)]

View file

@ -2,8 +2,8 @@ Harness status: OK
Found 720 tests
630 Pass
90 Fail
644 Pass
76 Fail
Pass CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (-0.3) should be [inset(7px)]
Pass CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (0) should be [inset(10px)]
Pass CSS Transitions: property <clip-path> from neutral to [inset(20px)] at (0.3) should be [inset(13px)]
@ -329,29 +329,29 @@ Pass Web Animations: property <clip-path> from [circle(50px at 10px 20px)] to [c
Pass Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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%)]