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, '
'); + 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, ''); + 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 = 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 @@ + + +{#if x} + {#key y} + + {/key} +{/if} \ No newline at end of file