LibWeb: Make transition order return -1 and 1 instead of 0 and 1

Psychpsyo · gmta · commit e0b5bd789476 · 2025-11-11T21:57:47.000+01:00
The old behavior was plain incorrect for a sorting function.
diff --git a/Libraries/LibWeb/CSS/CSSTransition.cpp b/Libraries/LibWeb/CSS/CSSTransition.cpp
@@ -78,7 +78,7 @@ int CSSTransition::class_specific_composite_order(GC::Ref<Animations::Animation>
     //    property name of each transition (i.e. without attempting case conversion and such that ‘-moz-column-width’
     //    sorts before ‘column-width’).
     // FIXME: This should operate on Unicode strings, not StringViews.
-    return transition_property() > other->transition_property();
+    return transition_property().compare(other->transition_property());
 }
 
 CSSTransition::CSSTransition(JS::Realm& realm, DOM::AbstractElement abstract_element, PropertyID property_id, size_t transition_generation,
diff --git a/Tests/LibWeb/Text/expected/css/transition-ordering.txt b/Tests/LibWeb/Text/expected/css/transition-ordering.txt
@@ -1 +1 @@
-Order: left, right, top
+Order: bottom, height, left, right, top, width
diff --git a/Tests/LibWeb/Text/input/css/transition-ordering.html b/Tests/LibWeb/Text/input/css/transition-ordering.html
@@ -2,20 +2,23 @@
 <html>
     <style>
         #foo {
-            transition-property: top, left, right;
+            transition-property: top, right, left, width, height, bottom;
             transition-duration: 1s;
         }
     </style>
-    <div id="foo" style="top: 0; left: 0; right: 0"></div>
+    <div id="foo" style="top: 0; left: 0; right: 0; width: 0; height: 0; bottom: 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";
+            foo.style.left = "10px";
+            foo.style.width = "10px";
+            foo.style.height = "10px";
+            foo.style.bottom = "10px";
 
             println("Order: " + document.getAnimations().map(animation => animation.transitionProperty).join(", "));
         });

Original file line number	Diff line number	Diff line change
`@@ -78,7 +78,7 @@ int CSSTransition::class_specific_composite_order(GC::Ref<Animations::Animation>`
`78`	`78`	`// property name of each transition (i.e. without attempting case conversion and such that ‘-moz-column-width’`
`79`	`79`	`// sorts before ‘column-width’).`
`80`	`80`	`// FIXME: This should operate on Unicode strings, not StringViews.`
`81`		`- return transition_property() > other->transition_property();`
	`81`	`+ return transition_property().compare(other->transition_property());`
`82`	`82`	`}`
`83`	`83`
`84`	`84`	`CSSTransition::CSSTransition(JS::Realm& realm, DOM::AbstractElement abstract_element, PropertyID property_id, size_t transition_generation,`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-Order: left, right, top`
	`1`	`+Order: bottom, height, left, right, top, width`