add test

test/js/samples/each-block-changed-check/expected.js

@@ -52,7 +52,7 @@ function create_each_block(ctx) {
 			t4 = text(t4_value);
 			t5 = text(" ago:");
 			t6 = space();
-			html_tag = new HtmlTag();
+			html_tag = new HtmlTag(false);
 			attr(span, "class", "meta");
 			html_tag.a = null;
 			attr(div, "class", "comment");
@@ -170,4 +170,4 @@ class Component extends SvelteComponent {
 	}
 }
 
-export default Component;
+export default Component;

test/runtime/samples/svg-html-tag/_config.js

@@ -0,0 +1,35 @@
+export default {
+	html: `
+			<svg width="100" height="60">
+				<circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
+				<circle cx="75" cy="30" r="24" fill="#118AB2"></circle>
+			</svg>
+		`,
+	test({ assert, target, component }) {
+
+		let svg = target.querySelector('svg');
+		let circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+		component.width = 200;
+		component.height = 120;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<svg width="200" height="120">
+				<circle cx="50" cy="60" r="24" fill="#FFD166"></circle>
+				<circle cx="150" cy="60" r="24" fill="#118AB2"></circle>
+			</svg>
+		`
+		);
+		svg = target.querySelector('svg');
+		circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};

test/runtime/samples/svg-html-tag/main.svelte

@@ -0,0 +1,10 @@
+<script>
+	export let width = 100
+	export let height = 60
+	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+</script>
+
+<svg width="{width}" height="{height}">
+  {@html circle}
+  <circle cx="{width/4*3}" cy="{height/2}" r="24" fill="#118AB2"/>
+</svg>

test/runtime/samples/svg-html-tag2/_config.js

@@ -0,0 +1,39 @@
+export default {
+	html: `
+			<svg width="100" height="60">
+				<rect>
+					<circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
+					<circle cx="75" cy="30" r="24" fill="#118AB2"></circle>
+				</rect>
+			</svg>
+		`,
+	test({ assert, target, component }) {
+
+		let svg = target.querySelector('svg');
+		let circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+
+		component.width = 200;
+		component.height = 120;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<svg width="200" height="120">
+				<rect>
+					<circle cx="50" cy="60" r="24" fill="#FFD166"></circle>
+					<circle cx="150" cy="60" r="24" fill="#118AB2"></circle>
+				</rect>
+			</svg>
+		`
+		);
+		svg = target.querySelector('svg');
+		circles = target.querySelectorAll('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(2, circles.length);
+		assert.equal(circles[0].namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circles[1].namespaceURI, 'http://www.w3.org/2000/svg');
+	}
+};

test/runtime/samples/svg-html-tag2/main.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let width = 100
+	export let height = 60
+	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+</script>
+
+<svg width="{width}" height="{height}">
+	<rect>
+		{@html circle}
+		<circle cx="{width/4*3}" cy="{height/2}" r="24" fill="#118AB2"/>
+	</rect>
+</svg>

test/runtime/samples/svg-html-tag3/_config.js

@@ -0,0 +1,33 @@
+export default {
+	html: `
+			<svg>
+			  <foreignObject>
+				  <circle cx="25" cy="30" r="24" fill="#FFD166"></circle>
+				</foreignObject>
+			</svg>
+		`,
+	test({ assert, target, component }) {
+
+		let svg = target.querySelector('svg');
+		let circle = target.querySelector('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle.namespaceURI, 'http://www.w3.org/1999/xhtml');
+
+		component.width = 200;
+		component.height = 120;
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<svg>
+			  <foreignObject>
+				  <circle cx="50" cy="60" r="24" fill="#FFD166"></circle>
+				</foreignObject>
+			</svg>
+		`
+		);
+		svg = target.querySelector('svg');
+		circle = target.querySelector('circle');
+		assert.equal(svg.namespaceURI, 'http://www.w3.org/2000/svg');
+		assert.equal(circle.namespaceURI, 'http://www.w3.org/1999/xhtml');
+	}
+};

test/runtime/samples/svg-html-tag3/main.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let width = 100
+	export let height = 60
+	$: circle = `<circle cx="${width/4}" cy="${height/2}" r="24" fill="#FFD166"/>`
+</script>
+
+<svg>
+	<foreignObject>
+		{@html circle}
+	</foreignObject>
+</svg>