From 6544d8034b73bc8baefc5e69ea665fed8ed1415f Mon Sep 17 00:00:00 2001
From: tanhauhau <lhtan93@gmail.com>
Date: Fri, 8 Apr 2022 22:33:23 +0800
Subject: [PATCH] add test case

---
 .../key-block-transition-local/_config.js     | 37 +++++++++++++++++++
 .../key-block-transition-local/main.svelte    | 19 ++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 test/runtime/samples/key-block-transition-local/_config.js
 create mode 100644 test/runtime/samples/key-block-transition-local/main.svelte

diff --git a/test/runtime/samples/key-block-transition-local/_config.js b/test/runtime/samples/key-block-transition-local/_config.js
new file mode 100644
index 0000000000..50400e72b6
--- /dev/null
+++ b/test/runtime/samples/key-block-transition-local/_config.js
@@ -0,0 +1,37 @@
+export default {
+	props: {
+		x: false,
+		y: 1
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		// play both in and out transition when changed with `{#key}`
+		component.y = 2;
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+		const [leaving, incoming] = target.querySelectorAll('div');
+
+		raf.tick(50);
+		assert.equal(leaving.foo, 0.5);
+		assert.equal(incoming.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		assert.equal(leaving.foo, 0);
+		assert.equal(incoming.foo, 1);
+
+		// do not play out transition when removed by `{#if}`
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+
+		// do not play in transition when added back with `{#if}`
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+	}
+};
diff --git a/test/runtime/samples/key-block-transition-local/main.svelte b/test/runtime/samples/key-block-transition-local/main.svelte
new file mode 100644
index 0000000000..05ed75b7e1
--- /dev/null
+++ b/test/runtime/samples/key-block-transition-local/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, _params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#key y}
+		<div transition:foo|local></div>
+	{/key}
+{/if}
\ No newline at end of file