LibWeb/CSS: Resolve calc percentages as lengths in basic-shape functions

Fixes a crash on https://www.lego.com/en-gb/product/game-boy-72046 :^)

The apparent regressions in clip-path-interpolation-xywh-rect.html are
because of false positives. Something about the test was causing it to
compare two wrong values that happened to be the same. Now one of the
values is correct, they don't match.

Author: AtkinsSJ

Libraries/LibWeb/CSS/Parser/ValueParsing.cpp

@@ -3233,6 +3233,9 @@ RefPtr<URLStyleValue const> Parser::parse_url_value(TokenStream<ComponentValue>&
 // https://www.w3.org/TR/css-shapes-1/#typedef-shape-radius
 Optional<ShapeRadius> Parser::parse_shape_radius(TokenStream<ComponentValue>& tokens)
 {
+    // FIXME: <shape-radius> has been replaced <radial-size> as defined in CSS Images:
+    //        https://drafts.csswg.org/css-images-3/#typedef-radial-size
+
     auto transaction = tokens.begin_transaction();
     tokens.discard_whitespace();
     auto maybe_radius = parse_length_percentage(tokens);
@@ -3298,6 +3301,7 @@ RefPtr<StyleValue const> Parser::parse_basic_shape_value(TokenStream<ComponentVa
         return nullptr;
 
     auto function_name = component_value.function().name.bytes_as_string_view();
+    auto context_guard = push_temporary_value_parsing_context(FunctionContext { function_name });
 
     auto parse_fill_rule_argument = [](Vector<ComponentValue> const& component_values) -> Optional<Gfx::WindingRule> {
         TokenStream tokens { component_values };
@@ -4213,6 +4217,10 @@ RefPtr<CalculatedStyleValue const> Parser::parse_calculated_value(ComponentValue
                         "color"sv)) {
                     return CalculationContext {};
                 }
+                if (function.name.is_one_of_ignoring_ascii_case(
+                        "circle"sv, "ellipse"sv, "inset"sv, "polygon"sv, "rect"sv, "xywh"sv)) {
+                    return CalculationContext { .percentages_resolve_as = ValueType::Length };
+                }
                 // FIXME: Add other functions that provide a context for resolving values
                 return {};
             },

Tests/LibWeb/Text/expected/wpt-import/css/css-masking/animations/clip-path-interpolation-001.txt

@@ -2,8 +2,7 @@ Harness status: OK
 
 Found 366 tests
 
-354 Pass
-12 Fail
+366 Pass
 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%)]
@@ -316,18 +315,18 @@ Pass	Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0
 Pass	Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
 Pass	Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
 Pass	Web Animations: property <clip-path> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
-Fail	CSS Transitions: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
-Fail	CSS Transitions: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
-Fail	CSS Transitions: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
-Fail	CSS Transitions with transition: all: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
-Fail	CSS Transitions with transition: all: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
-Fail	CSS Transitions with transition: all: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
-Fail	CSS Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
-Fail	CSS Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
-Fail	CSS Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
-Fail	Web Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
-Fail	Web Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
-Fail	Web Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
+Pass	CSS Transitions: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
+Pass	CSS Transitions: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
+Pass	CSS Transitions: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
+Pass	CSS Transitions with transition: all: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
+Pass	CSS Transitions with transition: all: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
+Pass	CSS Transitions with transition: all: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
+Pass	CSS Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
+Pass	CSS Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
+Pass	CSS Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
+Pass	Web Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.25) should be [circle(30% at 90% calc(-20px + 100%))]
+Pass	Web Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.5) should be [circle(35% at 85% calc(-25px + 100%))]
+Pass	Web Animations: property <clip-path> from [circle(25% at right 5% bottom 15px)] to [circle(45% at right 25% bottom 35px)] at (0.75) should be [circle(40% at 80% calc(-30px + 100%))]
 Pass	CSS Transitions with transition-behavior:allow-discrete: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [url(file:///.../clip-source)]
 Pass	CSS Transitions with transition-behavior:allow-discrete: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0) should be [url(file:///.../clip-source)]
 Pass	CSS Transitions with transition-behavior:allow-discrete: property <clip-path> from [url("/clip-source")] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [url(file:///.../clip-source)]