diff --git a/.changeset/bright-images-release.md b/.changeset/bright-images-release.md new file mode 100644 index 0000000000..d7563ec6ab --- /dev/null +++ b/.changeset/bright-images-release.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: prevent responsive image retention in Chromium diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js index a5d0405d0a..560e5cd830 100644 --- a/packages/svelte/src/internal/client/dom/template.js +++ b/packages/svelte/src/internal/client/dom/template.js @@ -52,8 +52,6 @@ export function assign_nodes(start, end) { /*#__NO_SIDE_EFFECTS__*/ export function from_html(content, flags) { var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0; - var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0; - /** @type {Node} */ var node; @@ -74,9 +72,9 @@ export function from_html(content, flags) { if (!is_fragment) node = /** @type {TemplateNode} */ (get_first_child(node)); } - var clone = /** @type {TemplateNode} */ ( - use_import_node || is_firefox ? document.importNode(node, true) : node.cloneNode(true) - ); + // Keep clones in the page document to avoid repeated cross-document adoption + // when templates are assembled with page-document fragments. + var clone = /** @type {TemplateNode} */ (document.importNode(node, true)); if (is_fragment) { var start = /** @type {TemplateNode} */ (get_first_child(clone)); diff --git a/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/Picture.js b/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/Picture.js new file mode 100644 index 0000000000..8d14ecf7c5 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/Picture.js @@ -0,0 +1,19 @@ +import { append, comment, from_html } from 'svelte/internal/client'; + +const parent_template = from_html('
'); +const picture_template = from_html( + ' ' +); + +export default function Picture(anchor) { + const parent = parent_template(); + const fragment = comment(); + const fragment_anchor = fragment.lastChild; + const picture = picture_template(); + const img = picture.querySelector('img'); + + img.dataset.pageDocument = String(img.ownerDocument === document); + append(fragment_anchor, picture); + parent.firstChild.before(fragment); + append(anchor, parent); +} diff --git a/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/_config.js b/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/_config.js new file mode 100644 index 0000000000..3f464945ec --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/_config.js @@ -0,0 +1,9 @@ +import { test } from '../../test'; + +export default test({ + mode: ['client'], + + test({ assert, target }) { + assert.equal(target.querySelector('img')?.dataset.pageDocument, 'true'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/main.svelte b/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/main.svelte new file mode 100644 index 0000000000..a979ef2ac1 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/responsive-image-anchor-fragment/main.svelte @@ -0,0 +1,11 @@ + + +{#if show} +
+ {#if true}{/if} +
+{/if}