diff --git a/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-each/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-each/_config.js new file mode 100644 index 0000000000..7ccfd72f00 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-each/_config.js @@ -0,0 +1,23 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +// #15604 — a removed each item mid-outro must not be resurrected by an ancestor pause/resume +export default test({ + test({ assert, target, raf }) { + const [remove, fetch] = target.querySelectorAll('button'); + + raf.tick(200); + assert.equal(target.querySelectorAll('.item').length, 3); + + flushSync(() => remove.click()); + + flushSync(() => fetch.click()); + raf.tick(30); + + flushSync(() => fetch.click()); + raf.tick(2000); + + const items = [...target.querySelectorAll('.item')].map((el) => el.textContent); + assert.deepEqual(items, ['a', 'c']); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-each/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-each/main.svelte new file mode 100644 index 0000000000..36e685e3c8 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-each/main.svelte @@ -0,0 +1,19 @@ + + + + + +{#if fetching} +

loading

+{:else} +
+ {#each items as item (item)} +
{item}
+ {/each} +
+{/if} diff --git a/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-flipback/_config.js b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-flipback/_config.js new file mode 100644 index 0000000000..a8e5e99bbf --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-flipback/_config.js @@ -0,0 +1,24 @@ +import { flushSync } from 'svelte'; +import { test } from '../../test'; + +// #15604 companion — flipping the condition back while the ancestor is paused must still revive the element +export default test({ + test({ assert, target, raf }) { + const [toggle, fetch] = target.querySelectorAll('button'); + + raf.tick(200); + assert.ok(target.querySelector('.red')); + + flushSync(() => toggle.click()); + + flushSync(() => fetch.click()); + raf.tick(30); + + flushSync(() => toggle.click()); + + flushSync(() => fetch.click()); + raf.tick(2000); + + assert.ok(target.querySelector('.red')); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-flipback/main.svelte b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-flipback/main.svelte new file mode 100644 index 0000000000..71a3ea2090 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/transition-global-nested-resume-flipback/main.svelte @@ -0,0 +1,19 @@ + + + + + +{#if fetching} +

loading

+{:else} +
+ {#if shown} +
red
+ {/if} +
+{/if}