Don't auto change to svg namespace when in foreign namespace (#6261)

Author: halfnelson

src/compiler/compile/nodes/Element.ts

@@ -107,8 +107,10 @@ function get_namespace(parent: Element, element: Element, explicit_namespace: st
 			: null);
 	}
 
-	if (svg.test(element.name.toLowerCase())) return namespaces.svg;
-	if (parent_element.name.toLowerCase() === 'foreignobject') return null;
+	if (parent_element.namespace !== namespaces.foreign) {
+		if (svg.test(element.name.toLowerCase())) return namespaces.svg;
+		if (parent_element.name.toLowerCase() === 'foreignobject') return null;
+	}
 
 	return parent_element.namespace;
 }

test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/_config.js

@@ -1,9 +1,11 @@
-// Test support for the `foreign` namespace preserving attribute case.
+// Test support for the `foreign` namespace preserving attribute case,
+// including ensuring that SVG elements don't interfere.
 
 export default {
 	html: `
 		<page horizontalAlignment="center">
-			<button textWrap="true" text="button">
+			<button textWrap="true" text="button"></button>
+			<text wordWrap="true"></text>
 		</page>
 	`,
 	options: {
@@ -16,5 +18,6 @@ export default {
 		const attr = sel => target.querySelector(sel).attributes[0].name;
 		assert.equal(attr('page'), 'horizontalAlignment');
 		assert.equal(attr('button'), 'textWrap');
+		assert.equal(attr('text'), 'wordWrap');
 	}
 };

test/runtime/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte

@@ -1,3 +1,4 @@
 <page horizontalAlignment="center">
-	<button textWrap="true" text="button">
-</page>
+	<button textWrap="true" text="button" />
+	<text wordWrap="true" />
+</page>