From 853bedeb31dff3e5f02f1e03f7cad2502a677f75 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Sat, 13 Sep 2025 14:05:31 +0100 Subject: [PATCH] LibWeb: Interpolate `rect()` function by computed value --- Libraries/LibWeb/CSS/Interpolation.cpp | 9 +++++ .../clip-path-interpolation-xywh-rect.txt | 40 +++++++++---------- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/Libraries/LibWeb/CSS/Interpolation.cpp b/Libraries/LibWeb/CSS/Interpolation.cpp index 15c7756f6a0..f232257df53 100644 --- a/Libraries/LibWeb/CSS/Interpolation.cpp +++ b/Libraries/LibWeb/CSS/Interpolation.cpp @@ -1230,6 +1230,15 @@ static RefPtr interpolate_value_impl(DOM::Element& element, Ca return {}; return Xywh { *interpolated_x, *interpolated_y, *interpolated_width, *interpolated_height }; }, + [&](Rect const& from_rect) -> Optional { + auto const& to_rect = to_shape.get(); + auto from_rect_box = from_rect.box; + auto to_rect_box = to_rect.box; + auto interpolated_rect_box = interpolate_length_box(calculation_context, from_rect_box, to_rect_box, delta); + if (!interpolated_rect_box.has_value()) + return {}; + return Rect { *interpolated_rect_box }; + }, [](auto&) -> Optional { return {}; }); diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-xywh-rect.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-xywh-rect.txt index cdd21ccccd1..00eeeb4bfc3 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-xywh-rect.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-xywh-rect.txt @@ -2,8 +2,8 @@ Harness status: OK Found 360 tests -222 Pass -138 Fail +240 Pass +120 Fail Pass CSS Transitions with transition-behavior:allow-discrete: property from [initial] to [xywh(10px 10px 100px 100px)] at (-0.3) should be [initial] Pass CSS Transitions with transition-behavior:allow-discrete: property from [initial] to [xywh(10px 10px 100px 100px)] at (0) should be [initial] Pass CSS Transitions with transition-behavior:allow-discrete: property from [initial] to [xywh(10px 10px 100px 100px)] at (0.3) should be [initial] @@ -196,30 +196,30 @@ Pass Web Animations: property from [xywh(5px 5px 150% 150%)] to [xyw Pass Web Animations: property from [xywh(5px 5px 150% 150%)] to [xywh(10px 10px 100% 100%)] at (0.875) should be [xywh(9.38px 9.38px 106.25% 106.25%)] Pass Web Animations: property from [xywh(5px 5px 150% 150%)] to [xywh(10px 10px 100% 100%)] at (1) should be [xywh(10px 10px 100% 100%)] Pass Web Animations: property from [xywh(5px 5px 150% 150%)] to [xywh(10px 10px 100% 100%)] at (2) should be [xywh(15px 15px 50% 50%)] -Fail CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] -Fail CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0) should be [rect(10px 100px 50% 10%)] -Fail CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] -Fail CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] +Pass CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] +Pass CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0) should be [rect(10px 100px 50% 10%)] +Pass CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] +Pass CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] Pass CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (1) should be [rect(50px 200px 90% 50%)] -Fail CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] -Fail CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] -Fail CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0) should be [rect(10px 100px 50% 10%)] -Fail CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] -Fail CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] +Pass CSS Transitions: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] +Pass CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] +Pass CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0) should be [rect(10px 100px 50% 10%)] +Pass CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] +Pass CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] Pass CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (1) should be [rect(50px 200px 90% 50%)] -Fail CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] -Fail CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] +Pass CSS Transitions with transition: all: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] +Pass CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] Pass CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0) should be [rect(10px 100px 50% 10%)] -Fail CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] -Fail CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] +Pass CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] +Pass CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] Pass CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (1) should be [rect(50px 200px 90% 50%)] -Fail CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] -Fail Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] +Pass CSS Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] +Pass Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (-1) should be [rect(-30px 0px 10% -30%)] Pass Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0) should be [rect(10px 100px 50% 10%)] -Fail Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] -Fail Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] +Pass Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.125) should be [rect(15px 112.5px 55% 15%)] +Pass Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (0.875) should be [rect(45px 187.5px 85% 45%)] Pass Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (1) should be [rect(50px 200px 90% 50%)] -Fail Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] +Pass Web Animations: property from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)] Fail CSS Transitions: property from [rect(auto auto auto auto)] to [rect(80% 20% 20% 80%)] at (-1) should be [inset(-80%)] Fail CSS Transitions: property from [rect(auto auto auto auto)] to [rect(80% 20% 20% 80%)] at (0) should be [inset(0%)] Fail CSS Transitions: property from [rect(auto auto auto auto)] to [rect(80% 20% 20% 80%)] at (0.125) should be [inset(10%)]