')
.find('#test-container');
jasmine.addMatchers(window.colors.jasmineMatchers);
});
it('should call composeImages on an empty array of sources, so the destination canvas should stay unmodified', function (done) {
var sources = placeholder.html('
' +
''
).find('.imgsrc').toArray();
var originalCanvas1 = document.getElementById("canvasSource1");
var originalCanvas2 = document.getElementById("canvasSource2");
var destinationCanvas = document.getElementById("myCanvas");
drawARectangleOnCanvas(originalCanvas1, "#FF0000");
drawARectangleOnCanvas(originalCanvas2, "#00FF00");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(30); //34 - //2 * 20 + 2 * spacing - 10 //10px is the offset of the second canvas, defined in style
expect(destinationCanvas.height).toBe(20);
expect(canvasData(originalCanvas1, 0, 0, 10, 20)) //14
.toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 10, 20)); //14
expect(canvasData(originalCanvas2, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 20 + 0 - 10, 0, 20, 20)); //20 + 10 - 4
done();
}, null);
});
it('should call composeImages on two partially overlapped canvases. Same as above test, but the two canvases have the opposite Z order.', function (done) {
var sources = placeholder.html('' +
'
' +
'' +
'' +
'
' +
''
).find('.imgsrc').toArray();
var originalCanvas1 = document.getElementById("canvasSource1");
var originalCanvas2 = document.getElementById("canvasSource2");
var destinationCanvas = document.getElementById("myCanvas");
drawARectangleOnCanvas(originalCanvas1, "#FF0000");
drawARectangleOnCanvas(originalCanvas2, "#00FF00");
sources.reverse(); //make sure the images are composed in the inverse order
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(30); //34 - //2 * 20 + 2 * spacing - 10 //10px is the offset of the second canvas, defined in style
expect(destinationCanvas.height).toBe(20);
expect(canvasData(originalCanvas1, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));
expect(canvasData(originalCanvas2, 0, 0, 20 - 10 + 0, 20)) //20 - 10 + 4
.toMatchCanvasArea(canvasData(destinationCanvas, 20, 0, 20 - 10 + 0, 20)); //20 - 10 + 4
done();
}, null);
});
it('should call composeImages on two separate canvases, where one canvas is outside of view area', function (done) {
var sources = placeholder.html('' +
'
' +
'' +
'' +
'
' +
''
).find('.imgsrc').toArray();
var originalCanvas1 = document.getElementById("canvasSource1");
var originalCanvas2 = document.getElementById("canvasSource2");
var destinationCanvas = document.getElementById("myCanvas");
drawARectangleOnCanvas(originalCanvas1, "#FF0000");
drawARectangleOnCanvas(originalCanvas2, "#00FF00");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(100 - 0); //100 - 4
expect(destinationCanvas.height).toBe(20);
expect(canvasData(originalCanvas1, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 100 - 20 - 0, 0, 20, 20)); //100 - 20 - 10 + 6
expect(canvasData(originalCanvas2, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));
done();
}, null);
});
it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency', function (done) {
var sources = placeholder.html('' +
'
' +
'' +
'' +
'
' +
''
).find('.imgsrc').toArray();
var originalCanvas1 = document.getElementById("canvasSource1");
var destinationCanvas = document.getElementById("myCanvas");
drawARectangleOnCanvas(originalCanvas1, "#FF0000");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(100);
expect(destinationCanvas.height).toBe(100);
expect(canvasData(originalCanvas1, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 100 - 40 + 0, 0, 20, 20)); //100 - 40 + 4
expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
done();
}, null);
});
it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency. The SVG has a different size than the ones from other tests. One component of the SVG is partially outside of the view area.', function (done) {
var sources = placeholder.html('' +
'
' +
'' +
'' +
'
' +
''
).find('.imgsrc').toArray();
var originalCanvas1 = document.getElementById("canvasSource1");
var destinationCanvas = document.getElementById("myCanvas");
drawARectangleOnCanvas(originalCanvas1, "#FF0000");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(250);
expect(destinationCanvas.height).toBe(150);
expect(canvasData(originalCanvas1, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 250 - 180 + 0, 150 - 10 - 20, 20, 20)); //250 - 180 + 4
//circle centers
expect(canvasData(destinationCanvas, 230, 20, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 175, 100, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 50, 130, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
//other points on circles should match the required colors, because of configured diameters
expect(canvasData(destinationCanvas, 220, 17, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 190, 114, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 80, 149, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
//verify a pixel from the circle border, if it comes from a black line (almost black, because of antialiasing), as described in svg style
expect(canvasData(destinationCanvas, 79, 102, 1, 1)).toMatchPixelColorWithError([0, 0, 0, 255, 15]);
done();
}, null);
});
it('should call composeImages on one canvas and an SVG, which are totally overlapped with transparency, using external CSS. The SVG has a different size than the ones from other tests. One component of the SVG is partially outside of the view area.', function (done) {
var sources = placeholder.html('' +
'
' +
'' +
'' +
'
' +
''
).find('.imgsrc').toArray();
var originalCanvas1 = document.getElementById("canvasSource1");
var destinationCanvas = document.getElementById("myCanvas");
drawARectangleOnCanvas(originalCanvas1, "#FF0000");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(250);
expect(destinationCanvas.height).toBe(150);
expect(canvasData(originalCanvas1, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 250 - 180 + 0, 150 - 10 - 20, 20, 20)); //250 - 180 + 4
//circle centers
expect(canvasData(destinationCanvas, 230, 20, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 175, 100, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 50, 130, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
//other points on circles should match the required colors, because of configured diameters
expect(canvasData(destinationCanvas, 220, 17, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 190, 114, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 80, 149, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
//verify a pixel from the circle border, if it comes from a black line (almost black, because of antialiasing), as described in svg style
expect(canvasData(destinationCanvas, 79, 102, 1, 1)).toMatchPixelColorWithError([0, 0, 0, 255, 15]);
done();
}, null);
});
it('should call composeImages on one dynamically created canvas as a source, without being able to compose', function (done) {
var sources = placeholder.html('
' +
'
' +
''
).find('#canvasSource').toArray();
var originalCanvas = document.createElement('canvas');
originalCanvas.width = 20;
originalCanvas.height = 20;
drawSomeLinesOnCanvas(originalCanvas);
sources.push(originalCanvas);
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(30);
expect(destinationCanvas.height).toBe(15);
done();
}, null);
});
it('should call composeImages on two dynamically created canvas as sources, without being able to compose', function (done) {
var sources = placeholder.html('
' +
'
' +
''
).find('#canvasSource').toArray();
var originalCanvas = document.createElement('canvas');
originalCanvas.width = 20;
originalCanvas.height = 20;
drawSomeLinesOnCanvas(originalCanvas);
sources.push(originalCanvas);
originalCanvas = document.createElement('canvas');
originalCanvas.width = 20;
originalCanvas.height = 20;
drawSomeLinesOnCanvas(originalCanvas);
sources.push(originalCanvas);
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(30);
expect(destinationCanvas.height).toBe(15);
done();
}, null);
});
it('should call composeImages on two dynamically created canvas as sources (with left/top properties set), without being able to compose', function (done) {
var sources = placeholder.html('
' +
'
' +
''
).find('#canvasSource').toArray();
var originalCanvas = document.createElement('canvas');
originalCanvas.width = 20;
originalCanvas.height = 20;
originalCanvas.left = 0;
originalCanvas.top = 0;
drawSomeLinesOnCanvas(originalCanvas);
sources.push(originalCanvas);
originalCanvas = document.createElement('canvas');
originalCanvas.width = 20;
originalCanvas.height = 20;
originalCanvas.left = 0;
originalCanvas.top = 0;
drawSomeLinesOnCanvas(originalCanvas);
sources.push(originalCanvas);
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(30);
expect(destinationCanvas.height).toBe(15);
done();
}, null);
});
it('should call composeImages on one canvas as a source and a dynamically generated destination Canvas', function (done) {
var sources = placeholder.html('
' +
'' +
'
'
).find('#canvasSource').toArray();
var originalCanvas = document.getElementById("canvasSource");
var destinationCanvas = document.createElement("canvas");
destinationCanvas.width = 30;
destinationCanvas.height = 15;
drawSomeLinesOnCanvas(originalCanvas);
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(20);
expect(destinationCanvas.height).toBe(20);
expect(canvasData(originalCanvas, 0, 0, 20, 20))
.toMatchCanvasArea(canvasData(destinationCanvas, 0, 0, 20, 20));
done();
}, null);
});
xit('should call composeImages on one SVG as a source, which defines only its viewbox, without width and height', function (done) {
var sources = placeholder.html('
' +
'' +
'
' +
''
).find('svg').toArray();
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(600);
expect(destinationCanvas.height).toBe(600);
expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
done();
}, null);
});
xit('should call composeImages on one SVG as a source, which defines only its width and height, without its viewbox', function (done) {
var sources = placeholder.html('
' +
'' +
'
' +
''
).find('svg').toArray();
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(100);
expect(destinationCanvas.height).toBe(100);
expect(canvasData(destinationCanvas, 10, 10, 1, 1)).toMatchPixelColor([255, 0, 0, 255]);
expect(canvasData(destinationCanvas, 30, 40, 1, 1)).toMatchPixelColor([0, 255, 0, 255]);
expect(canvasData(destinationCanvas, 50, 70, 1, 1)).toMatchPixelColor([0, 0, 255, 255]);
done();
}, null);
});
xit('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". Only its viewBox is defined.', function (done) {
var sources = placeholder.html('
' +
'' +
'
' +
''
).find('svg').toArray();
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(600);
expect(destinationCanvas.height).toBe(400);
done();
}, null);
});
xit('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". Only the width and height properties are defined.', function (done) {
var sources = placeholder.html('
' +
'' +
'
' +
''
).find('svg').toArray();
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(600);
expect(destinationCanvas.height).toBe(400);
done();
}, null);
});
it('should call composeImages on one potentially unsupported SVG as a source, because it contains "uses". ViewBox, width and height properties are defined.', function (done) {
var sources = placeholder.html('
' +
'' +
'
' +
''
).find('svg').toArray();
var destinationCanvas = document.getElementById("myCanvas");
composeImages(sources, destinationCanvas).then(function() {
expect(destinationCanvas.width).toBe(600);
expect(destinationCanvas.height).toBe(400);
done();
}, null);
});
xit('should call composeImages on one empty SVG as a source. This may block composeImages.', function (done) {
var sources = placeholder.html('