describe('Core canvas behavior', function() {
let container = document.createElement('div');
document.body.appendChild(container);
const CANVAS_WIDTH = 600;
const CANVAS_HEIGHT = 600;
beforeEach(function() {
container.innerHTML = `
`;
});
afterEach(function() {
container.innerHTML = '';
});
it('can draw an SkPicture', function(done) {
LoadCanvasKit.then(catchException(done, () => {
// This is taken from example.html
const surface = CanvasKit.MakeCanvasSurface('test');
expect(surface).toBeTruthy('Could not make surface');
if (!surface) {
done();
return;
}
const spr = new CanvasKit.SkPictureRecorder();
const rcanvas = spr.beginRecording(
CanvasKit.LTRBRect(0, 0, surface.width(), surface.height()));
const paint = new CanvasKit.SkPaint();
paint.setStrokeWidth(2.0);
paint.setAntiAlias(true);
paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
paint.setStyle(CanvasKit.PaintStyle.Stroke);
rcanvas.drawRoundRect(CanvasKit.LTRBRect(5, 35, 45, 80), 15, 10, paint);
const font = new CanvasKit.SkFont(null, 20);
rcanvas.drawText('this picture has a round rect', 5, 100, paint, font);
const pic = spr.finishRecordingAsPicture();
spr.delete();
const canvas = surface.getCanvas();
canvas.drawPicture(pic);
reportSurface(surface, 'picture_test', done);
}));
});
it('can compute tonal colors', function(done) {
LoadCanvasKit.then(catchException(done, () => {
const input = {
ambient: CanvasKit.BLUE,
spot: CanvasKit.RED,
};
const out = CanvasKit.computeTonalColors(input);
expect(out.ambient).toEqual(CanvasKit.Color(0,0,0,1));
const [r,g,b,a] = CanvasKit.getColorComponents(out.spot);
expect(r).toEqual(44);
expect(g).toEqual(0);
expect(b).toEqual(0);
expect(a).toBeCloseTo(0.969, 2);
done();
}));
});
it('can decode and draw a png', function(done) {
const imgPromise = fetch('/assets/mandrill_512.png')
.then((response) => response.arrayBuffer());
Promise.all([imgPromise, LoadCanvasKit]).then((values) => {
const pngData = values[0];
expect(pngData).toBeTruthy();
catchException(done, () => {
let img = CanvasKit.MakeImageFromEncoded(pngData);
expect(img).toBeTruthy();
const surface = CanvasKit.MakeCanvasSurface('test');
expect(surface).toBeTruthy('Could not make surface')
if (!surface) {
done();
return;
}
const canvas = surface.getCanvas();
let paint = new CanvasKit.SkPaint();
canvas.drawImage(img, 0, 0, paint);
paint.delete();
img.delete();
reportSurface(surface, 'drawImage_png', done);
})();
});
});
it('can decode and draw a jpg', function(done) {
const imgPromise = fetch('/assets/mandrill_h1v1.jpg')
.then((response) => response.arrayBuffer());
Promise.all([imgPromise, LoadCanvasKit]).then((values) => {
const jpgData = values[0];
expect(jpgData).toBeTruthy();
catchException(done, () => {
let img = CanvasKit.MakeImageFromEncoded(jpgData);
expect(img).toBeTruthy();
const surface = CanvasKit.MakeCanvasSurface('test');
expect(surface).toBeTruthy('Could not make surface')
if (!surface) {
done();
return;
}
const canvas = surface.getCanvas();
let paint = new CanvasKit.SkPaint();
canvas.drawImage(img, 0, 0, paint);
paint.delete();
img.delete();
reportSurface(surface, 'drawImage_jpg', done);
})();
});
});
it('can decode and draw a (still) gif', function(done) {
const imgPromise = fetch('/assets/flightAnim.gif')
.then((response) => response.arrayBuffer());
Promise.all([imgPromise, LoadCanvasKit]).then((values) => {
const gifData = values[0];
expect(gifData).toBeTruthy();
catchException(done, () => {
let img = CanvasKit.MakeImageFromEncoded(gifData);
expect(img).toBeTruthy();
const surface = CanvasKit.MakeCanvasSurface('test');
expect(surface).toBeTruthy('Could not make surface')
if (!surface) {
done();
return;
}
const canvas = surface.getCanvas();
let paint = new CanvasKit.SkPaint();
canvas.drawImage(img, 0, 0, paint);
paint.delete();
img.delete();
reportSurface(surface, 'drawImage_gif', done);
})();
});
});
it('can decode and draw an animated gif', function(done) {
const imgPromise = fetch('/assets/flightAnim.gif')
.then((response) => response.arrayBuffer());
Promise.all([imgPromise, LoadCanvasKit]).then((values) => {
const gifData = values[0];
expect(gifData).toBeTruthy();
catchException(done, () => {
let aImg = CanvasKit.MakeAnimatedImageFromEncoded(gifData);
expect(aImg).toBeTruthy();
expect(aImg.getRepetitionCount()).toEqual(-1); // infinite loop
const surface = CanvasKit.MakeCanvasSurface('test');
expect(surface).toBeTruthy('Could not make surface')
if (!surface) {
done();
return;
}
const canvas = surface.getCanvas();
canvas.drawAnimatedImage(aImg, 0, 0);
let c = aImg.decodeNextFrame();
expect(c).not.toEqual(-1);
canvas.drawAnimatedImage(aImg, 300, 0);
for(let i = 0; i < 10; i++) {
c = aImg.decodeNextFrame();
expect(c).not.toEqual(-1);
}
canvas.drawAnimatedImage(aImg, 0, 300);
for(let i = 0; i < 10; i++) {
c = aImg.decodeNextFrame();
expect(c).not.toEqual(-1);
}
canvas.drawAnimatedImage(aImg, 300, 300);
aImg.delete();
reportSurface(surface, 'drawDrawable_animated_gif', done);
})();
});
});
});