test

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)
+					);
 				}
 			}
 

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');
+	}
+});

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>

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}