failing tests for #1480

test/runtime/samples/transition-js-local-and-global/_config.js

@@ -0,0 +1,66 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		// first, toggle x — first element should snap in
+		// and out while second one transitions
+		component.x = true;
+
+		let divs = target.querySelectorAll('div');
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0);
+
+		raf.tick(50);
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(100);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+
+		raf.tick(150);
+		assert.equal(divs[0].foo, undefined);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+
+		// then toggle y
+		component.set({ x: true, y: false });
+		component.y = true;
+
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+		divs = target.querySelectorAll('div');
+
+		raf.tick(250);
+		assert.equal(divs[0].foo, 0.5);
+		assert.equal(divs[1].foo, 0.5);
+
+		raf.tick(300);
+		assert.equal(divs[0].foo, 1);
+		assert.equal(divs[1].foo, 1);
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, `
+			<div>snaps if x changes</div>
+			<div>transitions if x changes</div>
+		`);
+
+		raf.tick(320);
+		assert.equal(divs[0].foo, 0.8);
+		assert.equal(divs[1].foo, 0.8);
+
+		raf.tick(400);
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-and-global/main.html

@@ -0,0 +1,20 @@
+<script>
+	export let x;
+	export let y;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#if y}
+		<div transition:foo|local>snaps if x changes</div>
+		<div transition:foo>transitions if x changes</div>
+	{/if}
+{/if}

test/runtime/samples/transition-js-local-nested-await/_config.js

@@ -0,0 +1,31 @@
+let fulfil;
+
+const promise = new Promise(f => {
+	fulfil = f;
+});
+
+export default {
+	props: {
+		x: false,
+		promise
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+		fulfil();
+
+		return promise.then(() => {
+			const div = target.querySelector('div');
+			assert.equal(div.foo, 0);
+
+			raf.tick(100);
+			assert.equal(div.foo, 1);
+
+			component.x = false;
+			assert.htmlEqual(target.innerHTML, '');
+
+			raf.tick(150);
+			assert.equal(div.foo, 1);
+		});
+	}
+};

test/runtime/samples/transition-js-local-nested-await/main.html

@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let promise;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#await promise then value}
+		<div transition:foo|local></div>
+	{/await}
+{/if}

test/runtime/samples/transition-js-local-nested-component/Widget.html

@@ -0,0 +1,12 @@
+<script>
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+<div transition:foo|local></div>

test/runtime/samples/transition-js-local-nested-component/_config.js

@@ -0,0 +1,24 @@
+export default {
+	props: {
+		x: false
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div = target.querySelector('div');
+		assert.equal(div.foo, 0);
+
+		raf.tick(100);
+		assert.equal(div.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	}
+};

test/runtime/samples/transition-js-local-nested-component/main.html

@@ -0,0 +1,9 @@
+<script>
+	export let x;
+
+	import Widget from './Widget.html';
+</script>
+
+{#if x}
+	<Widget/>
+{/if}

test/runtime/samples/transition-js-local-nested-each-keyed/_config.js

@@ -0,0 +1,30 @@
+export default {
+	props: {
+		x: false,
+		things: ['a']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div1 = target.querySelector('div');
+		assert.equal(div1.foo, undefined);
+
+		raf.tick(100);
+		assert.equal(div1.foo, undefined);
+
+		component.set({ things: ['a', 'b'] });
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+
+		const div2 = target.querySelector('div:last-child');
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-nested-each-keyed/main.html

@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#each things as thing (thing)}
+		<div transition:foo|local></div>
+	{/each}
+{/if}

test/runtime/samples/transition-js-local-nested-each/_config.js

@@ -0,0 +1,30 @@
+export default {
+	props: {
+		x: false,
+		things: ['a']
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		const div1 = target.querySelector('div');
+		assert.equal(div1.foo, undefined);
+
+		raf.tick(100);
+		assert.equal(div1.foo, undefined);
+
+		component.set({ things: ['a', 'b'] });
+		assert.htmlEqual(target.innerHTML, '<div></div><div></div>');
+
+		const div2 = target.querySelector('div:last-child');
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 0);
+
+		raf.tick(200);
+		assert.equal(div1.foo, undefined);
+		assert.equal(div2.foo, 1);
+
+		component.x = false;
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-nested-each/main.html

@@ -0,0 +1,19 @@
+<script>
+	export let x;
+	export let things;
+
+	function foo(node, params) {
+		return {
+			duration: 100,
+			tick: t => {
+				node.foo = t;
+			}
+		};
+	}
+</script>
+
+{#if x}
+	{#each things as thing}
+		<div transition:foo|local></div>
+	{/each}
+{/if}

test/runtime/samples/transition-js-local-nested-if/_config.js

@@ -0,0 +1,39 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.set({ x: false, y: true });
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(150);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local-nested-if/main.html

@@ -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}
+	{#if y}
+		<div transition:foo|local></div>
+	{/if}
+{/if}

test/runtime/samples/transition-js-local/_config.js

@@ -0,0 +1,40 @@
+export default {
+	props: {
+		x: false,
+		y: true
+	},
+
+	test({ assert, component, target, window, raf }) {
+		component.x = true;
+
+		let div = target.querySelector('div');
+		assert.equal(div.foo, undefined);
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		raf.tick(50);
+		assert.equal(div.foo, 0.5);
+
+		raf.tick(100);
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = false;
+		component.y = true;
+		assert.htmlEqual(target.innerHTML, '');
+
+		component.x = true;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+		div = target.querySelector('div');
+
+		component.y = false;
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+
+		raf.tick(120);
+		assert.equal(div.foo, 0.8);
+
+		raf.tick(200);
+		assert.htmlEqual(target.innerHTML, '');
+	},
+};

test/runtime/samples/transition-js-local/main.html

@@ -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}
+	{#if y}
+		<div transition:foo|local></div>
+	{/if}
+{/if}