describe('Skottie 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 one with an animated gif', function(done) {
const imgPromise = fetch('/assets/flightAnim.gif')
.then((response) => response.arrayBuffer());
const jsonPromise = fetch('/assets/animated_gif.json')
.then((response) => response.text());
Promise.all([imgPromise, jsonPromise, LoadCanvasKit]).then((values) => {
if (!CanvasKit.managed_skottie) {
console.warn('Skipping test because not compiled with skottie')
done();
return;
}
catchException(done, () => {
const imgBuffer = values[0];
expect(imgBuffer).toBeTruthy();
expect(imgBuffer.byteLength).toBeTruthy();
const jsonStr = values[1];
expect(jsonStr).toBeTruthy();
const c = document.getElementById('test');
expect(c).toBeTruthy();
let surface = CanvasKit.MakeCanvasSurface(c);
expect(surface).toBeTruthy('Could not make surface');
if (CanvasKit.gpu) {
// If we are on GPU, make sure we didn't fallback
expect(c).not.toHaveClass('ck-replaced');
}
const animation = CanvasKit.MakeManagedAnimation(jsonStr, {
'flightAnim.gif': imgBuffer,
});
expect(animation).toBeTruthy();
const bounds = {fLeft: 0, fTop: 0, fRight: 500, fBottom: 500};
const canvas = surface.getCanvas();
canvas.clear(CanvasKit.WHITE);
animation.render(canvas, bounds);
surface.flush();
// There was a bug, fixed in https://skia-review.googlesource.com/c/skia/+/241757
// that seeking again and drawing again revealed.
animation.seek(0.5);
canvas.clear(CanvasKit.WHITE);
animation.render(canvas, bounds);
surface.flush();
reportSurface(surface, 'skottie_animgif', done);
})();
});
});
});