chore: add xhtml tests (#17597)

* add xhtml tests

* unused

* tweak

* more tests

* tweak

* we don't need to actually check the HTML - if it's malformed in SSR or mount, it will throw

* same here

* unused, so we can revert this

* and this

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>

eslint.config.js

@@ -102,6 +102,7 @@ export default [
 			'playgrounds/sandbox/**',
 			// exclude top level config files
 			'*.config.js',
+			'vitest-xhtml-environment.ts',
 			// documentation can contain invalid examples
 			'documentation',
 			'tmp/**'

packages/svelte/tests/html_equal.js

@@ -9,7 +9,9 @@ function clean_children(node, opts) {
 	let previous = null;
 	let has_element_children = false;
 	let template =
-		node.nodeName === 'TEMPLATE' ? /** @type {HTMLTemplateElement} */ (node) : undefined;
+		node.nodeName.toUpperCase() === 'TEMPLATE'
+			? /** @type {HTMLTemplateElement} */ (node)
+			: undefined;
 
 	if (template) {
 		const div = document.createElement('div');
@@ -23,22 +25,20 @@ function clean_children(node, opts) {
 	});
 
 	attributes.forEach((attr) => {
-		node.removeAttribute(attr.name);
+		if (attr.name !== 'xmlns') node.removeAttribute(attr.name);
 	});
 
-	attributes.forEach((attr) => {
+	attributes.forEach(({ name, value }) => {
 		// Strip out the special onload/onerror hydration events from the test output
-		if ((attr.name === 'onload' || attr.name === 'onerror') && attr.value === 'this.__e=event') {
+		if (['onload', 'onerror', 'xmlns'].includes(name) && value === 'this.__e=event') {
 			return;
 		}
 
-		let value = attr.value;
-
-		if (attr.name === 'class') {
+		if (name === 'class') {
 			value = value.replace(/svelte-\w+/, 'svelte-xyz123');
 		}
 
-		node.setAttribute(attr.name, value);
+		node.setAttribute(name, value);
 	});
 
 	for (let child of [...node.childNodes]) {

packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/runtime-xhtml/samples/attribute-quotes/main.svelte

@@ -0,0 +1,2 @@
+<div foo=bar></div>
+<div foo='bar baz'></div>

packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/runtime-xhtml/samples/autoclosed-tags/main.svelte

@@ -0,0 +1,6 @@
+<ul><li><li></ul>
+<dl><dt><dd><dd></dl>
+<p><p><div></div>
+<ruby><rp><rt><rt></ruby>
+<select><option><optgroup><optgroup></select>
+<table><thead><tbody><tfoot><tbody><tr><td><th></tr><tr></table>

packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/_config.js

@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	skip: true
+});

packages/svelte/tests/runtime-xhtml/samples/boolean-attributes/main.svelte

@@ -0,0 +1 @@
+<input disabled hidden>

packages/svelte/tests/runtime-xhtml/samples/comment-marker/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/runtime-xhtml/samples/comment-marker/main.svelte

@@ -0,0 +1 @@
+{#each [1,2] as i}{i}{/each}

packages/svelte/tests/runtime-xhtml/samples/is-xhtml/_config.js

@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	test({ assert, target }) {
+		assert.htmlEqual(target.innerHTML, `<div>div</div>`);
+	}
+});

packages/svelte/tests/runtime-xhtml/samples/is-xhtml/main.svelte

@@ -0,0 +1,5 @@
+<script>
+	let elem = $state();
+	let nodeName = $derived(elem?.nodeName);
+</script>
+<div bind:this={elem}>{nodeName}</div>

packages/svelte/tests/runtime-xhtml/samples/void-tags/_config.js

@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});

packages/svelte/tests/runtime-xhtml/samples/void-tags/main.svelte

@@ -0,0 +1,15 @@
+<area alt="">
+<base>
+<br>
+<col>
+<embed>
+<hr>
+<img alt="">
+<input>
+<keygen>
+<link>
+<meta>
+<param>
+<source>
+<track>
+<wbr>

packages/svelte/tests/runtime-xhtml/test.ts

@@ -0,0 +1,9 @@
+// @vitest-environment vitest-xhtml-environment.ts
+
+import { runtime_suite, ok } from '../runtime-legacy/shared';
+
+const { test, run } = runtime_suite(true);
+
+export { test, ok };
+
+await run(__dirname);

vitest-xhtml-environment.ts

@@ -0,0 +1,19 @@
+import { type Environment, builtinEnvironments } from 'vitest/environments';
+
+const xhtml_page = `<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body></body></html>`;
+
+export default <Environment>{
+	name: 'jsdom-xhtml',
+	transformMode: 'web',
+	setup(global, { jsdom = {} }) {
+		return builtinEnvironments.jsdom.setup(global, {
+			jsdom: {
+				...jsdom,
+				html: xhtml_page,
+				contentType: 'application/xhtml+xml'
+			}
+		});
+	}
+};