describe('canvas2svg', function() { describe('it can be created', function(){ it("with options", function() { var ctx = new C2S({width:100, height:200, enableMirroring:true}); expect(ctx instanceof C2S).to.equal(true); expect(ctx.width).to.equal(100); expect(ctx.height).to.equal(200); expect(ctx.enableMirroring).to.equal(true); var ctx2 = new C2S(300,400); expect(ctx2 instanceof C2S).to.equal(true); expect(ctx2.width).to.equal(300); expect(ctx2.height).to.equal(400); expect(ctx2.enableMirroring).to.equal(false); }); it("with no options and have defaults", function() { var ctx = new C2S(); expect(ctx instanceof C2S).to.equal(true); expect(ctx.width).to.equal(500); expect(ctx.height).to.equal(500); expect(ctx.enableMirroring).to.equal(false); }); it("even if it's called as a function", function() { //notice the lack of new! var ctx = C2S({width:100, height:200, enableMirroring:true}); expect(ctx instanceof C2S).to.equal(true); expect(ctx.width).to.equal(100); expect(ctx.height).to.equal(200); expect(ctx.enableMirroring).to.equal(true); var ctx2 = C2S(300,400); expect(ctx2 instanceof C2S).to.equal(true); expect(ctx2.width).to.equal(300); expect(ctx2.height).to.equal(400); expect(ctx2.enableMirroring).to.equal(false); var ctx3 = C2S(); expect(ctx3 instanceof C2S).to.equal(true); expect(ctx3.width).to.equal(500); expect(ctx3.height).to.equal(500); expect(ctx3.enableMirroring).to.equal(false); }); it("can be created on another document", function () { var otherDoc = document.implementation.createHTMLDocument(); var ctx = C2S({document: otherDoc}); expect(ctx.getSvg().ownerDocument).to.equal(otherDoc); }); }); describe("can export to", function() { it("inline svg", function() { var ctx = new C2S(); ctx.fillStyle="red"; ctx.fillRect(100,100,100,100); //svg is of course not attached to the document var svg = ctx.getSvg(); expect(svg.nodeType).to.equal(1); expect(svg.nodeName).to.equal("svg"); }); it("serialized svg", function() { var ctx = new C2S(); ctx.fillStyle="red"; ctx.fillRect(100,100,100,100); //Standalone SVG doesn't support named entities, which document.createTextNode encodes. //passing in true will attempt to find all named entities and encode it as a numeric entity. var string = ctx.getSerializedSvg(true); expect(typeof string).to.equal("string"); expect(string).to.equal(''); }); }); describe("with multiple transforms and fill/strokes", function() { it("creates new groups", function() { var ctx = new C2S(); ctx.translate(0, 20); ctx.fillRect(0, 0, 10, 10); ctx.translate(10, 20); ctx.fillRect(0, 0, 10, 10); ctx.translate(20, 20); ctx.fillRect(0, 0, 10, 10); var svg = ctx.getSvg(); var firstGroup = svg.querySelector("g"); expect(firstGroup.getAttribute("transform")).to.equal("translate(0,20)"); var secondGroup = firstGroup.querySelector("g"); expect(secondGroup.getAttribute("transform")).to.equal("translate(10,20)"); var thirdGroup = secondGroup.querySelector("g"); expect(thirdGroup.getAttribute("transform")).to.equal("translate(20,20)"); }); it("save and restore still works", function() { var ctx = new C2S(); ctx.translate(0, 10); ctx.fillRect(0, 0, 10, 10); ctx.save(); ctx.translate(40, 40); ctx.fillRect(0, 0, 10, 10); ctx.restore(); ctx.translate(0, 10); ctx.fillRect(0, 0, 10, 10); var svg = ctx.getSvg(); var firstGroup = svg.querySelector("g"); expect(firstGroup.getAttribute("transform")).to.equal("translate(0,10)"); var secondGroup = firstGroup.childNodes[1]; expect(secondGroup.getAttribute("transform")).to.equal("translate(40,40)"); var thirdGroup = firstGroup.childNodes[2]; expect(thirdGroup.getAttribute("transform")).to.equal("translate(0,10)"); }); }); describe("it will generate ids", function() { it("that start with a letter", function() { var ctx = new C2S(); ctx.createRadialGradient(6E1, 6E1, 0.0, 6E1, 6E1, 5E1); var svg = ctx.getSvg(); var id = svg.children[0].children[0].id; var test = /^[A-Za-z]/.test(id); expect(test).to.equal(true); }); }); describe("will split up rgba", function() { //while browsers support rgba values for fill/stroke, this is not accepted in visio/illustrator it("to fill and fill-opacity", function() { var ctx = new C2S(); ctx.fillStyle="rgba(20,40,50,0.5)"; ctx.fillRect(100,100,100,100); var svg = ctx.getSvg(); expect(svg.querySelector("rect").getAttribute("fill")).to.equal("rgb(20,40,50)"); expect(svg.querySelector("rect").getAttribute("fill-opacity")).to.equal("0.5"); }); it("to stroke and stroke-opacity", function() { var ctx = new C2S(); ctx.strokeStyle="rgba(10,20,30,0.4)"; ctx.strokeRect(100,100,100,100); var svg = ctx.getSvg(); expect(svg.querySelector("rect").getAttribute("stroke")).to.equal("rgb(10,20,30)"); expect(svg.querySelector("rect").getAttribute("stroke-opacity")).to.equal("0.4"); }); }); describe("supports path commands", function() { it("and moveTo may be called without beginPath, but is not recommended", function() { var ctx = new C2S(); ctx.moveTo(0,0); ctx.lineTo(100,100); ctx.stroke(); }); }); describe("supports text align", function() { it("not specifying a value defaults to 'start'", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("start"); }); it("assuming ltr, left maps to 'start'", function() { var ctx = new C2S(); ctx.textAlign = "left"; ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("start"); }); it("assuming ltr, right maps to 'end'", function() { var ctx = new C2S(); ctx.textAlign = "right"; ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("end"); }); it("center maps to 'middle'", function() { var ctx = new C2S(); ctx.textAlign = "center"; ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("text-anchor")).to.equal("middle"); }); it("stores the proper values on save and restore", function() { var ctx = new C2S(); ctx.textAlign = "center"; expect(ctx.textAlign).to.equal("center"); ctx.save(); expect(ctx.textAlign).to.equal("center"); ctx.textAlign = "right"; expect(ctx.textAlign).to.equal("right"); ctx.restore(); expect(ctx.textAlign).to.equal("center"); }); }); describe("supports text baseline", function() { it("not specifying a value defaults to alphabetic", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("alphabetic"); }); it("not specifying a valid value defaults to alphabetic", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.textBaseline = "werwerwer"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("alphabetic"); }); it("hanging maps to hanging", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.textBaseline = "hanging"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("hanging"); }); it("top maps to text-before-edge", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.textBaseline = "top"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("text-before-edge"); }); it("bottom maps to text-after-edge", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.textBaseline = "bottom"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("text-after-edge"); }); it("middle maps to central", function() { var ctx = new C2S(); ctx.font = "normal 36px Times"; ctx.fillStyle = "#000000"; ctx.textBaseline = "middle"; ctx.fillText("A Text Example", 0, 50); var svg = ctx.getSvg(); expect(svg.querySelector("text").getAttribute("dominant-baseline")).to.equal("central"); }); }); });