From d3a2ff243a947bbac5fc228a0fe890c0e0feecc7 Mon Sep 17 00:00:00 2001
From: Rich-Harris <richard.a.harris@gmail.com>
Date: Tue, 6 Dec 2016 22:09:11 -0500
Subject: [PATCH] handle xmlns attributes correctly

---
 .../attributes/addElementAttributes.js        | 12 +++++------
 test/compiler/svg-xmlns/_config.js            | 21 +++++++++++++++++++
 test/compiler/svg-xmlns/main.html             |  3 +++
 3 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 test/compiler/svg-xmlns/_config.js
 create mode 100644 test/compiler/svg-xmlns/main.html

diff --git a/compiler/generate/visitors/attributes/addElementAttributes.js b/compiler/generate/visitors/attributes/addElementAttributes.js
index 0189f988ea..6a5637e52f 100644
--- a/compiler/generate/visitors/attributes/addElementAttributes.js
+++ b/compiler/generate/visitors/attributes/addElementAttributes.js
@@ -52,7 +52,11 @@ export default function addElementAttributes ( generator, node, local ) {
 					// static attributes
 					result = JSON.stringify( value.data );
 
-					if ( propertyName ) {
+					if ( attribute.name === 'xmlns' ) {
+						// special case
+						// TODO this attribute must be static – enforce at compile time
+						local.namespace = value.data;
+					} else if ( propertyName ) {
 						local.init.push( deindent`
 							${local.name}.${propertyName} = ${result};
 						` );
@@ -61,12 +65,6 @@ export default function addElementAttributes ( generator, node, local ) {
 							${local.name}.setAttribute( '${attribute.name}', ${result} );
 						` );
 					}
-
-					// special case
-					// TODO this attribute must be static – enforce at compile time
-					if ( attribute.name === 'xmlns' ) {
-						local.namespace = value;
-					}
 				}
 
 				else {
diff --git a/test/compiler/svg-xmlns/_config.js b/test/compiler/svg-xmlns/_config.js
new file mode 100644
index 0000000000..37d94a1609
--- /dev/null
+++ b/test/compiler/svg-xmlns/_config.js
@@ -0,0 +1,21 @@
+export default {
+	data: {
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	},
+
+	html: `<svg><rect x="0" y="0" width="100" height="100"></rect></svg>`,
+
+	test ( assert, component, target ) {
+		const svg = target.querySelector( 'svg' );
+		const rect = target.querySelector( 'rect' );
+
+		assert.equal( svg.namespaceURI, 'http://www.w3.org/2000/svg' );
+		assert.equal( rect.namespaceURI, 'http://www.w3.org/2000/svg' );
+
+		component.set({ width: 150, height: 50 });
+		assert.equal( target.innerHTML, `<svg><rect x="0" y="0" width="150" height="50"></rect></svg>` );
+	}
+};
diff --git a/test/compiler/svg-xmlns/main.html b/test/compiler/svg-xmlns/main.html
new file mode 100644
index 0000000000..29e96293a5
--- /dev/null
+++ b/test/compiler/svg-xmlns/main.html
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+	<rect x='{{x}}' y='{{y}}' width='{{width}}' height='{{height}}'/>
+</svg>