LibWeb: Fix extra validation for EasingStyleValue intervals

(cherry picked from commit b342758dbf8d1138353db89708964e75b9128400)
nico · Nov 25, 2024 · fcb45f4 · fcb45f4
1 parent dad7557
commit fcb45f4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/Tests/LibWeb/Text/expected/WebAnimations/misc/parse-animation-timing-function-steps.txt b/Tests/LibWeb/Text/expected/WebAnimations/misc/parse-animation-timing-function-steps.txt
@@ -0,0 +1 @@
+Computed animation-timing-function: ease
diff --git a/Tests/LibWeb/Text/input/WebAnimations/misc/parse-animation-timing-function-steps.html b/Tests/LibWeb/Text/input/WebAnimations/misc/parse-animation-timing-function-steps.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<style>
+	@keyframes test-animation {
+		from {
+			transform: translateX(0);
+		}
+		to {
+			transform: translateX(100px);
+		}
+	}
+
+	.animate {
+		animation: test-animation 2s steps(1, jump-none) infinite;
+	}
+</style>
+<div class="box animate" style="width: 50px; height: 50px; background-color: red;"></div>
+<script src="../../include.js"></script>
+<script>
+    test(() => {
+    // Apply animation dynamically to trigger re-computation.
+	document.querySelector('.box').classList.add('animate');
+
+	// Log computed style to confirm the animation is parsed and applied correctly.
+	const animation = getComputedStyle(document.querySelector('.box')).animationTimingFunction;
+	println('Computed animation-timing-function: ' + animation);
+    });
+</script>
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -6824,13 +6824,13 @@ RefPtr<CSSStyleValue> Parser::parse_easing_value(TokenStream<ComponentValue>& to
         }
 
         // Perform extra validation
-        // https://drafts.csswg.org/css-easing/#funcdef-step-easing-function-steps
-        // The first parameter specifies the number of intervals in the function. It must be a positive integer greater than 0
-        // unless the second parameter is jump-none in which case it must be a positive integer greater than 1.
+        // https://drafts.csswg.org/css-easing/#step-easing-functions
+        // If the <step-position> is jump-none, the <integer> must be at least 2, or the function is invalid.
+        // Otherwise, the <integer> must be at least 1, or the function is invalid.
         if (steps.position == EasingStyleValue::Steps::Position::JumpNone) {
-            if (intervals < 1)
+            if (intervals <= 1)
                 return nullptr;
-        } else if (intervals < 0) {
+        } else if (intervals <= 0) {
             return nullptr;
         }