LibWeb: Make transition order consider property name

class_specific_composite_order() also has no reason to return an
Optional<int>, since it can just return 0.

Libraries/LibWeb/Animations/Animation.h

@@ -108,7 +108,7 @@ public:
     void set_owning_element(GC::Ptr<DOM::Element> value) { m_owning_element = value; }
 
     virtual AnimationClass animation_class() const { return AnimationClass::None; }
-    virtual Optional<int> class_specific_composite_order(GC::Ref<Animation>) const { return {}; }
+    virtual int class_specific_composite_order(GC::Ref<Animation>) const { return 0; }
 
     unsigned int global_animation_list_order() const { return m_global_animation_list_order; }
 

Libraries/LibWeb/Animations/KeyframeEffect.cpp

@@ -647,8 +647,8 @@ int KeyframeEffect::composite_order(GC::Ref<KeyframeEffect> a, GC::Ref<KeyframeE
 
     //    2. If A and B are still not sorted, sort by any class-specific composite order defined by the common class of
     //       A and B’s associated animations.
-    if (auto order = a_animation->class_specific_composite_order(*b_animation); order.has_value())
-        return order.value();
+    if (auto order = a_animation->class_specific_composite_order(*b_animation); order != 0)
+        return order;
 
     //    3. If A and B are still not sorted, sort by the position of their associated animations in the global
     //       animation list.

Libraries/LibWeb/CSS/CSSAnimation.cpp

@@ -20,7 +20,7 @@ GC::Ref<CSSAnimation> CSSAnimation::create(JS::Realm& realm)
 }
 
 // https://www.w3.org/TR/css-animations-2/#animation-composite-order
-Optional<int> CSSAnimation::class_specific_composite_order(GC::Ref<Animations::Animation> other_animation) const
+int CSSAnimation::class_specific_composite_order(GC::Ref<Animations::Animation> other_animation) const
 {
     auto other = GC::Ref { as<CSSAnimation>(*other_animation) };
 
@@ -42,13 +42,13 @@ Optional<int> CSSAnimation::class_specific_composite_order(GC::Ref<Animations::A
         //    - element children
         if (owning_element().ptr() != other->owning_element().ptr()) {
             // FIXME: Sort by tree order
-            return {};
+            return 0;
         }
 
         // 2. Otherwise, sort A and B based on their position in the computed value of the animation-name property of the
         //    (common) owning element.
         // FIXME: Do this when animation-name supports multiple values
-        return {};
+        return 0;
     }
 
     // The composite order of CSS Animations without an owning element is based on their position in the global animation list.

Libraries/LibWeb/CSS/CSSAnimation.h

@@ -23,7 +23,7 @@ public:
     void set_animation_name(FlyString const& animation_name) { m_animation_name = animation_name; }
 
     virtual Animations::AnimationClass animation_class() const override;
-    virtual Optional<int> class_specific_composite_order(GC::Ref<Animations::Animation> other) const override;
+    virtual int class_specific_composite_order(GC::Ref<Animations::Animation> other) const override;
 
 private:
     explicit CSSAnimation(JS::Realm&);

Libraries/LibWeb/CSS/CSSTransition.cpp

@@ -38,7 +38,7 @@ Animations::AnimationClass CSSTransition::animation_class() const
     return Animations::AnimationClass::CSSTransition;
 }
 
-Optional<int> CSSTransition::class_specific_composite_order(GC::Ref<Animations::Animation> other_animation) const
+int CSSTransition::class_specific_composite_order(GC::Ref<Animations::Animation> other_animation) const
 {
     auto other = GC::Ref { as<CSSTransition>(*other_animation) };
 
@@ -66,7 +66,7 @@ Optional<int> CSSTransition::class_specific_composite_order(GC::Ref<Animations::
     //    - element children
     if (owning_element().ptr() != other->owning_element().ptr()) {
         // FIXME: Actually sort by tree order
-        return {};
+        return 0;
     }
 
     // 4. Otherwise, if A and B have different transition generation values, sort by their corresponding transition
@@ -74,11 +74,11 @@ Optional<int> CSSTransition::class_specific_composite_order(GC::Ref<Animations::
     if (m_transition_generation != other->m_transition_generation)
         return m_transition_generation - other->m_transition_generation;
 
-    // FIXME:
     // 5. Otherwise, sort A and B in ascending order by the Unicode codepoints that make up the expanded transition
     //    property name of each transition (i.e. without attempting case conversion and such that ‘-moz-column-width’
     //    sorts before ‘column-width’).
-    return {};
+    // FIXME: This should operate on Unicode strings, not StringViews.
+    return transition_property() > other->transition_property();
 }
 
 CSSTransition::CSSTransition(JS::Realm& realm, DOM::AbstractElement abstract_element, PropertyID property_id, size_t transition_generation,

Libraries/LibWeb/CSS/CSSTransition.h

@@ -27,7 +27,7 @@ public:
     StringView transition_property() const;
 
     virtual Animations::AnimationClass animation_class() const override;
-    virtual Optional<int> class_specific_composite_order(GC::Ref<Animations::Animation> other) const override;
+    virtual int class_specific_composite_order(GC::Ref<Animations::Animation> other) const override;
 
     double transition_start_time() const { return m_start_time; }
     double transition_end_time() const { return m_end_time; }

Tests/LibWeb/Text/expected/css/transition-ordering.txt

@@ -0,0 +1 @@
+Order: left, right, top

Tests/LibWeb/Text/input/css/transition-ordering.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+    <style>
+        #foo {
+            transition-property: top, left, right;
+            transition-duration: 1s;
+        }
+    </style>
+    <div id="foo" style="top: 0; left: 0; right: 0"></div>
+    <script src="../include.js"></script>
+    <script>
+        promiseTest(async () => {
+            await animationFrame();
+            await animationFrame();
+
+            foo.style.left = "10px";
+            foo.style.top = "10px";
+            foo.style.right = "10px";
+
+            println("Order: " + document.getAnimations().map(animation => animation.transitionProperty).join(", "));
+        });
+    </script>
+</html>