175 lines
6.4 KiB
JavaScript
175 lines
6.4 KiB
JavaScript
describe("Attributes", function () {
|
|
var s, r;
|
|
beforeEach(function () {
|
|
s = Snap(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");
|
|
expect(r.attr(key)).to.be("rgb(255, 204, 0)");
|
|
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 Snap.color(r.node.getAttribute(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%");
|
|
});
|
|
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");
|
|
});
|
|
});
|