make test more selfcontained, test outro delay aswell and add functionality for that in animation-helpers

Author: dummdidumm

packages/svelte/tests/animation-helpers.js

@@ -35,6 +35,7 @@ class Animation {
 	#target;
 	#keyframes;
 	#duration;
+	#delay;
 
 	#offset = raf.time;
 
@@ -47,12 +48,13 @@ class Animation {
 	/**
 	 * @param {HTMLElement} target
 	 * @param {Keyframe[]} keyframes
-	 * @param {{ duration: number }} options // TODO add delay
+	 * @param {{ duration: number, delay: number }} options
 	 */
-	constructor(target, keyframes, { duration }) {
+	constructor(target, keyframes, { duration, delay }) {
 		this.#target = target;
 		this.#keyframes = keyframes;
 		this.#duration = duration;
+		this.#delay = delay ?? 0;
 
 		// Promise-like semantics, but call callbacks immediately on raf.tick
 		this.finished = {
@@ -73,7 +75,9 @@ class Animation {
 	}
 
 	_update() {
-		this.currentTime = raf.time - this.#offset;
+		this.currentTime = raf.time - this.#offset - this.#delay;
+		if (this.currentTime < 0) return;
+
 		const target_frame = this.currentTime / this.#duration;
 		this.#apply_keyframe(target_frame);
 

packages/svelte/tests/runtime-runes/samples/transition-delayed/_config.js

@@ -30,20 +30,19 @@ export default test({
 			'<button>toggle</button><p style="opacity: 0.5;">delayed fade</p>'
 		);
 
-		raf.tick(201);
+		raf.tick(200);
 		assert.htmlEqual(target.innerHTML, '<button>toggle</button><p style="">delayed fade</p>');
 
-		// TODO this doesn't work because for some reason opacity of the element is always 0
 		// out
-		// btn?.click();
-		// flushSync();
-		// raf.tick(275);
-		// assert.htmlEqual(target.innerHTML, '<button>toggle</button><p style="">delayed fade</p>');
+		btn?.click();
+		flushSync();
+		raf.tick(275);
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button><p style="">delayed fade</p>');
 
-		// raf.tick(350);
-		// assert.htmlEqual(
-		// 	target.innerHTML,
-		// 	'<button>toggle</button><p style="opacity: 0.5;">delayed fade</p>'
-		// );
+		raf.tick(350);
+		assert.htmlEqual(
+			target.innerHTML,
+			'<button>toggle</button><p style="opacity: 0.5;">delayed fade</p>'
+		);
 	}
 });

packages/svelte/tests/runtime-runes/samples/transition-delayed/main.svelte

@@ -1,12 +1,17 @@
 <script>
-	import { fade } from 'svelte/transition';
+	function fade(_) {
+		return {
+			delay: 100,
+			duration: 100,
+			css: (t) => `opacity: ${t}`
+		};
+	}
 
 	let visible = $state(false);
 </script>
 
 <button onclick={() => (visible = !visible)}>toggle</button>
 
 {#if visible}
-	<!-- explicit opacity necessary for some reason, else it's calculated as 0 -->
-	<p transition:fade={{ delay: 100, duration: 100 }} style="opacity: 1">delayed fade</p>
+	<p transition:fade>delayed fade</p>
 {/if}