LibWeb: Produce correct resolved value for animation-duration

Author: Calme1709

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -21,6 +21,7 @@
 #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StyleValueList.h>
+#include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
@@ -870,6 +871,38 @@ RefPtr<StyleValue const> CSSStyleProperties::style_value_for_computed_property(L
             return TransformationStyleValue::create(PropertyID::Transform, TransformFunction::Matrix3d, move(parameters));
         }
     }
+    case PropertyID::AnimationDuration: {
+        // https://drafts.csswg.org/css-animations-2/#animation-duration
+        // For backwards-compatibility with Level 1, when the computed value of animation-timeline is auto (i.e. only
+        // one list value, and that value being auto), the resolved value of auto for animation-duration is 0s whenever
+        // its used value would also be 0s.
+        auto const& animation_timeline_computed_value = get_computed_value(PropertyID::AnimationTimeline);
+        auto const& animation_duration_computed_value = get_computed_value(PropertyID::AnimationDuration);
+
+        if (animation_timeline_computed_value.to_keyword() == Keyword::Auto) {
+
+            // FIXME: We can remove these two branches once parse_comma_separated_value_list always returns StyleValueList.
+            if (animation_duration_computed_value.to_keyword() == Keyword::Auto)
+                return TimeStyleValue::create(Time::make_seconds(0));
+
+            if (!animation_duration_computed_value.is_value_list())
+                return animation_duration_computed_value;
+
+            StyleValueVector resolved_durations;
+
+            for (auto const& duration : animation_duration_computed_value.as_value_list().values()) {
+                if (duration->to_keyword() == Keyword::Auto) {
+                    resolved_durations.append(TimeStyleValue::create(Time::make_seconds(0)));
+                } else {
+                    resolved_durations.append(duration);
+                }
+            }
+
+            return StyleValueList::create(move(resolved_durations), StyleValueList::Separator::Comma);
+        }
+
+        return animation_duration_computed_value;
+    }
 
         // -> Any other property
         //    The resolved value is the computed value.

Tests/LibWeb/Text/expected/wpt-import/css/css-animations/parsing/animation-duration-computed.txt

@@ -2,15 +2,15 @@ Harness status: OK
 
 Found 15 tests
 
-11 Pass
-4 Fail
+13 Pass
+2 Fail
 Pass	Property animation-duration value '500ms'
 Pass	Property animation-duration value 'calc(2 * 3s)'
 Fail	Property animation-duration value 'calc(10s + (sign(2cqw - 10px) * 5s))'
 Pass	Property animation-duration value '20s, 10s'
-Fail	Property animation-duration value 'auto'
+Pass	Property animation-duration value 'auto'
 Fail	Property animation-duration value 'auto, auto'
-Fail	Resolved value of animation-duration:auto with animation-timeline:auto
+Pass	Resolved value of animation-duration:auto with animation-timeline:auto
 Pass	Resolved value of animation-duration:auto with animation-timeline:auto, auto
 Pass	Resolved value of animation-duration:auto with animation-timeline:--t
 Pass	Resolved value of animation-duration:auto with animation-timeline:--t, --t2