vndb/mithril-vndb
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add experimental svg support

Browse source 
- supports nested svg elements
- supports svg attributes
- supports xlink
This commit is contained in:
Leo Horie 2014-03-26 23:05:14 -04:00
parent 7e2136ba51
commit 48025dd16a
8 changed files with 87 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

14
tests/mithril-tests.js
View file

@ -21,6 +21,8 @@ function testMithril(mock) {
test(function() {return m("div", m("div")).attrs.tag === "div"}) //yes, this is expected behavior: see method signature
test(function() {return m("div", [undefined]).tag === "div"})
test(function() {return m("div", [{foo: "bar"}])}) //as long as it doesn't throw errors, it's fine
test(function() {return m("svg", [m("g")])})
test(function() {return m("svg", [m("a[href='http://google.com']")])})
//m.module
test(function() {
@ -105,6 +107,18 @@ function testMithril(mock) {
m.render(root, m("div", [undefined]))
return root.childNodes[0].childNodes.length === 0
})
test(function() {
var root = mock.document.createElement("div")
m.render(root, m("svg", [m("g")]))
console.log(root.childNodes[0].childNodes[0])
return root.childNodes[0].childNodes[0].nodeName === "G"
})
test(function() {
var root = mock.document.createElement("div")
m.render(root, m("svg", [m("a[href='http://google.com']")]))
console.log(root.childNodes[0].childNodes[0])
return root.childNodes[0].childNodes[0].nodeName === "A"
})
//m.redraw
test(function() {

6
tests/mock.js
View file

@ -13,11 +13,17 @@ mock.window = new function() {
setAttribute: function(name, value) {
this[name] = value.toString()
},
setAttributeNS: function(namespace, name, value) {
this[name] = value.toString()
},
getAttribute: function(name, value) {
return this[name]
},
}
}
window.document.createElementNS = function(namespace, tag) {
return window.document.createElement(tag)
}
window.document.createTextNode = function(text) {
return {nodeValue: text.toString()}
}

25
tests/svg.html Normal file
View file

@ -0,0 +1,25 @@
<!doctype html>
<html>
<head></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>
<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("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.render(document.getElementById("test"), svg)
</script>
</body>
</html>