add test

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

@@ -0,0 +1,25 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import { log } from './log.js';
+
+export default test({
+	before_test() {
+		log.length = 0;
+	},
+
+	async test({ assert, target }) {
+		const [b1, b2] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			b1.click();
+		});
+
+		assert.deepEqual(log, ['transition 2']);
+
+		flushSync(() => {
+			b2.click();
+		});
+
+		assert.deepEqual(log, ['transition 2', 'transition 1', 'transition 1']);
+	}
+});

packages/svelte/tests/runtime-runes/samples/dynamic-transition/log.js

@@ -0,0 +1,2 @@
+/** @type {any[]} */
+export const log = [];

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

@@ -0,0 +1,33 @@
+<script>
+	import { log } from './log.js';
+
+	function transition1() {
+		log.push('transition 1')
+		return {
+			tick() {
+
+			}
+		}
+	}
+
+	function transition2() {
+		log.push('transition 2')
+		return {
+			tick() {
+
+			}
+		}
+	}
+
+	let toggle = $state(false);
+	let toggleTransition = $state(false);
+
+	const derived = $derived(toggleTransition ? transition1 : transition2)
+</script>
+
+
+<button on:click={() => toggle = !toggle}>{toggle}</button>
+<button on:click={() => toggleTransition = !toggleTransition}>{toggleTransition}</button>
+
+{#if toggle}<div transition:derived></div>{/if}
+