LibWeb: Expose applicable effect timing values as CSSNumberish

Author: Calme1709

Libraries/LibWeb/Animations/AnimationEffect.cpp

@@ -66,7 +66,11 @@ OptionalEffectTiming EffectTiming::to_optional_effect_timing() const
         .fill = fill,
         .iteration_start = iteration_start,
         .iterations = iterations,
-        .duration = duration,
+        .duration = duration.visit(
+            [](double const& value) -> Variant<double, String> { return value; },
+            [](String const& value) -> Variant<double, String> { return value; },
+            // NB: We check that this isn't the case in the caller
+            [](GC::Root<CSS::CSSNumericValue> const&) -> Variant<double, String> { VERIFY_NOT_REACHED(); }),
         .direction = direction,
         .easing = easing,
     };
@@ -104,7 +108,7 @@ ComputedEffectTiming AnimationEffect::get_computed_timing() const
     //       If duration is the string auto, this attribute will return the current calculated value of the intrinsic
     //       iteration duration, which may be a expressed as a double representing the duration in milliseconds or a
     //       percentage when the effect is associated with a progress-based timeline.
-    auto duration = m_iteration_duration.as_milliseconds();
+    auto duration = m_iteration_duration.as_css_numberish();
 
     //     - fill: likewise, while getTiming() may return the string auto, getComputedTiming() must return the specific
     //       FillMode used for timing calculations as defined in the description of the fill member of the EffectTiming
@@ -125,9 +129,9 @@ ComputedEffectTiming AnimationEffect::get_computed_timing() const
             .easing = m_timing_function.to_string(),
         },
 
-        end_time().as_milliseconds(),
-        active_duration().as_milliseconds(),
-        local_time().map([](auto const& time) { return time.as_milliseconds(); }),
+        end_time().as_css_numberish(),
+        active_duration().as_css_numberish(),
+        NullableCSSNumberish::from_optional_css_numberish_time(local_time()),
         transformed_progress(),
         current_iteration(),
     };

Libraries/LibWeb/Animations/AnimationEffect.h

@@ -31,24 +31,26 @@ struct OptionalEffectTiming {
 };
 
 // https://www.w3.org/TR/web-animations-1/#the-effecttiming-dictionaries
+// https://drafts.csswg.org/web-animations-2/#the-effecttiming-dictionaries
 struct EffectTiming {
     double delay { 0 };
     double end_delay { 0 };
     Bindings::FillMode fill { Bindings::FillMode::Auto };
     double iteration_start { 0.0 };
     double iterations { 1.0 };
-    Variant<double, String> duration { "auto"_string };
+    FlattenVariant<CSS::CSSNumberish, Variant<String>> duration { "auto"_string };
     Bindings::PlaybackDirection direction { Bindings::PlaybackDirection::Normal };
     String easing { "linear"_string };
 
     OptionalEffectTiming to_optional_effect_timing() const;
 };
 
 // https://www.w3.org/TR/web-animations-1/#the-computedeffecttiming-dictionary
+// https://drafts.csswg.org/web-animations-2/#the-computedeffecttiming-dictionary
 struct ComputedEffectTiming : public EffectTiming {
-    double end_time;
-    double active_duration;
-    Optional<double> local_time;
+    CSS::CSSNumberish end_time;
+    CSS::CSSNumberish active_duration;
+    NullableCSSNumberish local_time;
     Optional<double> progress;
     Optional<double> current_iteration;
 };

Libraries/LibWeb/Animations/AnimationEffect.idl

@@ -1,22 +1,28 @@
+#import <CSS/CSSNumericValue.idl>
+
 // https://www.w3.org/TR/web-animations-1/#the-effecttiming-dictionaries
+// https://drafts.csswg.org/web-animations-2/#the-effecttiming-dictionaries
 dictionary EffectTiming {
     double delay = 0;
     double endDelay = 0;
     FillMode fill = "auto";
     double iterationStart = 0.0;
     unrestricted double iterations = 1.0;
-    (unrestricted double or DOMString) duration = "auto";
+    // FIXME: Support playbackRate
+    (unrestricted double or CSSNumericValue or DOMString) duration = "auto";
     PlaybackDirection direction = "normal";
     DOMString easing = "linear";
 };
 
 // https://www.w3.org/TR/web-animations-1/#dictdef-optionaleffecttiming
+// https://drafts.csswg.org/web-animations-2/#ref-for-dictdef-optionaleffecttiming
 dictionary OptionalEffectTiming {
     double delay;
     double endDelay;
     FillMode fill;
     double iterationStart;
     unrestricted double iterations;
+    // FIXME: Support playbackRate
     (unrestricted double or DOMString) duration;
     PlaybackDirection direction;
     DOMString easing;
@@ -30,9 +36,9 @@ enum PlaybackDirection { "normal", "reverse", "alternate", "alternate-reverse" }
 
 // https://www.w3.org/TR/web-animations-1/#the-computedeffecttiming-dictionary
 dictionary ComputedEffectTiming : EffectTiming {
-    [GenerateAsRequired] unrestricted double endTime;
-    [GenerateAsRequired] unrestricted double activeDuration;
-    double? localTime;
+    [GenerateAsRequired] CSSNumberish endTime;
+    [GenerateAsRequired] CSSNumberish activeDuration;
+    CSSNumberish? localTime;
     double? progress;
     unrestricted double? currentIteration;
 };

Libraries/LibWeb/Animations/KeyframeEffect.cpp

@@ -705,6 +705,14 @@ WebIDL::ExceptionOr<GC::Ref<KeyframeEffect>> KeyframeEffect::construct_impl(
         timing_input.duration = options.get<double>();
     }
 
+    // https://drafts.csswg.org/web-animations-2/#the-effecttiming-dictionaries
+    // Note: In this version of the spec, duration is not settable as a CSSNumericValue; however, duration may be
+    //       returned as a CSSNumericValue when resolving the duration in getComputedTiming(). Future versions of
+    //       the spec may enable setting the duration as a CSSNumeric value, where the unit is a valid time unit or
+    //       percent.
+    if (timing_input.duration.has<GC::Root<CSS::CSSNumericValue>>())
+        return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, "Setting duration as a CSSNumericValue is not supported"sv };
+
     // 5. Call the procedure to update the timing properties of an animation effect of effect from timing input.
     //    If that procedure causes an exception to be thrown, propagate the exception and abort this procedure.
     TRY(effect->update_timing(timing_input.to_optional_effect_timing()));