From 8d90e0eb4f5b858f51c5753ea387b5f394c0c7e9 Mon Sep 17 00:00:00 2001 From: yosuke ota Date: Mon, 6 Dec 2021 11:45:27 +0900 Subject: [PATCH 1/3] fix: keep space in `
` or `preserveWhitespace: true`

---
 src/compiler/compile/nodes/Text.ts            | 17 ++++
 .../compile/render_dom/wrappers/Fragment.ts   |  4 +-
 .../compile/render_dom/wrappers/Text.ts       | 10 +-
 .../utils/remove_whitespace_children.ts       |  4 +-
 test/js/samples/pre-tag/expected.js           | 86 +++++++++++++++++
 test/js/samples/pre-tag/input.svelte          | 34 +++++++
 .../samples/preserve-whitespaces/_config.js   |  5 +
 .../samples/preserve-whitespaces/expected.js  | 92 +++++++++++++++++++
 .../samples/preserve-whitespaces/input.svelte | 34 +++++++
 test/server-side-rendering/index.ts           | 10 +-
 .../samples/pre-tag/_config.js                |  3 +
 .../samples/pre-tag/_expected.html            | 30 ++++++
 .../samples/pre-tag/main.svelte               | 34 +++++++
 .../samples/preserve-whitespaces/_config.js   |  6 ++
 .../preserve-whitespaces/_expected.html       | 34 +++++++
 .../samples/preserve-whitespaces/main.svelte  | 34 +++++++
 16 files changed, 421 insertions(+), 16 deletions(-)
 create mode 100644 test/js/samples/pre-tag/expected.js
 create mode 100644 test/js/samples/pre-tag/input.svelte
 create mode 100644 test/js/samples/preserve-whitespaces/_config.js
 create mode 100644 test/js/samples/preserve-whitespaces/expected.js
 create mode 100644 test/js/samples/preserve-whitespaces/input.svelte
 create mode 100644 test/server-side-rendering/samples/pre-tag/_config.js
 create mode 100644 test/server-side-rendering/samples/pre-tag/_expected.html
 create mode 100644 test/server-side-rendering/samples/pre-tag/main.svelte
 create mode 100644 test/server-side-rendering/samples/preserve-whitespaces/_config.js
 create mode 100644 test/server-side-rendering/samples/preserve-whitespaces/_expected.html
 create mode 100644 test/server-side-rendering/samples/preserve-whitespaces/main.svelte

diff --git a/src/compiler/compile/nodes/Text.ts b/src/compiler/compile/nodes/Text.ts
index 6ea6405ddaea..347beb9c2306 100644
--- a/src/compiler/compile/nodes/Text.ts
+++ b/src/compiler/compile/nodes/Text.ts
@@ -43,4 +43,21 @@ export default class Text extends Node {
 
 		return parent_element.namespace || elements_without_text.has(parent_element.name);
 	}
+
+	keep_space(): boolean {
+		if (this.component.component_options.preserveWhitespace) return true;
+		return this.within_pre();
+	}
+
+	within_pre(): boolean {
+		let node = this.parent;
+		while (node) {
+			if (node.type === 'Element' && node.name === 'pre') {
+				return true;
+			}
+			node = node.parent;
+		}
+
+		return false;
+	}
 }
diff --git a/src/compiler/compile/render_dom/wrappers/Fragment.ts b/src/compiler/compile/render_dom/wrappers/Fragment.ts
index 98805b9639b4..87ce775ca93a 100644
--- a/src/compiler/compile/render_dom/wrappers/Fragment.ts
+++ b/src/compiler/compile/render_dom/wrappers/Fragment.ts
@@ -95,7 +95,7 @@ export default class FragmentWrapper {
 						next_sibling ? (next_sibling.node.type === 'Text' && /^\s/.test(next_sibling.node.data) && trimmable_at(child, next_sibling)) : !child.has_ancestor('EachBlock')
 					);
 
-					if (should_trim) {
+					if (should_trim && !child.keep_space()) {
 						data = trim_end(data);
 						if (!data) continue;
 					}
@@ -127,7 +127,7 @@ export default class FragmentWrapper {
 		if (strip_whitespace) {
 			const first = this.nodes[0] as Text;
 
-			if (first && first.node.type === 'Text') {
+			if (first && first.node.type === 'Text' && !first.node.keep_space()) {
 				first.data = trim_start(first.data);
 				if (!first.data) {
 					first.var = null;
diff --git a/src/compiler/compile/render_dom/wrappers/Text.ts b/src/compiler/compile/render_dom/wrappers/Text.ts
index edff44d1fdcb..2a342b5678c7 100644
--- a/src/compiler/compile/render_dom/wrappers/Text.ts
+++ b/src/compiler/compile/render_dom/wrappers/Text.ts
@@ -29,15 +29,7 @@ export default class TextWrapper extends Wrapper {
 		if (this.renderer.component.component_options.preserveWhitespace) return false;
 		if (/[\S\u00A0]/.test(this.data)) return false;
 
-		let node = this.parent && this.parent.node;
-		while (node) {
-			if (node.type === 'Element' && node.name === 'pre') {
-				return false;
-			}
-			node = node.parent;
-		}
-
-		return true;
+		return !this.node.within_pre();
 	}
 
 	render(block: Block, parent_node: Identifier, parent_nodes: Identifier) {
diff --git a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
index b6c1bf493a76..7733c89cb824 100644
--- a/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
+++ b/src/compiler/compile/render_ssr/handlers/utils/remove_whitespace_children.ts
@@ -26,7 +26,7 @@ export default function remove_whitespace_children(children: INode[], next?: INo
 					  trimmable_at(child, next)
 					: !child.has_ancestor('EachBlock');
 
-				if (should_trim) {
+				if (should_trim && !child.keep_space()) {
 					data = trim_end(data);
 					if (!data) continue;
 				}
@@ -47,7 +47,7 @@ export default function remove_whitespace_children(children: INode[], next?: INo
 	}
 
 	const first = nodes[0];
-	if (first && first.type === 'Text') {
+	if (first && first.type === 'Text' && !first.keep_space()) {
 		first.data = trim_start(first.data);
 		if (!first.data) {
 			first.var = null;
diff --git a/test/js/samples/pre-tag/expected.js b/test/js/samples/pre-tag/expected.js
new file mode 100644
index 000000000000..c037693c304c
--- /dev/null
+++ b/test/js/samples/pre-tag/expected.js
@@ -0,0 +1,86 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	space
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let pre0;
+	let t3;
+	let div0;
+	let t7;
+	let div1;
+
+	return {
+		c() {
+			pre0 = element("pre");
+
+			pre0.innerHTML = `
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+`;
+
+			t3 = space();
+			div0 = element("div");
+
+			div0.innerHTML = `A
+  B
+  C
+    D
+  E
+  F`;
+
+			t7 = space();
+			div1 = element("div");
+
+			div1.innerHTML = `
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  
`;
+		},
+		m(target, anchor) {
+			insert(target, pre0, anchor);
+			insert(target, t3, anchor);
+			insert(target, div0, anchor);
+			insert(target, t7, anchor);
+			insert(target, div1, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(pre0);
+			if (detaching) detach(t3);
+			if (detaching) detach(div0);
+			if (detaching) detach(t7);
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/pre-tag/input.svelte b/test/js/samples/pre-tag/input.svelte
new file mode 100644
index 000000000000..fb240817f7a9
--- /dev/null
+++ b/test/js/samples/pre-tag/input.svelte
@@ -0,0 +1,34 @@
+
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+

diff --git a/test/js/samples/preserve-whitespaces/_config.js b/test/js/samples/preserve-whitespaces/_config.js
new file mode 100644
index 000000000000..65ae5c9c93f1
--- /dev/null
+++ b/test/js/samples/preserve-whitespaces/_config.js
@@ -0,0 +1,5 @@
+export default {
+	options: {
+		preserveWhitespace: true
+	}
+};
diff --git a/test/js/samples/preserve-whitespaces/expected.js b/test/js/samples/preserve-whitespaces/expected.js
new file mode 100644
index 000000000000..55e54995cc93
--- /dev/null
+++ b/test/js/samples/preserve-whitespaces/expected.js
@@ -0,0 +1,92 @@
+/* generated by Svelte vX.Y.Z */
+import {
+	SvelteComponent,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	text
+} from "svelte/internal";
+
+function create_fragment(ctx) {
+	let pre0;
+	let t3;
+	let div0;
+	let t7;
+	let div1;
+
+	return {
+		c() {
+			pre0 = element("pre");
+
+			pre0.innerHTML = `
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+`;
+
+			t3 = text("\n\n");
+			div0 = element("div");
+
+			div0.innerHTML = `
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+`;
+
+			t7 = text("\n\n");
+			div1 = element("div");
+
+			div1.innerHTML = `
+  
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+`;
+		},
+		m(target, anchor) {
+			insert(target, pre0, anchor);
+			insert(target, t3, anchor);
+			insert(target, div0, anchor);
+			insert(target, t7, anchor);
+			insert(target, div1, anchor);
+		},
+		p: noop,
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(pre0);
+			if (detaching) detach(t3);
+			if (detaching) detach(div0);
+			if (detaching) detach(t7);
+			if (detaching) detach(div1);
+		}
+	};
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, create_fragment, safe_not_equal, {});
+	}
+}
+
+export default Component;
diff --git a/test/js/samples/preserve-whitespaces/input.svelte b/test/js/samples/preserve-whitespaces/input.svelte
new file mode 100644
index 000000000000..fb240817f7a9
--- /dev/null
+++ b/test/js/samples/preserve-whitespaces/input.svelte
@@ -0,0 +1,34 @@
+
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+

diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index 98d19a6006ac..1027c495a0bf 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -83,9 +83,13 @@ describe('ssr', () => {
 				if (css.code) fs.writeFileSync(`${dir}/_actual.css`, css.code);
 
 				try {
-					(compileOptions.preserveComments
-						? assert.htmlEqualWithComments
-						: assert.htmlEqual)(html, expectedHtml);
+					if (config.withoutNormalizeHtml) {
+						assert.strictEqual(html.trim(), expectedHtml.trim());
+					} else {
+						(compileOptions.preserveComments
+							? assert.htmlEqualWithComments
+							: assert.htmlEqual)(html, expectedHtml);
+					}
 				} catch (error) {
 					if (shouldUpdateExpected()) {
 						fs.writeFileSync(`${dir}/_expected.html`, html);
diff --git a/test/server-side-rendering/samples/pre-tag/_config.js b/test/server-side-rendering/samples/pre-tag/_config.js
new file mode 100644
index 000000000000..39b31839f50d
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/_config.js
@@ -0,0 +1,3 @@
+export default {
+	withoutNormalizeHtml: true
+};
diff --git a/test/server-side-rendering/samples/pre-tag/_expected.html b/test/server-side-rendering/samples/pre-tag/_expected.html
new file mode 100644
index 000000000000..7f88acdff413
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/_expected.html
@@ -0,0 +1,30 @@
+
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+
A
+  B
+  C
+    D
+  
+  E
+  F
+

+
+
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

diff --git a/test/server-side-rendering/samples/pre-tag/main.svelte b/test/server-side-rendering/samples/pre-tag/main.svelte
new file mode 100644
index 000000000000..fb240817f7a9
--- /dev/null
+++ b/test/server-side-rendering/samples/pre-tag/main.svelte
@@ -0,0 +1,34 @@
+
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+

diff --git a/test/server-side-rendering/samples/preserve-whitespaces/_config.js b/test/server-side-rendering/samples/preserve-whitespaces/_config.js
new file mode 100644
index 000000000000..41eb78446c0d
--- /dev/null
+++ b/test/server-side-rendering/samples/preserve-whitespaces/_config.js
@@ -0,0 +1,6 @@
+export default {
+	withoutNormalizeHtml: true,
+	compileOptions: {
+		preserveWhitespace: true
+	}
+};
diff --git a/test/server-side-rendering/samples/preserve-whitespaces/_expected.html b/test/server-side-rendering/samples/preserve-whitespaces/_expected.html
new file mode 100644
index 000000000000..fb240817f7a9
--- /dev/null
+++ b/test/server-side-rendering/samples/preserve-whitespaces/_expected.html
@@ -0,0 +1,34 @@
+
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+

diff --git a/test/server-side-rendering/samples/preserve-whitespaces/main.svelte b/test/server-side-rendering/samples/preserve-whitespaces/main.svelte
new file mode 100644
index 000000000000..fb240817f7a9
--- /dev/null
+++ b/test/server-side-rendering/samples/preserve-whitespaces/main.svelte
@@ -0,0 +1,34 @@
+
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+

+
+

+  
+    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+


From 89fb2c23e1e3eb27103ff08f2697fc9fec3f17eb Mon Sep 17 00:00:00 2001
From: yosuke ota 
Date: Thu, 9 Dec 2021 08:00:52 +0900
Subject: [PATCH 2/3] normalize crlf

---
 test/server-side-rendering/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/server-side-rendering/index.ts b/test/server-side-rendering/index.ts
index 1027c495a0bf..f5773e37b604 100644
--- a/test/server-side-rendering/index.ts
+++ b/test/server-side-rendering/index.ts
@@ -84,7 +84,7 @@ describe('ssr', () => {
 
 				try {
 					if (config.withoutNormalizeHtml) {
-						assert.strictEqual(html.trim(), expectedHtml.trim());
+						assert.strictEqual(html.trim(), expectedHtml.trim().replace(/\r\n/g, '\n'));
 					} else {
 						(compileOptions.preserveComments
 							? assert.htmlEqualWithComments

From c0df000178e8c92bcfbb3b4e8891902fc7c53357 Mon Sep 17 00:00:00 2001
From: yosuke ota 
Date: Tue, 14 Dec 2021 17:18:23 +0900
Subject: [PATCH 3/3] Move tests to `test/runtime`

---
 test/js/samples/pre-tag/expected.js           | 86 -----------------
 .../samples/preserve-whitespaces/_config.js   |  5 -
 .../samples/preserve-whitespaces/expected.js  | 92 -------------------
 test/runtime/samples/pre-tag/_config.js       | 57 ++++++++++++
 .../samples/pre-tag/main.svelte}              |  6 +-
 .../samples/preserve-whitespaces/_config.js   | 66 +++++++++++++
 .../samples/preserve-whitespaces/main.svelte} |  6 +-
 7 files changed, 129 insertions(+), 189 deletions(-)
 delete mode 100644 test/js/samples/pre-tag/expected.js
 delete mode 100644 test/js/samples/preserve-whitespaces/_config.js
 delete mode 100644 test/js/samples/preserve-whitespaces/expected.js
 create mode 100644 test/runtime/samples/pre-tag/_config.js
 rename test/{js/samples/preserve-whitespaces/input.svelte => runtime/samples/pre-tag/main.svelte} (78%)
 create mode 100644 test/runtime/samples/preserve-whitespaces/_config.js
 rename test/{js/samples/pre-tag/input.svelte => runtime/samples/preserve-whitespaces/main.svelte} (78%)

diff --git a/test/js/samples/pre-tag/expected.js b/test/js/samples/pre-tag/expected.js
deleted file mode 100644
index c037693c304c..000000000000
--- a/test/js/samples/pre-tag/expected.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/* generated by Svelte vX.Y.Z */
-import {
-	SvelteComponent,
-	detach,
-	element,
-	init,
-	insert,
-	noop,
-	safe_not_equal,
-	space
-} from "svelte/internal";
-
-function create_fragment(ctx) {
-	let pre0;
-	let t3;
-	let div0;
-	let t7;
-	let div1;
-
-	return {
-		c() {
-			pre0 = element("pre");
-
-			pre0.innerHTML = `
-  A
-  B
-  
-    C
-    D
-  
-  E
-  F
-`;
-
-			t3 = space();
-			div0 = element("div");
-
-			div0.innerHTML = `A
-  B
-  C
-    D
-  E
-  F`;
-
-			t7 = space();
-			div1 = element("div");
-
-			div1.innerHTML = `
-    A
-    B
-    
-      C
-      D
-    
-    E
-    F
-  
`;
-		},
-		m(target, anchor) {
-			insert(target, pre0, anchor);
-			insert(target, t3, anchor);
-			insert(target, div0, anchor);
-			insert(target, t7, anchor);
-			insert(target, div1, anchor);
-		},
-		p: noop,
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(pre0);
-			if (detaching) detach(t3);
-			if (detaching) detach(div0);
-			if (detaching) detach(t7);
-			if (detaching) detach(div1);
-		}
-	};
-}
-
-class Component extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, null, create_fragment, safe_not_equal, {});
-	}
-}
-
-export default Component;
diff --git a/test/js/samples/preserve-whitespaces/_config.js b/test/js/samples/preserve-whitespaces/_config.js
deleted file mode 100644
index 65ae5c9c93f1..000000000000
--- a/test/js/samples/preserve-whitespaces/_config.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-	options: {
-		preserveWhitespace: true
-	}
-};
diff --git a/test/js/samples/preserve-whitespaces/expected.js b/test/js/samples/preserve-whitespaces/expected.js
deleted file mode 100644
index 55e54995cc93..000000000000
--- a/test/js/samples/preserve-whitespaces/expected.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/* generated by Svelte vX.Y.Z */
-import {
-	SvelteComponent,
-	detach,
-	element,
-	init,
-	insert,
-	noop,
-	safe_not_equal,
-	text
-} from "svelte/internal";
-
-function create_fragment(ctx) {
-	let pre0;
-	let t3;
-	let div0;
-	let t7;
-	let div1;
-
-	return {
-		c() {
-			pre0 = element("pre");
-
-			pre0.innerHTML = `
-  A
-  B
-  
-    C
-    D
-  
-  E
-  F
-`;
-
-			t3 = text("\n\n");
-			div0 = element("div");
-
-			div0.innerHTML = `
-  A
-  B
-  
-    C
-    D
-  
-  E
-  F
-`;
-
-			t7 = text("\n\n");
-			div1 = element("div");
-
-			div1.innerHTML = `
-  
-    A
-    B
-    
-      C
-      D
-    
-    E
-    F
-  

-`;
-		},
-		m(target, anchor) {
-			insert(target, pre0, anchor);
-			insert(target, t3, anchor);
-			insert(target, div0, anchor);
-			insert(target, t7, anchor);
-			insert(target, div1, anchor);
-		},
-		p: noop,
-		i: noop,
-		o: noop,
-		d(detaching) {
-			if (detaching) detach(pre0);
-			if (detaching) detach(t3);
-			if (detaching) detach(div0);
-			if (detaching) detach(t7);
-			if (detaching) detach(div1);
-		}
-	};
-}
-
-class Component extends SvelteComponent {
-	constructor(options) {
-		super();
-		init(this, options, null, create_fragment, safe_not_equal, {});
-	}
-}
-
-export default Component;
diff --git a/test/runtime/samples/pre-tag/_config.js b/test/runtime/samples/pre-tag/_config.js
new file mode 100644
index 000000000000..a2e8feb118cb
--- /dev/null
+++ b/test/runtime/samples/pre-tag/_config.js
@@ -0,0 +1,57 @@
+export default {
+	test({ assert, target }) {
+		// Test for 
 tag
+		const elementPre = target.querySelector('#pre');
+		// Test for non 
 tag
+		const elementDiv = target.querySelector('#div');
+		// Test for 
 tag in non 
 tag
+		const elementDivWithPre = target.querySelector('#div-with-pre');
+
+		// There is a slight difference in innerHTML because there is a difference in HTML optimization (in jsdom)
+		// depending on how the innerHTML is set.
+		// (There is no difference in the display.)
+		// Reassign innerHTML to add the same optimizations to innerHTML.
+
+		// eslint-disable-next-line no-self-assign
+		elementPre.innerHTML = elementPre.innerHTML;
+		// eslint-disable-next-line no-self-assign
+		elementDiv.innerHTML = elementDiv.innerHTML;
+		// eslint-disable-next-line no-self-assign
+		elementDivWithPre.innerHTML = elementDivWithPre.innerHTML;
+
+		assert.equal(
+			elementPre.innerHTML,
+			`
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+`
+		);
+		assert.equal(
+			elementDiv.innerHTML,
+			`A
+  B
+  C
+    D
+  E
+  F`
+		);
+		assert.equal(
+			elementDivWithPre.innerHTML,
+			`
    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  
`
+		);
+	}
+};
diff --git a/test/js/samples/preserve-whitespaces/input.svelte b/test/runtime/samples/pre-tag/main.svelte
similarity index 78%
rename from test/js/samples/preserve-whitespaces/input.svelte
rename to test/runtime/samples/pre-tag/main.svelte
index fb240817f7a9..ef603b988389 100644
--- a/test/js/samples/preserve-whitespaces/input.svelte
+++ b/test/runtime/samples/pre-tag/main.svelte
@@ -1,4 +1,4 @@
-
+
   A
   B
   
@@ -9,7 +9,7 @@
   F
 

 
-

+

   A
   B
   
@@ -20,7 +20,7 @@
   F
 

 
-

+

   
     A
     B
diff --git a/test/runtime/samples/preserve-whitespaces/_config.js b/test/runtime/samples/preserve-whitespaces/_config.js
new file mode 100644
index 000000000000..e0c621a18b38
--- /dev/null
+++ b/test/runtime/samples/preserve-whitespaces/_config.js
@@ -0,0 +1,66 @@
+export default {
+	compileOptions: {
+		preserveWhitespace: true
+	},
+	test({ assert, target }) {
+		// Test for 
 tag
+		const elementPre = target.querySelector('#pre');
+		// Test for non 
 tag
+		const elementDiv = target.querySelector('#div');
+		// Test for 
 tag in non 
 tag
+		const elementDivWithPre = target.querySelector('#div-with-pre');
+
+		// There is a slight difference in innerHTML because there is a difference in HTML optimization (in jsdom)
+		// depending on how the innerHTML is set.
+		// (There is no difference in the display.)
+		// Reassign innerHTML to add the same optimizations to innerHTML.
+
+		// eslint-disable-next-line no-self-assign
+		elementPre.innerHTML = elementPre.innerHTML;
+		// eslint-disable-next-line no-self-assign
+		elementDiv.innerHTML = elementDiv.innerHTML;
+		// eslint-disable-next-line no-self-assign
+		elementDivWithPre.innerHTML = elementDivWithPre.innerHTML;
+
+		assert.equal(
+			elementPre.innerHTML,
+			`
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+`
+		);
+		assert.equal(
+			elementDiv.innerHTML,
+			`
+  A
+  B
+  
+    C
+    D
+  
+  E
+  F
+`
+		);
+		assert.equal(
+			elementDivWithPre.innerHTML,
+			`
+  
    A
+    B
+    
+      C
+      D
+    
+    E
+    F
+  

+`
+		);
+	}
+};
diff --git a/test/js/samples/pre-tag/input.svelte b/test/runtime/samples/preserve-whitespaces/main.svelte
similarity index 78%
rename from test/js/samples/pre-tag/input.svelte
rename to test/runtime/samples/preserve-whitespaces/main.svelte
index fb240817f7a9..ef603b988389 100644
--- a/test/js/samples/pre-tag/input.svelte
+++ b/test/runtime/samples/preserve-whitespaces/main.svelte
@@ -1,4 +1,4 @@
-
+
   A
   B
   
@@ -9,7 +9,7 @@
   F
 

 
-

+

   A
   B
   
@@ -20,7 +20,7 @@
   F
 

 
-

+

   
     A
     B