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

add docs for SVG, and better tests

Browse source
This commit is contained in:
Leo Horie 2014-04-10 21:36:09 -04:00
parent 1aef5dd942
commit 5c9f9d782f
9 changed files with 100 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
tests/mithril-tests.js
View file

@ -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")

5
tests/mock.js
View file

@ -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()}

70
tests/svg.html
View file

@ -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()+")")')
])
]