12b8f044f1
Details: 1. All tests now live in `test`. All test dependencies that aren't from npm live in `test-deps`. 2. The QUnit tests are gone, as well as their dependencies. Half of them duplicated existing tests, and some of them depended on the real DOM to properly test. 3. All tests are now using Mocha to run the tests, Chai for assertions, and Sinon and Sinon Chai for testing some callbacks. 4. Tests are run through mocha-phantomjs. If you want to run just the tests, run `grunt mocha_phantomjs` or fire up a server in the root and open `http://localhost:<port>/test/index.html`, e.g. `python3 -m http.server`. 5. The linter I chose is ESLint. It is relatively easy to configure, but with a lot of flexibility. The rules I chose mostly were in tune to the style the project was already using. I'm not including a style guide in this commit, but one will likely come. You can check out the `.eslintrc` in the root and in `test/` for the two configs. The `.eslintignore` includes a TODO for `mithril.js` itself targeted at me, in the root. Other info: - As a drive-by fix, I fixed line endings on a few of the files. - I also took care of a few other files and linted them as I went: - `Gruntfile.js` - `test/input-cursor.html` (was in `tests/`) - `test/svg.html` (was in `tests/`) - `docs/layout/tools/template-converter.html` - `docs/layout/tools/template-converter.js` I didn't test the template converter after linting it, because it needs further scrutiny to ensure it works with the latest version of Mithril. I know the API has changed a little, which is why I want to be sure. - I simplified the `.travis.yml` file because none of the tests are run directly through Node anymore. They are always run in a browser of some kind. Hopefully, this turned out all right...
214 lines
4.6 KiB
HTML
214 lines
4.6 KiB
HTML
<!doctype html>
|
|
<title>SVG test</title>
|
|
<style>
|
|
.path {
|
|
stroke-dasharray: 1000;
|
|
stroke-dashoffset: 1000;
|
|
animation: dash 5s linear alternate infinite;
|
|
-webkit-animation: dash 5s linear alternate infinite;
|
|
}
|
|
|
|
@keyframes dash {
|
|
from {
|
|
stroke-dashoffset: 1000;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes dash {
|
|
from {
|
|
stroke-dashoffset: 1000;
|
|
}
|
|
to {
|
|
stroke-dashoffset: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<p>
|
|
This page is for testing SVG support in Mithril. 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</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>
|
|
m.render(document.getElementById("test"), [
|
|
m("a[href='http://google.com'][target=_blank][title='HTML link']",
|
|
"HTML link"),
|
|
m("br"),
|
|
m("svg[width=180][height=200]", [
|
|
m("rect[title=Square]", {
|
|
x: 50,
|
|
y: 50,
|
|
height: 100,
|
|
width: 100,
|
|
transform: "translate(30) rotate(45 50 50)",
|
|
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=201px][width=201px]", [
|
|
m("image[href='http://placekitten.com/201/201']", {
|
|
height: "200px",
|
|
width: "200px",
|
|
title: "Cat picture"
|
|
})
|
|
]),
|
|
m("svg[title='Line drawings']", {
|
|
"enable-background": "new 0 0 340 333",
|
|
height: "333px",
|
|
viewBox: "0 0 340 333",
|
|
width: "340px",
|
|
x: "0px",
|
|
y: "0px"
|
|
}, [
|
|
m("path.path", {
|
|
d: [
|
|
"M 66.039,133.545",
|
|
"c 0,0 -21 -57,18 -67",
|
|
"s 49 -4,65,8",
|
|
"s 30,41,53,27",
|
|
"s 66,4,58,32",
|
|
"s -5,44,18,57",
|
|
"s 22,46,0,45",
|
|
"s -54 -40 -68 -16",
|
|
"s -40,88 -83,48",
|
|
"s 11 -61 -11 -80",
|
|
"s -79 -7 -70 -41",
|
|
"C 46.039,146.545,53.039,128.545,66.039,133.545",
|
|
"z"
|
|
].join(" "),
|
|
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#hour", [
|
|
m("line", {
|
|
"stroke-width": 5,
|
|
y2: 75,
|
|
"stroke-linecap": "round",
|
|
stroke: "blue",
|
|
opacity: 0.5
|
|
}),
|
|
m("animateTransform[attributeName=transform]", {
|
|
type: "rotate",
|
|
repeatCount: "indefinite",
|
|
dur: "12h",
|
|
by: 360
|
|
}),
|
|
m("circle[r=7]")
|
|
]),
|
|
m("g#minute", [
|
|
m("line", {
|
|
"stroke-width": 4,
|
|
y2: 93,
|
|
"stroke-linecap": "round",
|
|
stroke: "green",
|
|
opacity: 0.9
|
|
}),
|
|
m("animateTransform[attributeName=transform]", {
|
|
type: "rotate",
|
|
repeatCount: "indefinite",
|
|
dur: "60min",
|
|
by: 360
|
|
}),
|
|
m("circle[r=6][fill=red]")
|
|
]),
|
|
m("g#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", "(" + function () {
|
|
"use strict"
|
|
|
|
function rotate(id, num) {
|
|
document.getElementById(id)
|
|
.setAttribute("transform", "rotate(" + num + ")")
|
|
}
|
|
|
|
var date = new Date()
|
|
var hours = date.getHours()
|
|
if (hours > 12) hours -= 12
|
|
var minutes = date.getMinutes()
|
|
var seconds = date.getSeconds()
|
|
rotate("hour", 30 * (hours + minutes / 60 + seconds / 3600))
|
|
rotate("minute", 6 * (minutes + seconds / 60))
|
|
rotate("second", 6 * seconds)
|
|
}.toString() + ")()")
|
|
]),
|
|
m("svg[height=200px][width=200px]", [
|
|
m("foreignObject", {
|
|
x: 0,
|
|
y: 0,
|
|
width: "100px",
|
|
height: "100px",
|
|
transform: "translate(0,0)"
|
|
}, m("div", {xmlns: "http://www.w3.org/1999/xhtml"}, [
|
|
m.trust("this is a piece of html rendered as " +
|
|
"<a href=\"http://www.w3.org/TR/SVG11/extend.html\">" +
|
|
"SVG foreignObject</a>")
|
|
]))
|
|
])
|
|
])
|
|
</script>
|