snap.js/test/attrs.js

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");
    });
});