chore: better HTML normalization test helper

packages/svelte/tests/html_equal.js

@@ -3,6 +3,15 @@ import { assert } from 'vitest';
 /** @param {Element} node */
 function clean_children(node) {
 	let previous = null;
+	let has_element_children = false;
+	let template =
+		node.nodeName === 'TEMPLATE' ? /** @type {HTMLTemplateElement} */ (node) : undefined;
+
+	if (template) {
+		const div = document.createElement('div');
+		div.append(template.content);
+		node = div;
+	}
 
 	// sort attributes
 	const attributes = Array.from(node.attributes).sort((a, b) => {
@@ -14,6 +23,10 @@ function clean_children(node) {
 	});
 
 	attributes.forEach((attr) => {
+		if ((attr.name === 'onload' || attr.name === 'onerror') && attr.value === 'this.__e=event') {
+			return;
+		}
+
 		node.setAttribute(attr.name, attr.value);
 	});
 
@@ -27,23 +40,35 @@ function clean_children(node) {
 				node.tagName !== 'tspan'
 			) {
 				node.removeChild(child);
+				continue;
 			}
 
-			text.data = text.data.replace(/[ \t\n\r\f]+/g, '\n');
+			text.data = text.data.replace(/[^\S]+/g, ' ');
 
 			if (previous && previous.nodeType === 3) {
 				const prev = /** @type {Text} */ (previous);
 
 				prev.data += text.data;
-				prev.data = prev.data.replace(/[ \t\n\r\f]+/g, '\n');
-
 				node.removeChild(text);
+
 				text = prev;
+				text.data = text.data.replace(/[^\S]+/g, ' ');
+
+				continue;
 			}
 		} else if (child.nodeType === 8) {
 			// comment
-			// do nothing
+			child.remove();
-		} else {
+			continue;
+		} else if (child.nodeType === 1) {
+			if (previous?.nodeType === 3) {
+				const prev = /** @type {Text} */ (previous);
+				prev.data = prev.data.replace(/^[^\S]+$/, '\n');
+			} else if (previous?.nodeType === 1) {
+				node.insertBefore(document.createTextNode('\n'), child);
+			}
+
+			has_element_children = true;
 			clean_children(/** @type {Element} */ (child));
 		}
 
@@ -53,37 +78,35 @@ function clean_children(node) {
 	// collapse whitespace
 	if (node.firstChild && node.firstChild.nodeType === 3) {
 		const text = /** @type {Text} */ (node.firstChild);
-		text.data = text.data.replace(/^[ \t\n\r\f]+/, '');
+		text.data = text.data.trimStart();
-		if (!text.data.length) node.removeChild(text);
 	}
 
 	if (node.lastChild && node.lastChild.nodeType === 3) {
 		const text = /** @type {Text} */ (node.lastChild);
-		text.data = text.data.replace(/[ \t\n\r\f]+$/, '');
+		text.data = text.data.trimEnd();
-		if (!text.data.length) node.removeChild(text);
+	}
+
+	if (has_element_children && node.parentNode) {
+		node.innerHTML = `\n\t${node.innerHTML.replace(/\n/g, '\n\t')}\n`;
+	}
+
+	if (template) {
+		template.innerHTML = node.innerHTML;
 	}
 }
 
 /**
  * @param {Window} window
  * @param {string} html
- * @param {{ removeDataSvelte?: boolean, preserveComments?: boolean }} param2
+ * @param {{ preserveComments?: boolean }} opts
  */
-export function normalize_html(
+export function normalize_html(window, html, { preserveComments = false } = {}) {
-	window,
-	html,
-	{ removeDataSvelte = false, preserveComments = false }
-) {
 	try {
 		const node = window.document.createElement('div');
-		node.innerHTML = html
+		node.innerHTML = html.replace(/(<!(--)?.*?\2>)/g, preserveComments ? '$1' : '').trim();
-			.replace(/(<!(--)?.*?\2>)/g, preserveComments ? '$1' : '')
+
-			.replace(/(data-svelte-h="[^"]+")/g, removeDataSvelte ? '' : '$1')
-			.replace(/>[ \t\n\r\f]+</g, '><')
-			// Strip out the special onload/onerror hydration events from the test output
-			.replace(/\s?onerror="this.__e=event"|\s?onload="this.__e=event"/g, '')
-			.trim();
 		clean_children(node);
+
 		return node.innerHTML;
 	} catch (err) {
 		throw new Error(`Failed to normalize HTML:\n${html}\nCause: ${err}`);
@@ -98,10 +121,7 @@ export function normalize_new_line(html) {
 	return html.replace(/\r\n/g, '\n');
 }
 
-/**
+export function setup_html_equal() {
- * @param {{ removeDataSvelte?: boolean }} options
- */
-export function setup_html_equal(options = {}) {
 	/**
 	 * @param {string} actual
 	 * @param {string} expected
@@ -109,11 +129,7 @@ export function setup_html_equal(options = {}) {
 	 */
 	const assert_html_equal = (actual, expected, message) => {
 		try {
-			assert.deepEqual(
+			assert.deepEqual(normalize_html(window, actual), normalize_html(window, expected), message);
-				normalize_html(window, actual, options),
-				normalize_html(window, expected, options),
-				message
-			);
 		} catch (e) {
 			if (Error.captureStackTrace)
 				Error.captureStackTrace(/** @type {Error} */ (e), assert_html_equal);
@@ -137,15 +153,17 @@ export function setup_html_equal(options = {}) {
 		try {
 			assert.deepEqual(
 				withoutNormalizeHtml
-					? normalize_new_line(actual.trim())
+					? normalize_new_line(actual.trim()).replace(
-							.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+							/(<!(--)?.*?\2>)/g,
-							.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '')
+							preserveComments !== false ? '$1' : ''
-					: normalize_html(window, actual.trim(), { ...options, preserveComments }),
+						)
+					: normalize_html(window, actual.trim(), { preserveComments }),
 				withoutNormalizeHtml
-					? normalize_new_line(expected.trim())
+					? normalize_new_line(expected.trim()).replace(
-							.replace(/(\sdata-svelte-h="[^"]+")/g, options.removeDataSvelte ? '' : '$1')
+							/(<!(--)?.*?\2>)/g,
-							.replace(/(<!(--)?.*?\2>)/g, preserveComments !== false ? '$1' : '')
+							preserveComments !== false ? '$1' : ''
-					: normalize_html(window, expected.trim(), { ...options, preserveComments }),
+						)
+					: normalize_html(window, expected.trim(), { preserveComments }),
 				message
 			);
 		} catch (e) {

packages/svelte/tests/runtime-legacy/samples/binding-select/_config.js

@@ -25,7 +25,7 @@ export default test({
 			<p>selected: one</p>
 
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''}>one</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option>
 				<option>two</option>
 				<option>three</option>
 			</select>
@@ -54,7 +54,7 @@ export default test({
 			<p>selected: two</p>
 
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''}>one</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''}>one</option>
 				<option>two</option>
 				<option>three</option>
 			</select>

packages/svelte/tests/runtime-legacy/samples/input-list/_config.js

@@ -4,7 +4,9 @@ export default test({
 	html: `
 		<input list='suggestions'>
 		<datalist id='suggestions'>
-			<option value='foo'/><option value='bar'/><option value='baz'/>
+			<option value='foo'></option>
+			<option value='bar'></option>
+			<option value='baz'></option>
 		</datalist>
 	`
 });

packages/svelte/tests/runtime-legacy/samples/namespace-html/_config.js

@@ -9,7 +9,7 @@ export default test({
 
 		<math>
 			<mrow></mrow>
-		</svg>
+		</math>
 
 		<div class="hi">hi</div>
 	`,

packages/svelte/tests/runtime-legacy/samples/select-in-each/_config.js

@@ -7,7 +7,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
 				<option value="b">B</option>
 			</select>
 			selected: a
@@ -23,7 +23,7 @@ export default test({
 			target.innerHTML,
 			`
 			<select>
-				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option$>
+				<option${variant === 'hydrate' ? ' selected' : ''} value="a">A</option>
 				<option value="b">B</option>
 			</select>
 			selected: b

packages/svelte/tests/runtime-legacy/shared.ts

@@ -86,9 +86,7 @@ function unhandled_rejection_handler(err: Error) {
 
 const listeners = process.rawListeners('unhandledRejection');
 
-const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal({
+const { assert_html_equal, assert_html_equal_with_options } = setup_html_equal();
-	removeDataSvelte: true
-});
 
 beforeAll(() => {
 	// @ts-expect-error TODO huh?