1describe('Skottie behavior', function() { 2 let container = document.createElement('div'); 3 document.body.appendChild(container); 4 const CANVAS_WIDTH = 600; 5 const CANVAS_HEIGHT = 600; 6 7 beforeEach(function() { 8 container.innerHTML = ` 9 <canvas width=600 height=600 id=test></canvas> 10 <canvas width=600 height=600 id=report></canvas>`; 11 }); 12 13 afterEach(function() { 14 container.innerHTML = ''; 15 }); 16 17 it('can draw one with an animated gif', function(done) { 18 const imgPromise = fetch('/assets/flightAnim.gif') 19 .then((response) => response.arrayBuffer()); 20 const jsonPromise = fetch('/assets/animated_gif.json') 21 .then((response) => response.text()); 22 23 Promise.all([imgPromise, jsonPromise, LoadCanvasKit]).then((values) => { 24 if (!CanvasKit.skottie || !CanvasKit.managed_skottie) { 25 console.warn('Skipping test because not compiled with skottie'); 26 done(); 27 return; 28 } 29 catchException(done, () => { 30 const imgBuffer = values[0]; 31 expect(imgBuffer).toBeTruthy(); 32 expect(imgBuffer.byteLength).toBeTruthy(); 33 const jsonStr = values[1]; 34 expect(jsonStr).toBeTruthy(); 35 36 const c = document.getElementById('test'); 37 expect(c).toBeTruthy(); 38 let surface = CanvasKit.MakeCanvasSurface(c); 39 expect(surface).toBeTruthy('Could not make surface'); 40 if (CanvasKit.gpu) { 41 // If we are on GPU, make sure we didn't fallback 42 expect(c).not.toHaveClass('ck-replaced'); 43 } 44 const animation = CanvasKit.MakeManagedAnimation(jsonStr, { 45 'flightAnim.gif': imgBuffer, 46 }); 47 expect(animation).toBeTruthy(); 48 const bounds = {fLeft: 0, fTop: 0, fRight: 500, fBottom: 500}; 49 50 const canvas = surface.getCanvas(); 51 canvas.clear(CanvasKit.WHITE); 52 animation.render(canvas, bounds); 53 surface.flush(); 54 55 // There was a bug, fixed in https://skia-review.googlesource.com/c/skia/+/241757 56 // that seeking again and drawing again revealed. 57 animation.seek(0.5); 58 canvas.clear(CanvasKit.WHITE); 59 animation.render(canvas, bounds); 60 surface.flush(); 61 animation.delete(); 62 63 reportSurface(surface, 'skottie_animgif', done); 64 })(); 65 }); 66 }); 67 68}); 69
