From 6bf6c748ee5c14b20a1193e36643f20064638845 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Fri, 6 Dec 2024 21:52:59 +0100
Subject: [PATCH] test

---
 .../svelte/tests/runtime-legacy/shared.ts     |  7 ++-
 .../samples/svelte-html-nested/_config.js     | 45 +++++++++++++++++++
 .../samples/svelte-html-nested/child.svelte   |  7 +++
 .../samples/svelte-html-nested/main.svelte    | 15 +++++++
 4 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-html-nested/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-html-nested/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-html-nested/main.svelte

diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index 8f04385713..2b105f0021 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -278,8 +278,11 @@ async function run_test_variant(
 			});
 
 			if (htmlAttributes) {
-				for (const [key, value] of htmlAttributes.split(' ').map((attr) => attr.split('='))) {
-					window.document.documentElement.setAttribute(key, value.slice(1, -1));
+				for (const [key, value] of htmlAttributes.split('" ').map((attr) => attr.split('='))) {
+					window.document.documentElement.setAttribute(
+						key,
+						value.slice(1, value.endsWith('"') ? -1 : undefined)
+					);
 				}
 			}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/_config.js
new file mode 100644
index 0000000000..0c60240475
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/_config.js
@@ -0,0 +1,45 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+	async test({ assert, warnings }) {
+		assert.include(warnings[0], "Duplicate attribute 'foo' across multiple `<svelte:html>` blocks");
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'bar');
+		assert.deepEqual(document.documentElement.getAttribute('class'), 'foo bar foo baz');
+
+		const [btn1, btn2] = document.querySelectorAll('button');
+
+		btn1.click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'foo');
+		assert.deepEqual(document.documentElement.getAttribute('class'), 'foo bar');
+
+		btn1.click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'bar');
+		assert.deepEqual(document.documentElement.getAttribute('class'), 'foo bar foo baz');
+
+		btn2.click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'top0');
+
+		btn1.click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'top0');
+
+		btn1.click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'bar');
+
+		document.querySelectorAll('button')[2].click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'nested0');
+
+		btn1.click();
+		flushSync();
+		assert.deepEqual(document.documentElement.getAttribute('foo'), 'top0');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/child.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/child.svelte
new file mode 100644
index 0000000000..f3942db7ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/child.svelte
@@ -0,0 +1,7 @@
+<script>
+	let foo = $state('bar');
+	let i = 0;
+</script>
+
+<button onclick={() => foo = 'nested'+i++}>change nested</button>
+<svelte:html {foo} class="foo baz"></svelte:html>
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/main.svelte
new file mode 100644
index 0000000000..b5830a7140
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-html-nested/main.svelte
@@ -0,0 +1,15 @@
+<script>
+	import Child from './child.svelte';
+	let foo = $state('foo');
+	let show = $state(true);
+	let i = 0;
+</script>
+
+<button onclick={() => show = !show}>toggle</button>
+<button onclick={() => foo = 'top'+i++}>change top</button>
+
+<svelte:html {foo} class="foo bar"></svelte:html>
+
+{#if show}
+	<Child />
+{/if}