diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js index 05dc24a94e..16908adad2 100644 --- a/packages/svelte/src/internal/client/dom/elements/transitions.js +++ b/packages/svelte/src/internal/client/dom/elements/transitions.js @@ -215,6 +215,8 @@ export function transition(flags, element, get_fn, get_params) { } } + var inert = element.inert; + /** @type {import('#client').Transition} */ // TODO this needs to be `in()` and `out()` rather than `to()`, and both // need to be idempotent (because of `{#if ...}{#if ...}`). `out()` should @@ -224,6 +226,7 @@ export function transition(flags, element, get_fn, get_params) { global, in() { callbacks = []; + element.inert = inert; if (intro) { if (current_direction !== TRANSITION_IN) { @@ -244,6 +247,7 @@ export function transition(flags, element, get_fn, get_params) { if (current_direction !== TRANSITION_OUT) { current_direction = TRANSITION_OUT; + element.inert = true; start(0); } } else { diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js index 8679b2fe7f..a474fae9d4 100644 --- a/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js +++ b/packages/svelte/tests/runtime-legacy/samples/transition-inert/_config.js @@ -6,29 +6,26 @@ export default test({ const b = target.querySelector('button.b'); ok(a); ok(b); - // jsdom doesn't set the inert attribute, and the transition checks if it exists, so set it manually to trigger the inert logic - a.inert = false; - b.inert = false; // check and abort halfway through the outro transition component.visible = false; raf.tick(50); - assert.strictEqual(target.querySelector('button.a')?.inert, true); - assert.strictEqual(target.querySelector('button.b')?.inert, true); + assert.ok(target.querySelector('button.a')?.inert); + assert.ok(target.querySelector('button.b')?.inert); component.visible = true; - assert.strictEqual(target.querySelector('button.a')?.inert, false); - assert.strictEqual(target.querySelector('button.b')?.inert, false); + assert.ok(!target.querySelector('button.a')?.inert); + assert.ok(!target.querySelector('button.b')?.inert); // let it transition out completely and then back in component.visible = false; raf.tick(101); component.visible = true; raf.tick(150); - assert.strictEqual(target.querySelector('button.a')?.inert, false); - assert.strictEqual(target.querySelector('button.b')?.inert, false); + assert.ok(!target.querySelector('button.a')?.inert); + assert.ok(!target.querySelector('button.b')?.inert); raf.tick(151); - assert.strictEqual(target.querySelector('button.a')?.inert, false); - assert.strictEqual(target.querySelector('button.b')?.inert, false); + assert.ok(!target.querySelector('button.a')?.inert); + assert.ok(!target.querySelector('button.b')?.inert); } });