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

540 lines
23 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">
Include copyright notice
2013-08-16 04:57:44 +00:00
<meta name="copyright" content="Copyright (c) 2013 Adobe Systems Incorporated. All rights reserved.
Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.">
Initial commit
2013-07-05 07:23:52 +00:00
<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>
Moving submodules (part 2)
2013-08-16 01:20:48 +00:00
<link rel="stylesheet" href="../third-party/mocha/mocha.css">
Docs for mina and path fix for test
2013-08-23 23:31:00 +00:00
<script src="../dist/savage.js"></script>
Initial commit
2013-07-05 07:23:52 +00:00
</head>
<body>
<div id="mocha"></div>
Moving submodules (part 2)
2013-08-16 01:20:48 +00:00
<script src="../third-party/expect/expect.js"></script>
<script src="../third-party/mocha/mocha.js"></script>
Added gradients. Changed plugin architecture.
2013-07-11 03:23:37 +00:00
<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);
Moved elemental.js to 3rd party folder, fixed Savage(<SVG element>) work
2013-08-09 12:13:22 +00:00
var S = s.node;
Initial commit
2013-07-05 07:23:52 +00:00
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);
Moved elemental.js to 3rd party folder, fixed Savage(<SVG element>) work
2013-08-09 12:13:22 +00:00
var S = s.node;
Initial commit
2013-07-05 07:23:52 +00:00
expect(S).to.not.be(null);
s.remove();
Moved elemental.js to 3rd party folder, fixed Savage(<SVG element>) work
2013-08-09 12:13:22 +00:00
S = document.querySelectorAll("svg").length;
expect(S).to.be(1);
Initial commit
2013-07-05 07:23:52 +00:00
});
it("creates simple paper 20% × 10em", function () {
var s = Savage("20%", "10em");
Moved elemental.js to 3rd party folder, fixed Savage(<SVG element>) work
2013-08-09 12:13:22 +00:00
var S = s.node;
Initial commit
2013-07-05 07:23:52 +00:00
expect(S).to.not.be(null);
expect(S.getAttribute("width")).to.be("20%");
expect(S.getAttribute("height")).to.be("10em");
s.remove();
});
Moved elemental.js to 3rd party folder, fixed Savage(<SVG element>) work
2013-08-09 12:13:22 +00:00
it("converts existing SVG element to paper", function () {
var S = document.getElementById("svgroot");
var s = Savage(S);
expect(document.querySelector("#svgroot circle")).to.be(null);
var c = s.circle(10, 20, 5);
expect(document.querySelectorAll("#svgroot circle").length).to.be(1);
c.remove();
});
it("converts existing SVG element to paper (as query)", function () {
var S = document.getElementById("svgroot");
var s = Savage("#svgroot");
expect(document.querySelector("#svgroot circle")).to.be(null);
var c = s.circle(10, 20, 5);
expect(document.querySelectorAll("#svgroot circle").length).to.be(1);
c.remove();
});
Initial commit
2013-07-05 07:23:52 +00:00
});
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%");
});
More tests and small fixes to the path
2013-08-02 04:07:42 +00:00
it("path core attributes", function () {
var c = s.path("M10,10 110,10");
expect(c.node.getAttribute("d")).to.be("M10,10 110,10");
c.attr({d: "M10,10 210,10"});
expect(c.node.getAttribute("d")).to.be("M10,10 210,10");
c.attr({path: "M10,10 310,10"});
expect(c.node.getAttribute("d")).to.be("M10,10 310,10");
});
it("text core attributes", function () {
var c = s.text(10, 15, "testing");
expect(c.node.getAttribute("x")).to.be("10");
expect(c.node.getAttribute("y")).to.be("15");
expect(c.node.textContent).to.be("testing");
c.attr({
x: 20,
y: 25,
text: "texting"
});
expect(c.node.getAttribute("x")).to.be("20");
expect(c.node.getAttribute("y")).to.be("25");
expect(c.node.textContent).to.be("texting");
});
it("line core attributes", function () {
var c = s.line(10, 15, 110, 17);
expect(c.node.getAttribute("x1")).to.be("10");
expect(c.node.getAttribute("y1")).to.be("15");
expect(c.node.getAttribute("x2")).to.be("110");
expect(c.node.getAttribute("y2")).to.be("17");
c.attr({
x1: 20,
y1: 25,
x2: 220,
y2: 27
});
expect(c.node.getAttribute("x1")).to.be("20");
expect(c.node.getAttribute("y1")).to.be("25");
expect(c.node.getAttribute("x2")).to.be("220");
expect(c.node.getAttribute("y2")).to.be("27");
});
it("polyline core attributes", function () {
var c = s.polyline(10, 15, 20, 25, 30, 35);
expect(c.node.getAttribute("points")).to.be("10,15,20,25,30,35");
c.attr({
points: [20, 25, 30, 35, 40, 45]
});
expect(c.node.getAttribute("points")).to.be("20,25,30,35,40,45");
});
it("polygon core attributes", function () {
var c = s.polygon(10, 15, 20, 25, 30, 35);
expect(c.node.getAttribute("points")).to.be("10,15,20,25,30,35");
c.attr({
points: [20, 25, 30, 35, 40, 45]
});
expect(c.node.getAttribute("points")).to.be("20,25,30,35,40,45");
});
});
describe("Path methods", function () {
it("Savage.path.getTotalLength", function () {
expect(+Savage.path.getTotalLength("M0,0 100,0").toFixed(2)).to.be(100);
});
it("Savage.path.getPointAtLength", function () {
expect(Savage.path.getPointAtLength("M0,0 100,0", 50)).to.eql({
x: 50,
y: 0,
m: {
x: 25,
y: 0
},
n: {
x: 75,
y: 0
},
start: {
x: 0,
y: 0
},
end: {
x: 100,
y: 0
},
alpha: 180
});
});
it("Savage.path.getSubpath", function () {
expect(Savage.path.getSubpath("M0,0 100,0", 10, 90)).to.be("M9.995,0C29.153,0,70.839,0,90,0");
expect(Savage.path.getSubpath("M0,0 100,0", 0, 90)).to.be("M0,0C0,0,64.674,0,90,0");
expect(Savage.path.getSubpath("M0,0 100,0", 10, 120)).to.be("M10,0C35.326,0,100,0,100,0");
});
it("Savage.path.findDotsAtSegment", function () {
expect(Savage.path.findDotsAtSegment(0,0,0,0,100,0,100,0,.5)).to.eql({
x: 50,
y: 0,
m: {
x: 25,
y: 0
},
n: {
x: 75,
y: 0
},
start: {
x: 0,
y: 0
},
end: {
x: 100,
y: 0
},
alpha: 180
});
});
it("Savage.path.bezierBBox", function () {
var bbox = Savage.path.bezierBBox(10, 10, 10, 20, 110, 0, 110, 10);
expect(bbox.cx).to.be(60);
expect(bbox.cy).to.be(10);
expect(bbox.x).to.be(10);
expect(bbox.w).to.be(100);
expect(bbox.width).to.be(100);
expect(bbox.x2).to.be(110);
});
it("Savage.path.isPointInsideBBox", function () {
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 5, 5)).to.be(true);
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 10, 5)).to.be(true);
expect(Savage.path.isPointInsideBBox({x: 0, y: 0, width: 10, height: 10}, 10, 10)).to.be(true);
});
it("Savage.path.isBBoxIntersect", function () {
expect(Savage.path.isBBoxIntersect({
x: 0,
y: 0,
width: 10,
height: 10
}, {
x: 5,
y: 5,
width: 15,
height: 15
})).to.be(true);
expect(Savage.path.isBBoxIntersect({
x: 0,
y: 0,
width: 10,
height: 10
}, {
x: 5,
y: 5,
width: 7,
height: 7
})).to.be(true);
expect(Savage.path.isBBoxIntersect({
x: 0,
y: 0,
width: 10,
height: 10
}, {
x: 15,
y: 15,
width: 10,
height: 10
})).to.be(false);
});
Added gradients. Changed plugin architecture.
2013-07-11 03:23:37 +00:00
});
Initial commit
2013-07-05 07:23:52 +00:00
</script>
<script>
mocha.checkLeaks();
window.onload = function () {
mocha.run();
};
</script>
Moved elemental.js to 3rd party folder, fixed Savage(<SVG element>) work
2013-08-09 12:13:22 +00:00
<svg id="svgroot"></svg>
Initial commit
2013-07-05 07:23:52 +00:00
</body>
</html>