From 5c9f9d782fff767479e25ed094b878f3d4a3ee5e Mon Sep 17 00:00:00 2001
From: Leo Horie <lhorie@klick.com>
Date: Thu, 10 Apr 2014 21:36:09 -0400
Subject: [PATCH] add docs for SVG, and better tests

---
 archive/v0.1.4/change-log.html  |   2 +
 archive/v0.1.4/mithril-tests.js |   8 +++-
 archive/v0.1.4/mithril.html     |   6 +++
 archive/v0.1.4/mithril.min.zip  | Bin 21615 -> 21615 bytes
 docs/change-log.md              |   3 ++
 docs/mithril.md                 |  12 ++++++
 tests/mithril-tests.js          |   3 +-
 tests/mock.js                   |   5 ++-
 tests/svg.html                  |  70 +++++++++++++++++++++++++++++---
 9 files changed, 100 insertions(+), 9 deletions(-)

diff --git a/archive/v0.1.4/change-log.html b/archive/v0.1.4/change-log.html
index 63e86976..99a917b1 100644
--- a/archive/v0.1.4/change-log.html
+++ b/archive/v0.1.4/change-log.html
@@ -65,6 +65,7 @@
 <h3 id="news-">News:</h3>
 <ul>
 <li>added regression tests for reported bugs</li>
+<li>added support for SVG</li>
 </ul>
 <h3 id="bug-fixes-">Bug Fixes:</h3>
 <ul>
@@ -74,6 +75,7 @@
 <li>fixed caching bug in links w/ config option attached <a href="https://github.com/lhorie/mithril.js/issues/43">#43</a></li>
 <li>fixed attribute update bug when an element has both <code>oninput</code> and <code>onkeydown</code> handlers <a href="https://github.com/lhorie/mithril.js/issues/36">#36</a></li>
 </ul>
+<hr>
 <p><a href="/mithril/archive/v0.1.3">v0.1.3</a> - maintenance</p>
 <h3 id="news-">News:</h3>
 <ul>
diff --git a/archive/v0.1.4/mithril-tests.js b/archive/v0.1.4/mithril-tests.js
index 112e6412..a3b44d6e 100644
--- a/archive/v0.1.4/mithril-tests.js
+++ b/archive/v0.1.4/mithril-tests.js
@@ -487,6 +487,7 @@ mock.window = new function() {
 				this[name] = value.toString()
 			},
 			setAttributeNS: function(namespace, name, value) {
+				this.namespaceURI = namespace
 				this[name] = value.toString()
 			},
 			getAttribute: function(name, value) {
@@ -495,7 +496,9 @@ mock.window = new function() {
 		}
 	}
 	window.document.createElementNS = function(namespace, tag) {
-		return window.document.createElement(tag)
+		var element = window.document.createElement(tag)
+		element.namespaceURI = namespace
+		return element
 	}
 	window.document.createTextNode = function(text) {
 		return {nodeValue: text.toString()}
@@ -665,7 +668,8 @@ function testMithril(mock) {
 	test(function() {
 		var root = mock.document.createElement("div")
 		m.render(root, m("svg", [m("g")]))
-		return root.childNodes[0].childNodes[0].nodeName === "G"
+		var g = root.childNodes[0].childNodes[0]
+		return g.nodeName === "G" && g.namespaceURI == "http://www.w3.org/2000/svg"
 	})
 	test(function() {
 		var root = mock.document.createElement("div")
diff --git a/archive/v0.1.4/mithril.html b/archive/v0.1.4/mithril.html
index d4d6274d..6bdf43fa 100644
--- a/archive/v0.1.4/mithril.html
+++ b/archive/v0.1.4/mithril.html
@@ -177,6 +177,12 @@ m(&quot;a[href=&#39;/dashboard&#39;]&quot;, {config: m.route}, &quot;Dashboard&q
 <p>Also note that the <code>config</code> callback only runs after a rendering lifecycle is done. Therefore, you should not use <code>config</code> to modify controller and model values, if you expect these changes to render immediately. Changes to controller and model values in this fashion will only render on the next <code>m.render</code> or <code>m.module</code> call.</p>
 <p>You can use this mechanism to attach custom event listeners to controller methods (for example, when integrating with third party libraries), but you are responsible for making sure the integration with Mithril&#39;s autoredrawing system is in place. See the <a href="integration.html">integration guide</a> for more information.</p>
 <hr>
+<p>You can use Mithril to create SVG documents (as long as you don&#39;t need to support browsers that don&#39;t support SVG natively).</p>
+<p>Mithril automatically figures out the correct XML namespaces when it sees an SVG island in the virtual DOM tree.</p>
+<pre><code class="lang-javascript">m(&quot;svg[height=&#39;200px&#39;][width=&#39;200px&#39;]&quot;, [
+    m(&quot;image[href=&#39;foo.jpg&#39;][height=&#39;200px&#39;][width=&#39;200px&#39;]&quot;)
+])</code></pre>
+<hr>
 <h3 id="signature">Signature</h3>
 <p><a href="how-to-read-signatures.html">How to read signatures</a></p>
 <pre><code class="lang-clike">VirtualElement m(String selector [, Attributes attributes] [, Children children])
diff --git a/archive/v0.1.4/mithril.min.zip b/archive/v0.1.4/mithril.min.zip
index 7baeb5c1f7fd15c800fe8c198d6dd56671810c41..50a4d74e074b1558a4852bc1528a1542c1829d19 100644
GIT binary patch
delta 49
vcmaFAg7N(dM&1B#W)?065Xe~5wUJj{ff-0|Hdokc3}Q@vA8ZMxwL@G0h+GiH

delta 49
vcmaFAg7N(dM&1B#W)?065b&<*+{ml0zzn1}n=5QJ1~DeT54Hr;+956gaLf;e

diff --git a/docs/change-log.md b/docs/change-log.md
index d3a71734..a441484f 100644
--- a/docs/change-log.md
+++ b/docs/change-log.md
@@ -5,6 +5,7 @@
 ### News:
 
 -	added regression tests for reported bugs
+-	added support for SVG
 
 ### Bug Fixes:
 
@@ -14,6 +15,8 @@
 -	fixed caching bug in links w/ config option attached [#43](https://github.com/lhorie/mithril.js/issues/43)
 -	fixed attribute update bug when an element has both `oninput` and `onkeydown` handlers [#36](https://github.com/lhorie/mithril.js/issues/36)
 
+---
+
 [v0.1.3](/mithril/archive/v0.1.3) - maintenance
 
 ### News:
diff --git a/docs/mithril.md b/docs/mithril.md
index fe093005..8a35bb59 100644
--- a/docs/mithril.md
+++ b/docs/mithril.md
@@ -185,6 +185,18 @@ You can use this mechanism to attach custom event listeners to controller method
 
 ---
 
+You can use Mithril to create SVG documents (as long as you don't need to support browsers that don't support SVG natively).
+
+Mithril automatically figures out the correct XML namespaces when it sees an SVG island in the virtual DOM tree.
+
+```javascript
+m("svg[height='200px'][width='200px']", [
+	m("image[href='foo.jpg'][height='200px'][width='200px']")
+])
+```
+
+---
+
 ### Signature
 
 [How to read signatures](how-to-read-signatures.md)
diff --git a/tests/mithril-tests.js b/tests/mithril-tests.js
index 166febb9..27b042aa 100644
--- a/tests/mithril-tests.js
+++ b/tests/mithril-tests.js
@@ -110,7 +110,8 @@ function testMithril(mock) {
 	test(function() {
 		var root = mock.document.createElement("div")
 		m.render(root, m("svg", [m("g")]))
-		return root.childNodes[0].childNodes[0].nodeName === "G"
+		var g = root.childNodes[0].childNodes[0]
+		return g.nodeName === "G" && g.namespaceURI == "http://www.w3.org/2000/svg"
 	})
 	test(function() {
 		var root = mock.document.createElement("div")
diff --git a/tests/mock.js b/tests/mock.js
index 493cf337..7bfe1927 100644
--- a/tests/mock.js
+++ b/tests/mock.js
@@ -20,6 +20,7 @@ mock.window = new function() {
 				this[name] = value.toString()
 			},
 			setAttributeNS: function(namespace, name, value) {
+				this.namespaceURI = namespace
 				this[name] = value.toString()
 			},
 			getAttribute: function(name, value) {
@@ -28,7 +29,9 @@ mock.window = new function() {
 		}
 	}
 	window.document.createElementNS = function(namespace, tag) {
-		return window.document.createElement(tag)
+		var element = window.document.createElement(tag)
+		element.namespaceURI = namespace
+		return element
 	}
 	window.document.createTextNode = function(text) {
 		return {nodeValue: text.toString()}
diff --git a/tests/svg.html b/tests/svg.html
index 5ce726c9..13a106b7 100644
--- a/tests/svg.html
+++ b/tests/svg.html
@@ -1,21 +1,81 @@
 <!doctype html>
 <html>
-	<head></head>
+	<head>
+		<title>SVG test</title>
+		<style>
+		.path {
+			stroke-dasharray: 1000;
+			stroke-dashoffset: 1000;
+			animation: dash 5s linear alternate infinite;
+		}
+
+		@keyframes dash {
+			from {
+				stroke-dashoffset: 1000;
+			}
+			to {
+				stroke-dashoffset: 0;
+			}
+		}
+		</style>
+	</head>
 	<body>
 		<p>Since it's not possible to test SVG functionality from a NodeJS environment, this page can be used to test it in a browser.</p>
-		<p>There should be an HTML link labeled "HTML link", a SVG link labeled "SVG link", and a tilted blue square. The links should open in a new tab. All three items should display title tooltips.</p>
+		<p>This page should contain:</p>
+		<ul>
+			<li>an HTML link labeled "HTML link"</li>
+			<li>an SVG link labeled "SVG link"</li>
+			<li>a tilted blue square</li>
+			<li>a cat picture from <a href="http://placekitten.com">http://placekitten.com</a></li>
+			<li>an animated line drawing</li>
+			<li>a clock with the current time</li>
+		</ul>
+		<p>The links should open in a new tab. All items should display title tooltips when hovered over.</p>
+		
 		<div id="test"></div>
 		<script src="../mithril.js"></script>
 		<script>
 var svg = [
-	m("p", [
-		m("a[href='http://google.com'][target='_blank'][title='HTML link']", "HTML link")
-	]),
+	m("a[href='http://google.com'][target='_blank'][title='HTML link']", "HTML link"),
+	m("br"),
 	m("svg[width=180][height=200]", [
 		m("rect[x=50][y=50][height=100][width=100][transform='translate(30) rotate(45 50 50)'][title='Square']", {style: {stroke: "#000", fill: "#0086b2"}}),
 		m("a[href='http://google.com'][title='SVG link'][target=_new]", {style: {textDecoration: "underline"}}, [
 			m("text[x=0][y=20]", "SVG Link")
 		])
+	]),
+	m("svg[height='200px'][width='200px']", [
+		m("image[href='http://placekitten.com/200/200'][height='200px'][width='200px'][title='Cat picture']")
+	]),
+	m("svg[enable-background='new 0 0 340 333'][height='333px'][viewBox='0 0 340 333'][width='340px'][x='0px'][y='0px'][title='Line drawings']", [
+		m("path.path[d='M66.039,133.545c0,0-21-57,18-67s49-4,65,8s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41C46.039,146.545,53.039,128.545,66.039,133.545z'][fill='#FFFFFF'][stroke='#000000'][stroke-miterlimit='10'][stroke-width='4']")
+	]),
+	m("svg[height='270px'][width='270px'][viewBox='0 0 270 270']", [
+		m("g[transform='translate(150,150)'][title='Clock']", [
+			m("g", [
+				m("circle[r='108'][fill='none'][stroke-width='4'][stroke='gray']"),
+				m("circle[r='97'][fill='none'][stroke-width='11'][stroke='black'][stroke-dasharray='4,46.789082'][transform='rotate(-1.5)']"),
+				m("circle[r='100'][fill='none'][stroke-width='5'][stroke='black'][stroke-dasharray='2,8.471976'][transform='rotate(-.873)']"),
+			]),
+			m("g[transform='rotate(180)']", [
+				m("g[id='hour']", [
+					m("line[stroke-width='5'][y2='75'][stroke-linecap='round'][stroke='blue'][opacity='.5']"),
+					m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='12h'][by='360']"),
+					m("circle[r='7']")
+				]),
+				m("g[id='minute']", [
+					m("line[stroke-width='4'][y2='93'][stroke-linecap='round'][stroke='green'][opacity='.9']"),
+					m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='60min'][by='360']"),
+					m("circle[r='6'][fill='red']")
+				]),
+				m("g[id='second']", [
+					m("line[stroke-width='2'][y1='-20'][y2=102][stroke-linecap='round'][stroke='red']"),
+					m("animateTransform[attributeName='transform'][type='rotate'][repeatCount='indefinite'][dur='60s'][by='360']"),
+					m("circle[r='4'][fill='blue']")
+				])
+			])
+		]),
+		m("script", 'var a=new Date,b=parseInt(a.getHours());b=b>12?b-12:b;var c=parseInt(a.getMinutes()),d=parseInt(a.getSeconds()),e=6*d,f=6*(c+d/60),g=30*(b+c/60+d/3600),h=document.getElementById("hour"),i=document.getElementById("minute"),j=document.getElementById("second");h.setAttribute("transform","rotate("+g.toString()+")"),i.setAttribute("transform","rotate("+f.toString()+")"),j.setAttribute("transform","rotate("+e.toString()+")")')
 	])
 ]