zcy
/
snap.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
snap.js/test/test.html

354 lines
15 KiB
HTML
Raw Normal View History

Initial commit
2013-07-05 07:23:52 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Savage Tests</title>
Added gradients. Changed plugin architecture.
2013-07-11 03:23:37 +00:00
<style media="screen">
svg {
position: absolute;
top: -999em;
left: -999em;
}
</style>
<link rel="stylesheet" href="mocha/mocha.css">
<script src="../eve/eve.js"></script>
<script src="../mina.js"></script>
<script src="../elemental.js"></script>
<script src="../svg.js"></script>
<script src="../savage.set.js"></script>
Initial commit
2013-07-05 07:23:52 +00:00
</head>
<body>
<div id="mocha"></div>
Added gradients. Changed plugin architecture.
2013-07-11 03:23:37 +00:00
<script src="expect/expect.js"></script>
<script src="mocha/mocha.js"></script>
<script>mocha.setup("bdd");</script>
Initial commit
2013-07-05 07:23:52 +00:00
<script>
describe("System check", function () {
it("Savage exists", function () {
expect(Savage).to.be.a("function");
});
it("eve exists", function () {
expect(eve).to.be.a("function");
});
it("mina exists", function () {
expect(mina).to.be.a("function");
});
it("elemental exists", function () {
expect(elemental).to.be.a("function");
});
});
describe("Check for Paper Creation", function () {
it("creates simple paper 20 × 10", function () {
var s = Savage(20, 10);
var S = document.querySelector("svg");
expect(S).to.not.be(null);
expect(S.getAttribute("width")).to.be("20");
expect(S.getAttribute("height")).to.be("10");
s.remove();
});
it("removal of paper", function () {
var s = Savage(20, 10);
var S = document.querySelector("svg");
expect(S).to.not.be(null);
s.remove();
S = document.querySelector("svg");
expect(S).to.be(null);
});
it("creates simple paper 20% × 10em", function () {
var s = Savage("20%", "10em");
var S = document.querySelector("svg");
expect(S).to.not.be(null);
expect(S.getAttribute("width")).to.be("20%");
expect(S.getAttribute("height")).to.be("10em");
s.remove();
});
});
describe("Primitives creation", function () {
var s;
beforeEach(function () {
s = Savage(100, 100);
});
afterEach(function () {
s.remove();
});
it("creates a circle", function () {
var c = s.circle(10, 20, 30);
var C = document.querySelector("circle");
expect(C).to.not.be(null);
expect(C.getAttribute("cx")).to.be("10");
expect(C.getAttribute("cy")).to.be("20");
expect(C.getAttribute("r")).to.be("30");
});
it("creates a rect", function () {
var c = s.rect(10, 20, 30, 40, 5);
var C = document.querySelector("rect");
expect(C).to.not.be(null);
expect(C.getAttribute("x")).to.be("10");
expect(C.getAttribute("y")).to.be("20");
expect(C.getAttribute("width")).to.be("30");
expect(C.getAttribute("height")).to.be("40");
expect(C.getAttribute("rx")).to.be("5");
expect(C.getAttribute("ry")).to.be("5");
});
it("creates a rect with different rx & ry", function () {
var c = s.rect(10, 20, 30, 40, 5, 6);
var C = document.querySelector("rect");
expect(C).to.not.be(null);
expect(C.getAttribute("x")).to.be("10");
expect(C.getAttribute("y")).to.be("20");
expect(C.getAttribute("width")).to.be("30");
expect(C.getAttribute("height")).to.be("40");
expect(C.getAttribute("rx")).to.be("5");
expect(C.getAttribute("ry")).to.be("6");
});
it("creates a ellipse", function () {
var c = s.ellipse(10, 20, 30, 40);
var C = document.querySelector("ellipse");
expect(C).to.not.be(null);
expect(C.getAttribute("cx")).to.be("10");
expect(C.getAttribute("cy")).to.be("20");
expect(C.getAttribute("rx")).to.be("30");
expect(C.getAttribute("ry")).to.be("40");
});
it("creates a ellipse", function () {
var c = s.ellipse(10, 20, 30, 40);
var C = document.querySelector("ellipse");
expect(C).to.not.be(null);
expect(C.getAttribute("cx")).to.be("10");
expect(C.getAttribute("cy")).to.be("20");
expect(C.getAttribute("rx")).to.be("30");
expect(C.getAttribute("ry")).to.be("40");
});
it("creates a path", function () {
var c = s.path("M10,10,50,60");
var C = document.querySelector("path");
expect(C).to.not.be(null);
expect(C.getAttribute("d")).to.be("M10,10,50,60");
expect(C.getBBox().width).to.be(40);
});
it("creates a line", function () {
var c = s.line(10, 10, 50, 60);
var C = document.querySelector("line");
expect(C).to.not.be(null);
expect(C.getAttribute("x1")).to.be("10");
expect(C.getBBox().width).to.be(40);
});
it("creates a polyline", function () {
var c = s.polyline(10, 10, 50, 60, 70, 80);
var C = document.querySelector("polyline");
expect(C).to.not.be(null);
expect(C.getAttribute("points")).to.be("10,10,50,60,70,80");
});
it("creates a polygon", function () {
var c = s.polygon(10, 10, 50, 60, 70, 80);
var C = document.querySelector("polygon");
expect(C).to.not.be(null);
expect(C.getAttribute("points")).to.be("10,10,50,60,70,80");
});
it("creates a group", function () {
var c = s.group();
var C = document.querySelector("g");
expect(C).to.not.be(null);
});
it("creates and fills a group", function () {
var c = s.group(),
a = s.circle(10, 10, 10),
b = s.circle(20, 20, 10),
C = document.querySelector("g");
c.add(a, b);
expect(C).to.not.be(null);
expect(C.children.length).to.be(2);
});
it("creates a text", function () {
var c = s.text(10, 10, "test");
var C = document.querySelector("text");
expect(C).to.not.be(null);
expect(C.getAttribute("x")).to.be("10");
expect(C.textContent).to.be("test");
});
});
Added gradients. Changed plugin architecture.
2013-07-11 03:23:37 +00:00
describe("Colours", function () {
it("parses hex colour", function () {
expect(Savage.color("#fC0").hex).to.be("#ffcc00");
});
it("parses RGB", function () {
var c = Savage.color("rgb(255, 204, 0)");
expect(c.hex).to.be("#ffcc00");
expect(c.r).to.be(255);
expect(c.g).to.be(204);
expect(c.b).to.be(0);
});
it("parses HSL", function () {
var c = Savage.color("hsl(0.1333, 1, .5)");
expect(c.hex).to.be("#ffcc00");
expect(c.h.toFixed(3)).to.be("0.133");
expect(c.s).to.be(1);
expect(c.l).to.be(.5);
});
it("parses HSB", function () {
var c = Savage.color("hsb(0.1333, 1, 1)");
expect(c.hex).to.be("#ffcc00");
expect(c.h.toFixed(3)).to.be("0.133");
expect(c.s).to.be(1);
expect(c.v).to.be(1);
});
it("parses RGBA", function () {
var c = Savage.color("rgba(255, 204, 0, .75)");
expect(c.hex).to.be("#ffcc00");
expect(c.r).to.be(255);
expect(c.g).to.be(204);
expect(c.b).to.be(0);
expect(c.opacity).to.be(.75);
});
it("parses HSLA", function () {
var c = Savage.color("hsla(0.1333, 1, .5, .5)");
expect(c.hex).to.be("#ffcc00");
expect(c.r).to.be(255);
expect(c.g).to.be(204);
expect(c.b).to.be(0);
expect(c.opacity).to.be(.5);
});
it("parses HSBA", function () {
var c = Savage.color("hsba(0.1333, 1, 1, .5)");
expect(c.hex).to.be("#ffcc00");
expect(c.r).to.be(255);
expect(c.g).to.be(204);
expect(c.b).to.be(0);
expect(c.opacity).to.be(.5);
});
it("parses names", function () {
var c = Savage.color("DodgerBlue");
expect(c.hex).to.be("#1e90ff");
c = Savage.color("FireBrick");
expect(c.hex).to.be("#b22222");
c = Savage.color("MintCream");
expect(c.hex).to.be("#f5fffa");
});
});
describe("Attributes", function () {
var s, r;
beforeEach(function () {
s = Savage(100, 100);
r = s.rect(10, 10, 50, 50);
});
afterEach(function () {
s.remove();
});
function colorTestProp(key) {
var o = {};
return function () {
o[key] = "#fc0";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("#ffcc00");
o[key] = "rgb(255, 204, 0)";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("#ffcc00");
o[key] = "hsl(0.1333, 1, .5)";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("#ffcc00");
o[key] = "hsb(0.1333, 1, 1)";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("#ffcc00");
o[key] = "rgba(255, 204, 0, .5)";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
o[key] = "hsla(0.1333, 1, .5, .5)";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
o[key] = "hsba(0.1333, 1, 1, .5)";
r.attr(o);
expect(r.node.getAttribute(key)).to.be("rgba(255,204,0,0.5)");
};
}
function colorTestStyle(key) {
var o = {};
return function () {
function val() {
return Savage.color(r.node.style[key]).hex;
}
o[key] = "#fc0";
r.attr(o);
expect(val()).to.be("#ffcc00");
o[key] = "rgb(255, 204, 0)";
r.attr(o);
expect(val()).to.be("#ffcc00");
o[key] = "hsl(0.1333, 1, .5)";
r.attr(o);
expect(val()).to.be("#ffcc00");
o[key] = "hsb(0.1333, 1, 1)";
r.attr(o);
expect(val()).to.be("#ffcc00");
o[key] = "rgba(255, 204, 0, .5)";
r.attr(o);
expect(val()).to.be("#ffcc00");
o[key] = "hsla(0.1333, 1, .5, .5)";
r.attr(o);
expect(val()).to.be("#ffcc00");
o[key] = "hsba(0.1333, 1, 1, .5)";
r.attr(o);
expect(val()).to.be("#ffcc00");
};
}
it("sets fill", colorTestProp("fill"));
it("sets stroke", colorTestStyle("stroke"));
it("circle core attributes", function () {
var c = s.circle(10, 20, 30);
expect(c.node.getAttribute("cx")).to.be("10");
expect(c.node.getAttribute("cy")).to.be("20");
expect(c.node.getAttribute("r")).to.be("30");
c.attr({
cx: 40,
cy: 50,
r: "5%"
});
expect(c.node.getAttribute("cx")).to.be("40");
expect(c.node.getAttribute("cy")).to.be("50");
expect(c.node.getAttribute("r")).to.be("5%");
});
it("rect core attributes", function () {
var c = s.rect(10, 20, 30, 40);
expect(c.node.getAttribute("x")).to.be("10");
expect(c.node.getAttribute("y")).to.be("20");
expect(c.node.getAttribute("width")).to.be("30");
expect(c.node.getAttribute("height")).to.be("40");
c.attr({
x: 40,
y: 50,
width: "5%",
height: "6%",
r: 10
});
expect(c.node.getAttribute("x")).to.be("40");
expect(c.node.getAttribute("y")).to.be("50");
expect(c.node.getAttribute("width")).to.be("5%");
expect(c.node.getAttribute("height")).to.be("6%");
expect(c.node.getAttribute("rx")).to.be("10");
expect(c.node.getAttribute("ry")).to.be("10");
});
it("ellipse core attributes", function () {
var c = s.ellipse(10, 20, 30, 40);
expect(c.node.getAttribute("cx")).to.be("10");
expect(c.node.getAttribute("cy")).to.be("20");
expect(c.node.getAttribute("rx")).to.be("30");
expect(c.node.getAttribute("ry")).to.be("40");
c.attr({
cx: 40,
cy: 50,
rx: "5%",
ry: "6%"
});
expect(c.node.getAttribute("cx")).to.be("40");
expect(c.node.getAttribute("cy")).to.be("50");
expect(c.node.getAttribute("rx")).to.be("5%");
expect(c.node.getAttribute("ry")).to.be("6%");
});
});
Initial commit
2013-07-05 07:23:52 +00:00
</script>
<script>
mocha.checkLeaks();
window.onload = function () {
mocha.run();
};
</script>
</body>
</html>