LibWeb: Interpolate rect() function by computed value

Author: https://github.com/tcl3
Commit: 853bedeb31
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6183
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/CSS/Interpolation.cpp

@@ -1230,6 +1230,15 @@ static RefPtr<StyleValue const> interpolate_value_impl(DOM::Element& element, Ca
                     return {};
                 return Xywh { *interpolated_x, *interpolated_y, *interpolated_width, *interpolated_height };
             },
+            [&](Rect const& from_rect) -> Optional<BasicShape> {
+                auto const& to_rect = to_shape.get<Rect>();
+                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<BasicShape> {
                 return {};
             });

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
+240 Pass
-138 Fail
+120 Fail
 Pass	CSS Transitions with transition-behavior:allow-discrete: property <clip-path> from [initial] to [xywh(10px 10px 100px 100px)] at (-0.3) should be [initial]
 Pass	CSS Transitions with transition-behavior:allow-discrete: property <clip-path> from [initial] to [xywh(10px 10px 100px 100px)] at (0) should be [initial]
 Pass	CSS Transitions with transition-behavior:allow-discrete: property <clip-path> from [initial] to [xywh(10px 10px 100px 100px)] at (0.3) should be [initial]
@@ -196,30 +196,30 @@ Pass	Web Animations: property <clip-path> from [xywh(5px 5px 150% 150%)] to [xyw
 Pass	Web Animations: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [rect(10px 100px 50% 10%)] to [rect(50px 200px 90% 50%)] at (2) should be [rect(90px 300px 130% 90%)]
+Pass	CSS Transitions: property <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> 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 <clip-path> from [rect(auto auto auto auto)] to [rect(80% 20% 20% 80%)] at (-1) should be [inset(-80%)]
 Fail	CSS Transitions: property <clip-path> from [rect(auto auto auto auto)] to [rect(80% 20% 20% 80%)] at (0) should be [inset(0%)]
 Fail	CSS Transitions: property <clip-path> from [rect(auto auto auto auto)] to [rect(80% 20% 20% 80%)] at (0.125) should be [inset(10%)]