8 months ago · b342758dbf
--- a/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -6506,13 +6506,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;
			
 
				         }
			
 
				 
			
--- 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
			
--- 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>