LibWeb: Separate use time easing functions from EasingStyleValue

In the future there will be different methods of creating these use-time
easing functions (e.g. from `KeywordStyleValue`s)

Libraries/LibWeb/Animations/Animatable.cpp

@@ -12,7 +12,6 @@
 #include <LibWeb/Animations/DocumentTimeline.h>
 #include <LibWeb/Animations/PseudoElementParsing.h>
 #include <LibWeb/CSS/CSSTransition.h>
-#include <LibWeb/CSS/StyleValues/EasingStyleValue.h>
 #include <LibWeb/CSS/StyleValues/KeywordStyleValue.h>
 #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
 #include <LibWeb/DOM/Document.h>
@@ -171,9 +170,8 @@ void Animatable::add_transitioned_properties(Optional<CSS::PseudoElement> pseudo
                 duration = resolved_time.value().to_milliseconds();
             }
         }
-        auto timing_function = timing_functions[i]->is_easing() ? timing_functions[i]->as_easing().function() : CSS::EasingStyleValue::CubicBezier::ease();
+        auto timing_function = CSS::EasingFunction::from_style_value(timing_functions[i]);
         auto transition_behavior = CSS::keyword_to_transition_behavior(transition_behaviors[i]->to_keyword()).value_or(CSS::TransitionBehavior::Normal);
-        VERIFY(timing_functions[i]->is_easing());
         transition.transition_attributes.empend(delay, duration, timing_function, transition_behavior);
 
         for (auto const& property : properties[i])

Libraries/LibWeb/Animations/Animatable.h

@@ -39,7 +39,7 @@ public:
     struct TransitionAttributes {
         double delay;
         double duration;
-        CSS::EasingStyleValue::Function timing_function;
+        CSS::EasingFunction timing_function;
         CSS::TransitionBehavior transition_behavior;
     };
 

Libraries/LibWeb/Animations/AnimationEffect.cpp

@@ -80,7 +80,7 @@ EffectTiming AnimationEffect::get_timing() const
         .iterations = m_iteration_count,
         .duration = m_iteration_duration,
         .direction = m_playback_direction,
-        .easing = m_timing_function.to_string(CSS::SerializationMode::Normal),
+        .easing = m_timing_function.to_string(),
     };
 }
 
@@ -115,7 +115,7 @@ ComputedEffectTiming AnimationEffect::get_computed_timing() const
             .iterations = m_iteration_count,
             .duration = duration,
             .direction = m_playback_direction,
-            .easing = m_timing_function.to_string(CSS::SerializationMode::Normal),
+            .easing = m_timing_function.to_string(),
         },
 
         end_time(),
@@ -158,12 +158,11 @@ WebIDL::ExceptionOr<void> AnimationEffect::update_timing(OptionalEffectTiming ti
 
     // 4. If the easing member of input exists but cannot be parsed using the <easing-function> production
     //    [CSS-EASING-1], throw a TypeError and abort this procedure.
-    RefPtr<CSS::StyleValue const> easing_value;
+    Optional<CSS::EasingFunction> easing_value;
     if (timing.easing.has_value()) {
         easing_value = parse_easing_string(timing.easing.value());
-        if (!easing_value)
+        if (!easing_value.has_value())
             return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, "Invalid easing function"sv };
-        VERIFY(easing_value->is_easing());
     }
 
     // 5. Assign each member that exists in input to the corresponding timing property of effect as follows:
@@ -197,8 +196,8 @@ WebIDL::ExceptionOr<void> AnimationEffect::update_timing(OptionalEffectTiming ti
         m_playback_direction = timing.direction.value();
 
     //    - easing → timing function
-    if (easing_value)
-        m_timing_function = easing_value->as_easing().function();
+    if (easing_value.has_value())
+        m_timing_function = easing_value.value();
 
     if (auto animation = m_associated_animation)
         animation->effect_timing_changed({});
@@ -604,11 +603,11 @@ Optional<double> AnimationEffect::transformed_progress() const
     return m_timing_function.evaluate_at(directed_progress.value(), before_flag);
 }
 
-RefPtr<CSS::StyleValue const> AnimationEffect::parse_easing_string(StringView value)
+Optional<CSS::EasingFunction> AnimationEffect::parse_easing_string(StringView value)
 {
     if (auto style_value = parse_css_value(CSS::Parser::ParsingParams(), value, CSS::PropertyID::AnimationTimingFunction)) {
         if (style_value->is_easing())
-            return style_value;
+            return CSS::EasingFunction::from_style_value(*style_value);
     }
 
     return {};

Libraries/LibWeb/Animations/AnimationEffect.h

@@ -11,6 +11,7 @@
 #include <AK/Variant.h>
 #include <LibWeb/Bindings/AnimationEffectPrototype.h>
 #include <LibWeb/Bindings/PlatformObject.h>
+#include <LibWeb/CSS/EasingFunction.h>
 #include <LibWeb/CSS/Enums.h>
 #include <LibWeb/CSS/StyleValues/EasingStyleValue.h>
 
@@ -79,7 +80,7 @@ class AnimationEffect : public Bindings::PlatformObject {
     GC_DECLARE_ALLOCATOR(AnimationEffect);
 
 public:
-    static RefPtr<CSS::StyleValue const> parse_easing_string(StringView value);
+    static Optional<CSS::EasingFunction> parse_easing_string(StringView value);
 
     EffectTiming get_timing() const;
     ComputedEffectTiming get_computed_timing() const;
@@ -106,8 +107,8 @@ public:
     Bindings::PlaybackDirection playback_direction() const { return m_playback_direction; }
     void set_playback_direction(Bindings::PlaybackDirection playback_direction) { m_playback_direction = playback_direction; }
 
-    CSS::EasingStyleValue::Function const& timing_function() { return m_timing_function; }
-    void set_timing_function(CSS::EasingStyleValue::Function value) { m_timing_function = move(value); }
+    CSS::EasingFunction const& timing_function() { return m_timing_function; }
+    void set_timing_function(CSS::EasingFunction value) { m_timing_function = move(value); }
 
     GC::Ptr<Animation> associated_animation() const { return m_associated_animation; }
     void set_associated_animation(GC::Ptr<Animation> value);
@@ -193,7 +194,7 @@ protected:
     GC::Ptr<Animation> m_associated_animation {};
 
     // https://www.w3.org/TR/web-animations-1/#time-transformations
-    CSS::EasingStyleValue::Function m_timing_function { CSS::EasingStyleValue::Linear::identity() };
+    CSS::EasingFunction m_timing_function { CSS::EasingFunction::from_style_value(CSS::EasingStyleValue::create(CSS::EasingStyleValue::Linear::identity())) };
 
     // Used for calculating transitions in StyleComputer
     Phase m_previous_phase { Phase::Idle };

Libraries/LibWeb/Animations/KeyframeEffect.cpp

@@ -560,10 +560,10 @@ static WebIDL::ExceptionOr<Vector<BaseKeyframe>> process_a_keyframes_argument(JS
         auto easing_string = keyframe.easing.get<String>();
         auto easing_value = AnimationEffect::parse_easing_string(easing_string);
 
-        if (!easing_value)
+        if (!easing_value.has_value())
             return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, MUST(String::formatted("Invalid animation easing value: \"{}\"", easing_string)) };
 
-        keyframe.easing.set(NonnullRefPtr<CSS::StyleValue const> { *easing_value });
+        keyframe.easing.set(easing_value.value());
     }
 
     // 9. Parse each of the values in unused easings using the CSS syntax defined for easing member of the EffectTiming
@@ -571,7 +571,7 @@ static WebIDL::ExceptionOr<Vector<BaseKeyframe>> process_a_keyframes_argument(JS
     for (auto& unused_easing : unused_easings) {
         auto easing_string = unused_easing.get<String>();
         auto easing_value = AnimationEffect::parse_easing_string(easing_string);
-        if (!easing_value)
+        if (!easing_value.has_value())
             return WebIDL::SimpleException { WebIDL::SimpleExceptionType::TypeError, MUST(String::formatted("Invalid animation easing value: \"{}\"", easing_string)) };
     }
 
@@ -827,8 +827,8 @@ WebIDL::ExceptionOr<GC::RootVector<JS::Object*>> KeyframeEffect::get_keyframes()
             auto object = JS::Object::create(realm, realm.intrinsics().object_prototype());
             TRY(object->set(vm.names.offset, keyframe.offset.has_value() ? JS::Value(keyframe.offset.value()) : JS::js_null(), ShouldThrowExceptions::Yes));
             TRY(object->set(vm.names.computedOffset, JS::Value(keyframe.computed_offset.value()), ShouldThrowExceptions::Yes));
-            auto easing_value = keyframe.easing.get<NonnullRefPtr<CSS::StyleValue const>>();
-            TRY(object->set(vm.names.easing, JS::PrimitiveString::create(vm, easing_value->to_string(CSS::SerializationMode::Normal)), ShouldThrowExceptions::Yes));
+            auto easing_value = keyframe.easing.get<CSS::EasingFunction>();
+            TRY(object->set(vm.names.easing, JS::PrimitiveString::create(vm, easing_value.to_string()), ShouldThrowExceptions::Yes));
 
             if (keyframe.composite == Bindings::CompositeOperationOrAuto::Replace) {
                 TRY(object->set(vm.names.composite, JS::PrimitiveString::create(vm, "replace"sv), ShouldThrowExceptions::Yes));

Libraries/LibWeb/Animations/KeyframeEffect.h

@@ -17,7 +17,7 @@
 
 namespace Web::Animations {
 
-using EasingValue = Variant<String, NonnullRefPtr<CSS::StyleValue const>>;
+using EasingValue = Variant<String, CSS::EasingFunction>;
 
 // https://www.w3.org/TR/web-animations-1/#the-keyframeeffectoptions-dictionary
 struct KeyframeEffectOptions : public EffectTiming {