xref: /external/skia/modules/canvaskit/tests/core_test.js

describe('Core canvas behavior', () => {
    let container;

    beforeEach(async () => {
        await EverythingLoaded;
        container = document.createElement('div');
        container.innerHTML = `
            <canvas width=600 height=600 id=test></canvas>
            <canvas width=600 height=600 id=report></canvas>`;
        document.body.appendChild(container);
    });

    afterEach(() => {
        document.body.removeChild(container);
    });

    gm('picture_test', (canvas) => {
        const spr = new CanvasKit.PictureRecorder();
        const bounds = CanvasKit.LTRBRect(0, 0, 400, 120);
        const rcanvas = spr.beginRecording(bounds);
        const paint = new CanvasKit.Paint();
        paint.setStrokeWidth(2.0);
        paint.setAntiAlias(true);
        paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
        paint.setStyle(CanvasKit.PaintStyle.Stroke);

        rcanvas.drawRRect(CanvasKit.RRectXY([5, 35, 45, 80], 15, 10), paint);

        const font = new CanvasKit.Font(null, 20);
        rcanvas.drawText('this picture has a round rect', 5, 100, paint, font);
        const pic = spr.finishRecordingAsPicture();
        spr.delete();
        paint.delete();

        canvas.drawPicture(pic);
        const paint2 = new CanvasKit.Paint();
        paint2.setColor(CanvasKit.RED);
        paint2.setStyle(CanvasKit.PaintStyle.Stroke);
        canvas.drawRect(bounds, paint2);

        const bytes = pic.serialize();
        expect(bytes).toBeTruthy();


        const matr = CanvasKit.Matrix.scaled(0.33, 0.33);
        // Give a 5 pixel margin between the original content.
        const tileRect = CanvasKit.LTRBRect(-5, -5, 405, 125);
        const shader = pic.makeShader(CanvasKit.TileMode.Mirror, CanvasKit.TileMode.Mirror,
        CanvasKit.FilterMode.Linear, matr, tileRect);
        paint2.setStyle(CanvasKit.PaintStyle.Fill);
        paint2.setShader(shader);
        canvas.drawRect(CanvasKit.LTRBRect(0, 150, CANVAS_WIDTH, CANVAS_HEIGHT), paint2);

        paint2.delete();
        shader.delete();
        pic.delete();
    });

    const uIntColorToCanvasKitColor = (c) => {
        return CanvasKit.Color(
         (c >> 16) & 0xFF,
         (c >>  8) & 0xFF,
         (c >>  0) & 0xFF,
        ((c >> 24) & 0xFF) / 255
      );
    };

    it('can compute tonal colors', () => {
        const input = {
            ambient: CanvasKit.BLUE,
            spot: CanvasKit.RED,
        };
        const out = CanvasKit.computeTonalColors(input);
        expect(new Float32Array(out.ambient)).toEqual(CanvasKit.BLACK);
        const expectedSpot = [0.173, 0, 0, 0.969];
        expect(out.spot.length).toEqual(4);
        expect(out.spot[0]).toBeCloseTo(expectedSpot[0], 3);
        expect(out.spot[1]).toBeCloseTo(expectedSpot[1], 3);
        expect(out.spot[2]).toBeCloseTo(expectedSpot[2], 3);
        expect(out.spot[3]).toBeCloseTo(expectedSpot[3], 3);
    });

    it('can compute tonal colors with malloced values', () => {
        const ambientColor = CanvasKit.Malloc(Float32Array, 4);
        ambientColor.toTypedArray().set(CanvasKit.BLUE);
        const spotColor = CanvasKit.Malloc(Float32Array, 4);
        spotColor.toTypedArray().set(CanvasKit.RED);
        const input = {
            ambient: ambientColor,
            spot: spotColor,
        };
        const out = CanvasKit.computeTonalColors(input);
        expect(new Float32Array(out.ambient)).toEqual(CanvasKit.BLACK);
        const expectedSpot = [0.173, 0, 0, 0.969];
        expect(out.spot.length).toEqual(4);
        expect(out.spot[0]).toBeCloseTo(expectedSpot[0], 3);
        expect(out.spot[1]).toBeCloseTo(expectedSpot[1], 3);
        expect(out.spot[2]).toBeCloseTo(expectedSpot[2], 3);
        expect(out.spot[3]).toBeCloseTo(expectedSpot[3], 3);
    });

    // This helper is used for all the MakeImageFromEncoded tests.
    // TODO(kjlubick): rewrite this and callers to use gm
    function decodeAndDrawSingleFrameImage(imgName, goldName, done) {
        const imgPromise = fetch(imgName)
            .then((response) => response.arrayBuffer());
        Promise.all([imgPromise, EverythingLoaded]).then((values) => {
            const imgData = values[0];
            expect(imgData).toBeTruthy();
            catchException(done, () => {
                let img = CanvasKit.MakeImageFromEncoded(imgData);
                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.Paint();
                canvas.drawImage(img, 0, 0, paint);

                paint.delete();
                img.delete();

                reportSurface(surface, goldName, done);
            })();
        });
    }

    it('can decode and draw a png', (done) => {
        decodeAndDrawSingleFrameImage('/assets/mandrill_512.png', 'drawImage_png', done);
    });

    it('can decode and draw a jpg', (done) => {
        decodeAndDrawSingleFrameImage('/assets/mandrill_h1v1.jpg', 'drawImage_jpg', done);
    });

    it('can decode and draw a (still) gif', (done) => {
        decodeAndDrawSingleFrameImage('/assets/flightAnim.gif', 'drawImage_gif', done);
    });

    it('can decode and draw a still webp', (done) => {
        decodeAndDrawSingleFrameImage('/assets/color_wheel.webp', 'drawImage_webp', done);
    });

   it('can readPixels from an Image', (done) => {
        const imgPromise = fetch('/assets/mandrill_512.png')
            .then((response) => response.arrayBuffer());
        Promise.all([imgPromise, EverythingLoaded]).then((values) => {
            const imgData = values[0];
            expect(imgData).toBeTruthy();
            catchException(done, () => {
                let img = CanvasKit.MakeImageFromEncoded(imgData);
                expect(img).toBeTruthy();
                const imageInfo = {
                    alphaType: CanvasKit.AlphaType.Unpremul,
                    colorType: CanvasKit.ColorType.RGBA_8888,
                    colorSpace: CanvasKit.ColorSpace.SRGB,
                    width: img.width(),
                    height: img.height(),
                };
                const rowBytes = 4 * img.width();

                const pixels = img.readPixels(0, 0, imageInfo);
                // We know the image is 512 by 512 pixels in size, each pixel
                // requires 4 bytes (R, G, B, A).
                expect(pixels.length).toEqual(512 * 512 * 4);

                // Make enough space for a 5x5 8888 surface (4 bytes for R, G, B, A)
                const rdsData = CanvasKit.Malloc(Uint8Array, 512 * 5*512 * 4);
                const pixels2 = rdsData.toTypedArray();
                pixels2[0] = 127;  // sentinel value, should be overwritten by readPixels.
                img.readPixels(0, 0, imageInfo, rdsData, rowBytes);
                expect(rdsData.toTypedArray()[0]).toEqual(pixels[0]);

                img.delete();
                CanvasKit.Free(rdsData);
                done();
            })();
        });
    });

    gm('drawDrawable_animated_gif', (canvas, fetchedByteBuffers) => {
        let aImg = CanvasKit.MakeAnimatedImageFromEncoded(fetchedByteBuffers[0]);
        expect(aImg).toBeTruthy();
        expect(aImg.getRepetitionCount()).toEqual(-1); // infinite loop
        expect(aImg.width()).toEqual(320);
        expect(aImg.height()).toEqual(240);
        expect(aImg.getFrameCount()).toEqual(60);
        expect(aImg.currentFrameDuration()).toEqual(60);

        const drawCurrentFrame = function(x, y) {
            let img = aImg.makeImageAtCurrentFrame();
            canvas.drawImage(img, x, y, null);
            img.delete();
        }

        drawCurrentFrame(0, 0);

        let c = aImg.decodeNextFrame();
        expect(c).not.toEqual(-1);
        drawCurrentFrame(300, 0);
        for(let i = 0; i < 10; i++) {
            c = aImg.decodeNextFrame();
            expect(c).not.toEqual(-1);
        }
        drawCurrentFrame(0, 300);
        for(let i = 0; i < 10; i++) {
            c = aImg.decodeNextFrame();
            expect(c).not.toEqual(-1);
        }
        drawCurrentFrame(300, 300);

        aImg.delete();
    }, '/assets/flightAnim.gif');

    gm('exif_orientation', (canvas, fetchedByteBuffers) => {
        const paint = new CanvasKit.Paint();
        const font = new CanvasKit.Font(null, 14);
        canvas.drawText('The following heart should be rotated 90 CCW due to exif.',
            5, 25, paint, font);

        // TODO(kjlubick) it would be nice to also to test MakeAnimatedImageFromEncoded but
        //   I could not create a sample animated image that worked.
        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        canvas.drawImage(img, 5, 35, null);

        img.delete();
        paint.delete();
        font.delete();
    }, '/assets/exif_rotated_heart.jpg');

    gm('1x4_from_scratch', (canvas) => {
        const paint = new CanvasKit.Paint();

        // This creates and draws an Image that is 1 pixel wide, 4 pixels tall with
        // the colors listed below.
        const pixels = Uint8Array.from([
            255,   0,   0, 255, // opaque red
              0, 255,   0, 255, // opaque green
              0,   0, 255, 255, // opaque blue
            255,   0, 255, 100, // transparent purple
        ]);
        const img = CanvasKit.MakeImage({
          'width': 1,
          'height': 4,
          'alphaType': CanvasKit.AlphaType.Unpremul,
          'colorType': CanvasKit.ColorType.RGBA_8888,
          'colorSpace': CanvasKit.ColorSpace.SRGB
        }, pixels, 4);
        canvas.drawImage(img, 1, 1, paint);

        const info = img.getImageInfo();
        expect(info).toEqual({
          'width': 1,
          'height': 4,
          'alphaType': CanvasKit.AlphaType.Unpremul,
          'colorType': CanvasKit.ColorType.RGBA_8888,
        });
        const cs = img.getColorSpace();
        expect(CanvasKit.ColorSpace.Equals(cs, CanvasKit.ColorSpace.SRGB)).toBeTruthy();

        cs.delete();
        img.delete();
        paint.delete();
    });

    gm('draw_atlas_with_builders', (canvas, fetchedByteBuffers) => {
        const atlas = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(atlas).toBeTruthy();

        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.Color(0, 0, 0, 0.8));

        // Allocate space for 4 rectangles.
        const srcs = CanvasKit.Malloc(Float32Array, 16);
        srcs.toTypedArray().set([
            0,   0, 256, 256, // LTRB
          256,   0, 512, 256,
            0, 256, 256, 512,
          256, 256, 512, 512
        ]);

        // Allocate space for 4 RSXForms.
        const dsts = CanvasKit.Malloc(Float32Array, 16);
        dsts.toTypedArray().set([
            0.5, 0,  20,  20, // scos, ssin, tx, ty
            0.5, 0, 300,  20,
            0.5, 0,  20, 300,
            0.5, 0, 300, 300
        ]);

        // Allocate space for 4 colors.
        const colors = new CanvasKit.Malloc(Uint32Array, 4);
        colors.toTypedArray().set([
          CanvasKit.ColorAsInt( 85, 170,  10, 128), // light green
          CanvasKit.ColorAsInt( 51,  51, 191, 128), // light blue
          CanvasKit.ColorAsInt(  0,   0,   0, 128),
          CanvasKit.ColorAsInt(256, 256, 256, 128),
        ]);

        canvas.drawAtlas(atlas, srcs, dsts, paint, CanvasKit.BlendMode.Modulate, colors);

        atlas.delete();
        CanvasKit.Free(srcs);
        CanvasKit.Free(dsts);
        CanvasKit.Free(colors);
        paint.delete();
    }, '/assets/mandrill_512.png');

    gm('draw_atlas_with_arrays', (canvas, fetchedByteBuffers) => {
        const atlas = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(atlas).toBeTruthy();

        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.Color(0, 0, 0, 0.8));

        const srcs = [
            0, 0,  8,  8,
            8, 0, 16,  8,
            0, 8,  8, 16,
            8, 8, 16, 16,
        ];

        const dsts = [
            10, 0,   0,   0,
            10, 0, 100,   0,
            10, 0,   0, 100,
            10, 0, 100, 100,
        ];

        const colors = Uint32Array.of(
            CanvasKit.ColorAsInt( 85, 170,  10, 128), // light green
            CanvasKit.ColorAsInt( 51,  51, 191, 128), // light blue
            CanvasKit.ColorAsInt(  0,   0,   0, 128),
            CanvasKit.ColorAsInt(255, 255, 255, 128),
        );

        // sampling for each of the 4 instances
        const sampling = [
            null,
            {B: 0, C: 0.5},
            {filter: CanvasKit.FilterMode.Nearest, mipmap: CanvasKit.MipmapMode.None},
            {filter: CanvasKit.FilterMode.Linear,  mipmap: CanvasKit.MipmapMode.Nearest},
        ];

        // positioning for each of the 4 instances
        const offset = [
            [0, 0], [256, 0], [0, 256], [256, 256]
        ];

        canvas.translate(20, 20);
        for (let i = 0; i < 4; ++i) {
            canvas.save();
            canvas.translate(offset[i][0], offset[i][1]);
            canvas.drawAtlas(atlas, srcs, dsts, paint, CanvasKit.BlendMode.SrcOver, colors,
                             sampling[i]);
            canvas.restore();
        }

        atlas.delete();
        paint.delete();
    }, '/assets/mandrill_16.png');

    gm('draw_patch', (canvas, fetchedByteBuffers) => {
        const image = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(image).toBeTruthy();

        const paint = new CanvasKit.Paint();
        const shader = image.makeShaderOptions(CanvasKit.TileMode.Clamp,
                                               CanvasKit.TileMode.Clamp,
                                               CanvasKit.FilterMode.Linear,
                                               CanvasKit.MipmapMode.None);
        const cubics = [0,0, 80,50, 160,50,
                        240,0, 200,80, 200,160,
                        240,240, 160,160, 80,240,
                        0,240, 50,160, 0,80];
         const colors = [CanvasKit.RED, CanvasKit.BLUE, CanvasKit.YELLOW, CanvasKit.CYAN];
         const texs = [0,0, 16,0, 16,16, 0,16];

         const params = [
             [  0,   0, colors, null, null,   CanvasKit.BlendMode.Dst],
             [256,   0, null,   texs, shader, null],
             [  0, 256, colors, texs, shader, null],
             [256, 256, colors, texs, shader, CanvasKit.BlendMode.Screen],
         ];
         for (const p of params) {
             paint.setShader(p[4]);
             canvas.save();
             canvas.translate(p[0], p[1]);
             canvas.drawPatch(cubics, p[2], p[3], p[5], paint);
             canvas.restore();
         }
        paint.delete();
    }, '/assets/mandrill_16.png');

    gm('draw_glyphs', (canvas) => {

        const paint = new CanvasKit.Paint();
        const font = new CanvasKit.Font(null, 24);
        paint.setAntiAlias(true);

        const DIM = 16; // row/col count for the grid
        const GAP = 32; // spacing between each glyph
        const glyphs = new Uint16Array(256);
        const positions = new Float32Array(256*2);
        for (let i = 0; i < 256; ++i) {
            glyphs[i] = i;
            positions[2*i+0] = (i%DIM) * GAP;
            positions[2*i+1] = Math.round(i/DIM) * GAP;
        }
        canvas.drawGlyphs(glyphs, positions, 16, 20, font, paint);

        font.delete();
        paint.delete();
    });

    gm('image_decoding_methods', async (canvas) => {

        const IMAGE_FILE_PATHS = [
            '/assets/brickwork-texture.jpg',
            '/assets/mandrill_512.png',
            '/assets/color_wheel.gif'
        ];

        let row = 1;
        // Test 4 different methods of decoding an image for each of the three images in
        // IMAGE_FILE_PATHS.
        // Resulting Images are drawn to visually show that all methods decode correctly.
        for (const imageFilePath of IMAGE_FILE_PATHS) {
            const response = await fetch(imageFilePath);
            const arrayBuffer = await response.arrayBuffer();
            // response.blob() is preferable when you don't need both a Blob *and* an ArrayBuffer.
            const blob = new Blob([ arrayBuffer ]);

            // Method 1 - decode TypedArray using wasm codecs:
            const skImage1 = CanvasKit.MakeImageFromEncoded(arrayBuffer);

            // Method 2 (slower and does not work in Safari) decode using ImageBitmap:
            const imageBitmap = await createImageBitmap(blob);
            // Testing showed that transferring an ImageBitmap to a canvas using the 'bitmaprenderer'
            // context and passing that canvas to CanvasKit.MakeImageFromCanvasImageSource() is
            // marginally faster than passing ImageBitmap to
            // CanvasKit.MakeImageFromCanvasImageSource() directly.
            const canvasBitmapElement = document.createElement('canvas');
            canvasBitmapElement.width = imageBitmap.width;
            canvasBitmapElement.height = imageBitmap.height;
            const ctxBitmap = canvasBitmapElement.getContext('bitmaprenderer');
            ctxBitmap.transferFromImageBitmap(imageBitmap);
            const skImage2 = CanvasKit.MakeImageFromCanvasImageSource(canvasBitmapElement);

            // Method 3 (slowest) decode using HTMLImageElement directly:
            const image = new Image();
            // Testing showed that waiting for a load event is faster than waiting on image.decode()
            // HTMLImageElement.decode() reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode
            const promise1 = new Promise((resolve) => image.addEventListener('load', resolve));
            image.src = imageFilePath;
            await promise1;
            const skImage3 = CanvasKit.MakeImageFromCanvasImageSource(image);

            // Method 4 (roundabout, but works if all you have is a Blob) decode from Blob using
            // HTMLImageElement:
            const imageObjectUrl = URL.createObjectURL( blob );
            const image2 = new Image();
            const promise2 = new Promise((resolve) => image2.addEventListener('load', resolve));
            image2.src = imageObjectUrl;
            await promise2;
            const skImage4 = CanvasKit.MakeImageFromCanvasImageSource(image2);

            // Draw decoded images
            const sourceRect = CanvasKit.XYWHRect(0, 0, 150, 150);
            canvas.drawImageRect(skImage1, sourceRect, CanvasKit.XYWHRect(0, row * 100, 90, 90), null, false);
            canvas.drawImageRect(skImage2, sourceRect, CanvasKit.XYWHRect(100, row * 100, 90, 90), null, false);
            canvas.drawImageRect(skImage3, sourceRect, CanvasKit.XYWHRect(200, row * 100, 90, 90), null, false);
            canvas.drawImageRect(skImage4, sourceRect, CanvasKit.XYWHRect(300, row * 100, 90, 90), null, false);

            row++;
        }
        // Label images with the method used to decode them
        const paint = new CanvasKit.Paint();
        const textFont = new CanvasKit.Font(null, 7);
        canvas.drawText('WASM Decoding', 0, 90, paint, textFont);
        canvas.drawText('ImageBitmap Decoding', 100, 90, paint, textFont);
        canvas.drawText('HTMLImageEl Decoding', 200, 90, paint, textFont);
        canvas.drawText('Blob Decoding', 300, 90, paint, textFont);
    });

    gm('sweep_gradient', (canvas) => {
        const paint = new CanvasKit.Paint();
        const shader = CanvasKit.Shader.MakeSweepGradient(
            100, 100, // X, Y coordinates
            [CanvasKit.GREEN, CanvasKit.BLUE],
            [0.0, 1.0],
            CanvasKit.TileMode.Clamp,
        );
        expect(shader).toBeTruthy('Could not make shader');

        paint.setShader(shader);
        canvas.drawPaint(paint);

        paint.delete();
        shader.delete();
    });

    // TODO(kjlubick): There's a lot of shared code between the gradient gms
    // It would be best to deduplicate that in a nice DAMP way.
    // Inspired by https://fiddle.skia.org/c/b29ce50a341510784ac7d5281586d076
    gm('linear_gradients', (canvas) => {
        canvas.scale(2, 2);
        const strokePaint = new CanvasKit.Paint();
        strokePaint.setStyle(CanvasKit.PaintStyle.Stroke);
        strokePaint.setColor(CanvasKit.BLACK);

        const paint = new CanvasKit.Paint();
        paint.setStyle(CanvasKit.PaintStyle.Fill);
        const transparentGreen = CanvasKit.Color(0, 255, 255, 0);

        const lgs = CanvasKit.Shader.MakeLinearGradient(
            [0, 0], [50, 100], // start and stop points
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror
        );
        paint.setShader(lgs);
        let r = CanvasKit.LTRBRect(0, 0, 100, 100);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const lgsPremul = CanvasKit.Shader.MakeLinearGradient(
            [100, 0], [150, 100], // start and stop points
            Uint32Array.of(
                CanvasKit.ColorAsInt(0, 255, 255, 0),
                CanvasKit.ColorAsInt(0, 0, 255, 255),
                CanvasKit.ColorAsInt(255, 0, 0, 255)),
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            null, // no local matrix
            1 // interpolate colors in premul
        );
        paint.setShader(lgsPremul);
        r = CanvasKit.LTRBRect(100, 0, 200, 100);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const lgs45 = CanvasKit.Shader.MakeLinearGradient(
            [0, 100], [50, 200], // start and stop points
            Float32Array.of(...transparentGreen, ...CanvasKit.BLUE, ...CanvasKit.RED),
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            CanvasKit.Matrix.rotated(Math.PI/4, 0, 100),
        );
        paint.setShader(lgs45);
        r = CanvasKit.LTRBRect(0, 100, 100, 200);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        // malloc'd color array
        const colors = CanvasKit.Malloc(Float32Array, 12);
        const typedColorsArray = colors.toTypedArray();
        typedColorsArray.set(transparentGreen, 0);
        typedColorsArray.set(CanvasKit.BLUE, 4);
        typedColorsArray.set(CanvasKit.RED, 8);
        const lgs45Premul = CanvasKit.Shader.MakeLinearGradient(
            [100, 100], [150, 200], // start and stop points
            typedColorsArray,
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            CanvasKit.Matrix.rotated(Math.PI/4, 100, 100),
            1 // interpolate colors in premul
        );
        CanvasKit.Free(colors);
        paint.setShader(lgs45Premul);
        r = CanvasKit.LTRBRect(100, 100, 200, 200);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        lgs.delete();
        lgs45.delete();
        lgsPremul.delete();
        lgs45Premul.delete();
        strokePaint.delete();
        paint.delete();
    });

    gm('radial_gradients', (canvas) => {
        canvas.scale(2, 2);
        const strokePaint = new CanvasKit.Paint();
        strokePaint.setStyle(CanvasKit.PaintStyle.Stroke);
        strokePaint.setColor(CanvasKit.BLACK);

        const paint = new CanvasKit.Paint();
        paint.setStyle(CanvasKit.PaintStyle.Fill);
        const transparentGreen = CanvasKit.Color(0, 255, 255, 0);

        const rgs = CanvasKit.Shader.MakeRadialGradient(
            [50, 50], 50, // center, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror
        );
        paint.setShader(rgs);
        let r = CanvasKit.LTRBRect(0, 0, 100, 100);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const rgsPremul = CanvasKit.Shader.MakeRadialGradient(
            [150, 50], 50, // center, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            null, // no local matrix
            1 // interpolate colors in premul
        );
        paint.setShader(rgsPremul);
        r = CanvasKit.LTRBRect(100, 0, 200, 100);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const rgsSkew = CanvasKit.Shader.MakeRadialGradient(
            [50, 150], 50, // center, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            CanvasKit.Matrix.skewed(0.5, 0, 100, 100),
            null, // color space
        );
        paint.setShader(rgsSkew);
        r = CanvasKit.LTRBRect(0, 100, 100, 200);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const rgsSkewPremul = CanvasKit.Shader.MakeRadialGradient(
            [150, 150], 50, // center, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            CanvasKit.Matrix.skewed(0.5, 0, 100, 100),
            1, // interpolate colors in premul
            null, // color space
        );
        paint.setShader(rgsSkewPremul);
        r = CanvasKit.LTRBRect(100, 100, 200, 200);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        rgs.delete();
        rgsPremul.delete();
        rgsSkew.delete();
        rgsSkewPremul.delete();
        strokePaint.delete();
        paint.delete();
    });

    gm('conical_gradients', (canvas) => {
        canvas.scale(2, 2);
        const strokePaint = new CanvasKit.Paint();
        strokePaint.setStyle(CanvasKit.PaintStyle.Stroke);
        strokePaint.setColor(CanvasKit.BLACK);

        const paint = new CanvasKit.Paint();
        paint.setStyle(CanvasKit.PaintStyle.Fill);
        paint.setAntiAlias(true);
        const transparentGreen = CanvasKit.Color(0, 255, 255, 0);

        const cgs = CanvasKit.Shader.MakeTwoPointConicalGradient(
            [80, 10], 15, // start, radius
            [10, 110], 60, // end, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            null, // no local matrix
        );
        paint.setShader(cgs);
        let r = CanvasKit.LTRBRect(0, 0, 100, 100);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const cgsPremul = CanvasKit.Shader.MakeTwoPointConicalGradient(
            [180, 10], 15, // start, radius
            [110, 110], 60, // end, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            null, // no local matrix
            1, // interpolate colors in premul
            null, // color space
        );
        paint.setShader(cgsPremul);
        r = CanvasKit.LTRBRect(100, 0, 200, 100);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const cgs45 = CanvasKit.Shader.MakeTwoPointConicalGradient(
            [80, 110], 15, // start, radius
            [10, 210], 60, // end, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            CanvasKit.Matrix.rotated(Math.PI/4, 0, 100),
            null, // color space
        );
        paint.setShader(cgs45);
        r = CanvasKit.LTRBRect(0, 100, 100, 200);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        const cgs45Premul = CanvasKit.Shader.MakeTwoPointConicalGradient(
            [180, 110], 15, // start, radius
            [110, 210], 60, // end, radius
            [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
            [0, 0.65, 1.0],
            CanvasKit.TileMode.Mirror,
            CanvasKit.Matrix.rotated(Math.PI/4, 100, 100),
            1, // interpolate colors in premul
            null, // color space
        );
        paint.setShader(cgs45Premul);
        r = CanvasKit.LTRBRect(100, 100, 200, 200);
        canvas.drawRect(r, paint);
        canvas.drawRect(r, strokePaint);

        cgs.delete();
        cgsPremul.delete();
        cgs45.delete();
        strokePaint.delete();
        paint.delete();
    });

    gm('blur_filters', (canvas) => {
        const pathUL = starPath(CanvasKit, 100, 100, 80);
        const pathBR = starPath(CanvasKit, 400, 300, 80);
        const paint = new CanvasKit.Paint();
        const textFont = new CanvasKit.Font(null, 24);

        canvas.drawText('Above: MaskFilter', 20, 220, paint, textFont);
        canvas.drawText('Right: ImageFilter', 20, 260, paint, textFont);

        paint.setColor(CanvasKit.BLUE);

        const blurMask = CanvasKit.MaskFilter.MakeBlur(CanvasKit.BlurStyle.Normal, 5, true);
        paint.setMaskFilter(blurMask);
        canvas.drawPath(pathUL, paint);

        const blurIF = CanvasKit.ImageFilter.MakeBlur(8, 1, CanvasKit.TileMode.Decal, null);
        paint.setImageFilter(blurIF);
        canvas.drawPath(pathBR, paint);

        pathUL.delete();
        pathBR.delete();
        paint.delete();
        blurMask.delete();
        blurIF.delete();
        textFont.delete();
    });

    gm('luma_filter', (canvas) => {
        const paint = new CanvasKit.Paint();
        paint.setAntiAlias(true);
        const lumaCF = CanvasKit.ColorFilter.MakeLuma();
        paint.setColor(CanvasKit.BLUE);
        paint.setColorFilter(lumaCF);
        canvas.drawCircle(256, 256, 256, paint);
        paint.delete();
        lumaCF.delete();
    });

    gm('combined_filters', (canvas, fetchedByteBuffers) => {
        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        const paint = new CanvasKit.Paint();
        paint.setAntiAlias(true);
        paint.setColor(CanvasKit.Color(0, 255, 0, 1.0));
        const redCF =  CanvasKit.ColorFilter.MakeBlend(
                CanvasKit.Color(255, 0, 0, 0.1), CanvasKit.BlendMode.SrcOver);
        const redIF = CanvasKit.ImageFilter.MakeColorFilter(redCF, null);
        const blurIF = CanvasKit.ImageFilter.MakeBlur(8, 0.2, CanvasKit.TileMode.Decal, null);
        const combined = CanvasKit.ImageFilter.MakeCompose(redIF, blurIF);

        // rotate 10 degrees centered on 200, 200
        const m = CanvasKit.Matrix.rotated(Math.PI/18, 200, 200);
        const filtering = { filter: CanvasKit.FilterMode.Linear };
        const rotated = CanvasKit.ImageFilter.MakeMatrixTransform(m, filtering, combined);
        paint.setImageFilter(rotated);

        //canvas.rotate(10, 200, 200);
        canvas.drawImage(img, 0, 0, paint);
        canvas.drawRect(CanvasKit.LTRBRect(5, 35, 45, 80), paint);

        paint.delete();
        redIF.delete();
        redCF.delete();
        blurIF.delete();
        combined.delete();
        rotated.delete();
        img.delete();
    }, '/assets/mandrill_512.png');

    gm('animated_filters', (canvas, fetchedByteBuffers) => {
        const img = CanvasKit.MakeAnimatedImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        img.decodeNextFrame();
        img.decodeNextFrame();
        const paint = new CanvasKit.Paint();
        paint.setAntiAlias(true);
        paint.setColor(CanvasKit.Color(0, 255, 0, 1.0));
        const redCF =  CanvasKit.ColorFilter.MakeBlend(
                CanvasKit.Color(255, 0, 0, 0.1), CanvasKit.BlendMode.SrcOver);
        const redIF = CanvasKit.ImageFilter.MakeColorFilter(redCF, null);
        const blurIF = CanvasKit.ImageFilter.MakeBlur(8, 0.2, CanvasKit.TileMode.Decal, null);
        const combined = CanvasKit.ImageFilter.MakeCompose(redIF, blurIF);
        paint.setImageFilter(combined);

        const frame = img.makeImageAtCurrentFrame();
        canvas.drawImage(frame, 100, 50, paint);

        paint.delete();
        redIF.delete();
        redCF.delete();
        blurIF.delete();
        combined.delete();
        frame.delete();
        img.delete();
    }, '/assets/flightAnim.gif');

    gm('drawImageVariants', (canvas, fetchedByteBuffers) => {
        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        canvas.scale(2, 2);
        const paint = new CanvasKit.Paint();
        const clipTo = (x, y) => {
            canvas.save();
            canvas.clipRect(CanvasKit.XYWHRect(x, y, 128, 128), CanvasKit.ClipOp.Intersect);
        };

        clipTo(0, 0);
        canvas.drawImage(img, 0, 0, paint);
        canvas.restore();

        clipTo(128, 0);
        canvas.drawImageCubic(img, 128, 0, 1/3, 1/3, null);
        canvas.restore();

        clipTo(0, 128);
        canvas.drawImageOptions(img, 0, 128, CanvasKit.FilterMode.Linear, CanvasKit.MipmapMode.None, null);
        canvas.restore();

        const mipImg = img.makeCopyWithDefaultMipmaps();
        clipTo(128, 128);
        canvas.drawImageOptions(mipImg, 128, 128,
                                CanvasKit.FilterMode.Nearest, CanvasKit.MipmapMode.Nearest, null);
        canvas.restore();

        paint.delete();
        mipImg.delete();
        img.delete();
    }, '/assets/mandrill_512.png');

    gm('drawImageRectVariants', (canvas, fetchedByteBuffers) => {
        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        const paint = new CanvasKit.Paint();
        const src = CanvasKit.XYWHRect(100, 100, 128, 128);
        canvas.drawImageRect(img, src, CanvasKit.XYWHRect(0, 0, 256, 256), paint);
        canvas.drawImageRectCubic(img, src, CanvasKit.XYWHRect(256, 0, 256, 256), 1/3, 1/3);
        canvas.drawImageRectOptions(img, src, CanvasKit.XYWHRect(0, 256, 256, 256),
                                    CanvasKit.FilterMode.Linear, CanvasKit.MipmapMode.None);
        const mipImg = img.makeCopyWithDefaultMipmaps();
        canvas.drawImageRectOptions(mipImg, src, CanvasKit.XYWHRect(256, 256, 256, 256),
                                CanvasKit.FilterMode.Nearest, CanvasKit.MipmapMode.Nearest);

        paint.delete();
        mipImg.delete();
        img.delete();
    }, '/assets/mandrill_512.png');

    gm('drawImage_skp', (canvas, fetchedByteBuffers) => {
        canvas.clear(CanvasKit.TRANSPARENT);
        const pic = CanvasKit.MakePicture(fetchedByteBuffers[0]);
        canvas.drawPicture(pic);
        // The asset below can be re-downloaded from
        // https://fiddle.skia.org/c/cbb8dee39e9f1576cd97c2d504db8eee
    }, '/assets/red_line.skp');

    it('can draw once using drawOnce utility method', (done) => {
        const surface = CanvasKit.MakeCanvasSurface('test');
        expect(surface).toBeTruthy('Could not make surface');
        if (!surface) {
            done();
            return;
        }

        const drawFrame = (canvas) => {
            const paint = new CanvasKit.Paint();
            paint.setStrokeWidth(1.0);
            paint.setAntiAlias(true);
            paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
            paint.setStyle(CanvasKit.PaintStyle.Stroke);
            const path = new CanvasKit.Path();
            path.moveTo(20, 5);
            path.lineTo(30, 20);
            path.lineTo(40, 10);
            canvas.drawPath(path, paint);
            path.delete();
            paint.delete();
            // surface hasn't been flushed yet (nor should we call flush
            // ourselves), so reportSurface would likely be blank if we
            // were to call it.
            done();
        };
        surface.drawOnce(drawFrame);
        // Reminder: drawOnce is async. In this test, we are just making
        // sure the drawOnce function is there and doesn't crash, so we can
        // just call done() when the frame is rendered.
    });

    it('can draw client-supplied dirty rects', (done) => {
        // dirty rects are only honored by software (CPU) canvases today.
        const surface = CanvasKit.MakeSWCanvasSurface('test');
        expect(surface).toBeTruthy('Could not make surface');
        if (!surface) {
            done();
            return;
        }

        const drawFrame = (canvas) => {
            const paint = new CanvasKit.Paint();
            paint.setStrokeWidth(1.0);
            paint.setAntiAlias(true);
            paint.setColor(CanvasKit.Color(0, 0, 0, 1.0));
            paint.setStyle(CanvasKit.PaintStyle.Stroke);
            const path = new CanvasKit.Path();
            path.moveTo(20, 5);
            path.lineTo(30, 20);
            path.lineTo(40, 10);
            canvas.drawPath(path, paint);
            path.delete();
            paint.delete();
            done();
        };
        const dirtyRect = CanvasKit.XYWHRect(10, 10, 15, 15);
        surface.drawOnce(drawFrame, dirtyRect);
        // We simply ensure that passing a dirty rect doesn't crash.
    });

    it('can use DecodeCache APIs', () => {
        const initialLimit = CanvasKit.getDecodeCacheLimitBytes();
        expect(initialLimit).toBeGreaterThan(1024 * 1024);

        const newLimit = 42 * 1024 * 1024;
        CanvasKit.setDecodeCacheLimitBytes(newLimit);
        expect(CanvasKit.getDecodeCacheLimitBytes()).toEqual(newLimit);

        // We cannot make any assumptions about this value,
        // so we just make sure it doesn't crash.
        CanvasKit.getDecodeCacheUsedBytes();
    });

    gm('combined_shaders', (canvas) => {
        const rShader = CanvasKit.Shader.Color(CanvasKit.Color(255, 0, 0, 1.0)); // deprecated
        const gShader = CanvasKit.Shader.MakeColor(CanvasKit.Color(0, 255, 0, 0.6));

        const rgShader = CanvasKit.Shader.MakeBlend(CanvasKit.BlendMode.SrcOver, rShader, gShader);

        const p = new CanvasKit.Paint();
        p.setShader(rgShader);
        canvas.drawPaint(p);

        rShader.delete();
        gShader.delete();
        rgShader.delete();
        p.delete();
    });

    it('exports consts correctly', () => {
        expect(CanvasKit.TRANSPARENT).toEqual(Float32Array.of(0, 0, 0, 0));
        expect(CanvasKit.RED).toEqual(Float32Array.of(1, 0, 0, 1));

        expect(CanvasKit.QUAD_VERB).toEqual(2);
        expect(CanvasKit.CONIC_VERB).toEqual(3);

        expect(CanvasKit.SaveLayerInitWithPrevious).toEqual(4);
        expect(CanvasKit.SaveLayerF16ColorType).toEqual(16);
    });

    it('can set color on a paint and get it as four floats', () => {
        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.Color4f(3.3, 2.2, 1.1, 0.5));
        expect(paint.getColor()).toEqual(Float32Array.of(3.3, 2.2, 1.1, 0.5));

        paint.setColorComponents(0.5, 0.6, 0.7, 0.8);
        expect(paint.getColor()).toEqual(Float32Array.of(0.5, 0.6, 0.7, 0.8));

        paint.setColorInt(CanvasKit.ColorAsInt(50, 100, 150, 200));
        let color = paint.getColor();
        expect(color.length).toEqual(4);
        expect(color[0]).toBeCloseTo(50/255, 5);  // Red
        expect(color[1]).toBeCloseTo(100/255, 5); // Green
        expect(color[2]).toBeCloseTo(150/255, 5); // Blue
        expect(color[3]).toBeCloseTo(200/255, 5); // Alpha

        paint.setColorInt(0xFF000000);
        expect(paint.getColor()).toEqual(Float32Array.of(0, 0, 0, 1.0));
    });

    gm('draw_shadow', (canvas) => {
        const lightRadius = 20;
        const lightPos = [500,500,20];
        const zPlaneParams = [0,0,1];
        const path = starPath(CanvasKit);
        const textFont = new CanvasKit.Font(null, 24);
        const textPaint = new CanvasKit.Paint();

        canvas.drawShadow(path, zPlaneParams, lightPos, lightRadius,
                          CanvasKit.BLACK, CanvasKit.MAGENTA, 0);
        canvas.drawText('Default Flags', 5, 250, textPaint, textFont);

        let bounds = CanvasKit.getShadowLocalBounds(CanvasKit.Matrix.identity(),
            path, zPlaneParams, lightPos, lightRadius, 0);
        expectTypedArraysToEqual(bounds, Float32Array.of(-3.64462, -12.67541, 245.50, 242.59164));

        bounds = CanvasKit.getShadowLocalBounds(CanvasKit.M44.identity(),
            path, zPlaneParams, lightPos, lightRadius, 0);
        expectTypedArraysToEqual(bounds, Float32Array.of(-3.64462, -12.67541, 245.50, 242.59164));

        // Test that the APIs accept Malloc objs and the Malloced typearray
        const mZPlane = CanvasKit.Malloc(Float32Array, 3);
        mZPlane.toTypedArray().set(zPlaneParams);
        const mLight = CanvasKit.Malloc(Float32Array, 3);
        const lightTA = mLight.toTypedArray();
        lightTA.set(lightPos);

        canvas.translate(250, 250);
        canvas.drawShadow(path, mZPlane, lightTA, lightRadius,
                          CanvasKit.BLACK, CanvasKit.MAGENTA,
                          CanvasKit.ShadowTransparentOccluder | CanvasKit.ShadowGeometricOnly | CanvasKit.ShadowDirectionalLight);
        canvas.drawText('All Flags', 5, 250, textPaint, textFont);

        const outBounds = new Float32Array(4);
        CanvasKit.getShadowLocalBounds(CanvasKit.Matrix.rotated(Math.PI / 6),
            path, mZPlane, mLight, lightRadius,
            CanvasKit.ShadowTransparentOccluder | CanvasKit.ShadowGeometricOnly | CanvasKit.ShadowDirectionalLight,
            outBounds);
        expectTypedArraysToEqual(outBounds, Float32Array.of(-31.6630249, -15.24227, 245.5, 252.94101));

        CanvasKit.Free(mZPlane);
        CanvasKit.Free(mLight);

        path.delete();
        textFont.delete();
        textPaint.delete();
    });

    gm('fractal_noise_shader', (canvas) => {
        const shader = CanvasKit.Shader.MakeFractalNoise(0.1, 0.05, 2, 0, 0, 0);
        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.BLACK);
        paint.setShader(shader);
        canvas.drawPaint(paint);
        paint.delete();
        shader.delete();
    });

    gm('turbulance_shader', (canvas) => {
        const shader = CanvasKit.Shader.MakeTurbulence(0.1, 0.05, 2, 117, 0, 0);
        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.BLACK);
        paint.setShader(shader);
        canvas.drawPaint(paint);
        paint.delete();
        shader.delete();
    });

    gm('fractal_noise_tiled_shader', (canvas) => {
        const shader = CanvasKit.Shader.MakeFractalNoise(0.1, 0.05, 2, 0, 80, 80);
        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.BLACK);
        paint.setShader(shader);
        canvas.drawPaint(paint);
        paint.delete();
        shader.delete();
    });

    gm('turbulance_tiled_shader', (canvas) => {
        const shader = CanvasKit.Shader.MakeTurbulence(0.1, 0.05, 2, 117, 80, 80);
        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.BLACK);
        paint.setShader(shader);
        canvas.drawPaint(paint);
        paint.delete();
        shader.delete();
    });

    describe('ColorSpace Support', () => {
        it('Creates an SRGB 8888 surface by default', () => {
            const colorSpace = CanvasKit.ColorSpace.SRGB;
            const surface = CanvasKit.MakeCanvasSurface('test');
            expect(surface).toBeTruthy('Could not make surface');
            let info = surface.imageInfo();
            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_8888);
            expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
                .toBeTruthy("Surface not created with correct color space.");

            const mObj = CanvasKit.Malloc(Uint8Array, CANVAS_WIDTH * CANVAS_HEIGHT * 4);
            mObj.toTypedArray()[0] = 127; // sentinel value. Should be overwritten by readPixels.
            const canvas = surface.getCanvas();
            canvas.clear(CanvasKit.TRANSPARENT);
            const pixels = canvas.readPixels(0, 0, {
                width: CANVAS_WIDTH,
                height: CANVAS_HEIGHT,
                colorType: CanvasKit.ColorType.RGBA_8888,
                alphaType: CanvasKit.AlphaType.Unpremul,
                colorSpace: colorSpace
            }, mObj, 4 * CANVAS_WIDTH);
            expect(pixels).toBeTruthy('Could not read pixels from surface');
            expect(pixels[0] !== 127).toBeTruthy();
            expect(pixels[0]).toEqual(mObj.toTypedArray()[0]);
            CanvasKit.Free(mObj);
            surface.delete();
        });
        it('Can create an SRGB 8888 surface', () => {
            const colorSpace = CanvasKit.ColorSpace.SRGB;
            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.ColorSpace.SRGB);
            expect(surface).toBeTruthy('Could not make surface');
            let info = surface.imageInfo();
            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_8888);
            expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
                .toBeTruthy("Surface not created with correct color space.");

            const mObj = CanvasKit.Malloc(Uint8Array, CANVAS_WIDTH * CANVAS_HEIGHT * 4);
            mObj.toTypedArray()[0] = 127; // sentinel value. Should be overwritten by readPixels.
            const canvas = surface.getCanvas();
            canvas.clear(CanvasKit.TRANSPARENT);
            const pixels = canvas.readPixels(0, 0, {
                width: CANVAS_WIDTH,
                height: CANVAS_HEIGHT,
                colorType: CanvasKit.ColorType.RGBA_8888,
                alphaType: CanvasKit.AlphaType.Unpremul,
                colorSpace: colorSpace
            }, mObj, 4 * CANVAS_WIDTH);
            expect(pixels).toBeTruthy('Could not read pixels from surface');
            expect(pixels[0] !== 127).toBeTruthy();
            expect(pixels[0]).toEqual(mObj.toTypedArray()[0]);
            CanvasKit.Free(mObj);
            surface.delete();
        });
        it('Can create a Display P3 surface', () => {
            const colorSpace = CanvasKit.ColorSpace.DISPLAY_P3;
            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.ColorSpace.DISPLAY_P3);
            expect(surface).toBeTruthy('Could not make surface');
            if (!surface.reportBackendTypeIsGPU()) {
                console.log('Not expecting color space support in cpu backed suface.');
                return;
            }
            let info = surface.imageInfo();
            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_F16);
            expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
                .toBeTruthy("Surface not created with correct color space.");

            const pixels = surface.getCanvas().readPixels(0, 0, {
                width: CANVAS_WIDTH,
                height: CANVAS_HEIGHT,
                colorType: CanvasKit.ColorType.RGBA_F16,
                alphaType: CanvasKit.AlphaType.Unpremul,
                colorSpace: colorSpace
            });
            expect(pixels).toBeTruthy('Could not read pixels from surface');
        });
        it('Can create an Adobe RGB surface', () => {
            const colorSpace = CanvasKit.ColorSpace.ADOBE_RGB;
            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.ColorSpace.ADOBE_RGB);
            expect(surface).toBeTruthy('Could not make surface');
            if (!surface.reportBackendTypeIsGPU()) {
                console.log('Not expecting color space support in cpu backed surface.');
                return;
            }
            let info = surface.imageInfo();
            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_F16);
            expect(CanvasKit.ColorSpace.Equals(info.colorSpace, colorSpace))
                .toBeTruthy("Surface not created with correct color space.");

            const pixels = surface.getCanvas().readPixels(0, 0, {
                width: CANVAS_WIDTH,
                height: CANVAS_HEIGHT,
                colorType: CanvasKit.ColorType.RGBA_F16,
                alphaType: CanvasKit.AlphaType.Unpremul,
                colorSpace: colorSpace
            });
            expect(pixels).toBeTruthy('Could not read pixels from surface');
        });

        it('combine draws from several color spaces', () => {
            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.ColorSpace.ADOBE_RGB);
            expect(surface).toBeTruthy('Could not make surface');
            if (!surface.reportBackendTypeIsGPU()) {
                console.log('Not expecting color space support in cpu backed suface.');
                return;
            }
            const canvas = surface.getCanvas();

            let paint = new CanvasKit.Paint();
            paint.setColor(CanvasKit.RED, CanvasKit.ColorSpace.ADOBE_RGB);
            canvas.drawPaint(paint);
            paint.setColor(CanvasKit.RED, CanvasKit.ColorSpace.DISPLAY_P3); // 93.7 in adobeRGB
            canvas.drawRect(CanvasKit.LTRBRect(200, 0, 400, 600), paint);
            paint.setColor(CanvasKit.RED, CanvasKit.ColorSpace.SRGB); // 85.9 in adobeRGB
            canvas.drawRect(CanvasKit.LTRBRect(400, 0, 600, 600), paint);

            // this test paints three bands of red, each the maximum red that a color space supports.
            // They are each represented by skia by some color in the Adobe RGB space of the surface,
            // as floats between 0 and 1.

            // TODO(nifong) readpixels and verify correctness after f32 readpixels bug is fixed
        });
    }); // end describe('ColorSpace Support')

    describe('DOMMatrix support', () => {
        gm('sweep_gradient_dommatrix', (canvas) => {
            const paint = new CanvasKit.Paint();
            const shader = CanvasKit.Shader.MakeSweepGradient(
                100, 100, // x y coordinates
                [CanvasKit.GREEN, CanvasKit.BLUE],
                [0.0, 1.0],
                CanvasKit.TileMode.Clamp,
                new DOMMatrix().translate(-10, 100),
            );
            expect(shader).toBeTruthy('Could not make shader');

            paint.setShader(shader);
            canvas.drawPaint(paint);

            paint.delete();
            shader.delete();
        });

        const radiansToDegrees = (rad) => {
           return (rad / Math.PI) * 180;
        };

        // this should draw the same as concat_with4x4_canvas
        gm('concat_dommatrix', (canvas) => {
            const path = starPath(CanvasKit, CANVAS_WIDTH/2, CANVAS_HEIGHT/2);
            const paint = new CanvasKit.Paint();
            paint.setAntiAlias(true);
            canvas.concat(new DOMMatrix().translate(CANVAS_WIDTH/2, 0, 0));
            canvas.concat(new DOMMatrix().rotateAxisAngle(1, 0, 0, radiansToDegrees(Math.PI/3)));
            canvas.concat(new DOMMatrix().rotateAxisAngle(0, 1, 0, radiansToDegrees(Math.PI/4)));
            canvas.concat(new DOMMatrix().rotateAxisAngle(0, 0, 1, radiansToDegrees(Math.PI/16)));
            canvas.concat(new DOMMatrix().translate(-CANVAS_WIDTH/2, 0, 0));

            const localMatrix = canvas.getLocalToDevice();
            expect4x4MatricesToMatch([
             0.693519, -0.137949,  0.707106,   91.944030,
             0.698150,  0.370924, -0.612372, -209.445297,
            -0.177806,  0.918359,  0.353553,   53.342029,
             0       ,  0       ,  0       ,    1       ], localMatrix);

            // Draw some stripes to help the eye detect the turn
            const stripeWidth = 10;
            paint.setColor(CanvasKit.BLACK);
            for (let i = 0; i < CANVAS_WIDTH; i += 2*stripeWidth) {
                canvas.drawRect(CanvasKit.LTRBRect(i, 0, i + stripeWidth, CANVAS_HEIGHT), paint);
            }

            paint.setColor(CanvasKit.YELLOW);
            canvas.drawPath(path, paint);
            paint.delete();
            path.delete();
        });

        it('throws if an invalid matrix is passed in', () => {
            let threw;
            try {
                CanvasKit.ImageFilter.MakeMatrixTransform(
                  'invalid matrix value',
                  { filter: CanvasKit.FilterMode.Linear },
                  null
                )
                threw = false;
            } catch (e) {
                threw = true;
            }
            expect(threw).toBeTrue();
        });
    }); // end describe('DOMMatrix support')

    it('can call subarray on a Malloced object', () => {
        const mThings = CanvasKit.Malloc(Float32Array, 6);
        mThings.toTypedArray().set([4, 5, 6, 7, 8, 9]);
        expectTypedArraysToEqual(Float32Array.of(4, 5, 6, 7, 8, 9), mThings.toTypedArray());
        expectTypedArraysToEqual(Float32Array.of(4, 5, 6, 7, 8, 9), mThings.subarray(0));
        expectTypedArraysToEqual(Float32Array.of(7, 8, 9), mThings.subarray(3));
        expectTypedArraysToEqual(Float32Array.of(7), mThings.subarray(3, 4));
        expectTypedArraysToEqual(Float32Array.of(7, 8), mThings.subarray(3, 5));

        // mutations on the subarray affect the entire array (because they are backed by the
        // same memory)
        mThings.subarray(3)[0] = 100.5;
        expectTypedArraysToEqual(Float32Array.of(4, 5, 6, 100.5, 8, 9), mThings.toTypedArray());
        CanvasKit.Free(mThings);
    });

    function expectTypedArraysToEqual(expected, actual) {
        expect(expected.constructor.name).toEqual(actual.constructor.name);
        expect(expected.length).toEqual(actual.length);
        for (let i = 0; i < expected.length; i++) {
            expect(expected[i]).toBeCloseTo(actual[i], 5, `element ${i}`);
        }
    }

    it('can create a RasterDirectSurface', () => {
        // Make enough space for a 5x5 8888 surface (4 bytes for R, G, B, A)
        const rdsData = CanvasKit.Malloc(Uint8Array, 5 * 5 * 4);
        const surface = CanvasKit.MakeRasterDirectSurface({
            'width': 5,
            'height': 5,
            'colorType': CanvasKit.ColorType.RGBA_8888,
            'alphaType': CanvasKit.AlphaType.Premul,
            'colorSpace': CanvasKit.ColorSpace.SRGB,
        }, rdsData, 5 * 4);

        surface.getCanvas().clear(CanvasKit.Color(200, 100, 0, 0.8));
        const pixels = rdsData.toTypedArray();
        // Check that the first pixels colors are right.
        expect(pixels[0]).toEqual(160); // red (premul, 0.8 * 200)
        expect(pixels[1]).toEqual(80); // green (premul, 0.8 * 100)
        expect(pixels[2]).toEqual(0); // blue (premul, not that it matters)
        expect(pixels[3]).toEqual(204); // alpha (0.8 * 255)
        surface.delete();
        CanvasKit.Free(rdsData);
    });

    gm('makeImageFromTextureSource_TypedArray', (canvas, _, surface) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }
        // This creates and draws an Unpremul Image that is 1 pixel wide, 4 pixels tall with
        // the colors listed below.
        const pixels = Uint8Array.from([
            255,   0,   0, 255, // opaque red
              0, 255,   0, 255, // opaque green
              0,   0, 255, 255, // opaque blue
            255,   0, 255, 100, // transparent purple
        ]);
        const img = surface.makeImageFromTextureSource(pixels, {
              'width': 1,
              'height': 4,
              'alphaType': CanvasKit.AlphaType.Unpremul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
            });
        canvas.drawImage(img, 1, 1, null);

        const info = img.getImageInfo();
        expect(info).toEqual({
          'width': 1,
          'height': 4,
          'alphaType': CanvasKit.AlphaType.Unpremul,
          'colorType': CanvasKit.ColorType.RGBA_8888,
        });
        const cs = img.getColorSpace();
        expect(CanvasKit.ColorSpace.Equals(cs, CanvasKit.ColorSpace.SRGB)).toBeTruthy();

        cs.delete();
        img.delete();
    });

    gm('makeImageFromTextureSource_PremulTypedArray', (canvas, _, surface) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }
        // This creates and draws an Unpremul Image that is 1 pixel wide, 4 pixels tall with
        // the colors listed below.
        const pixels = Uint8Array.from([
            255,   0,   0, 255, // opaque red
              0, 255,   0, 255, // opaque green
              0,   0, 255, 255, // opaque blue
            100,   0, 100, 100, // transparent purple
        ]);
        const img = surface.makeImageFromTextureSource(pixels, {
              'width': 1,
              'height': 4,
              'alphaType': CanvasKit.AlphaType.Premul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
            }, /*srcIsPremul = */true);
        canvas.drawImage(img, 1, 1, null);

        const info = img.getImageInfo();
        expect(info).toEqual({
          'width': 1,
          'height': 4,
          'alphaType': CanvasKit.AlphaType.Premul,
          'colorType': CanvasKit.ColorType.RGBA_8888,
        });
        img.delete();
    });

    gm('makeImageFromTextureSource_imgElement', (canvas, _, surface) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }
        // This makes an offscreen <img> with the provided source.
        const imageEle = new Image();
        imageEle.src = '/assets/mandrill_512.png';

        // We need to wait until the image is loaded before the texture can use it. For good
        // measure, we also wait for it to be decoded.
        return imageEle.decode().then(() => {
            const img = surface.makeImageFromTextureSource(imageEle);
            // Make sure the texture is properly written to and Skia does not draw over it by
            // by accident.
            canvas.clear(CanvasKit.RED);
            surface.updateTextureFromSource(img, imageEle);
            canvas.drawImage(img, 0, 0, null);

            const info = img.getImageInfo();
            expect(info).toEqual({
              'width': 512, // width and height should be derived from the image.
              'height': 512,
              'alphaType': CanvasKit.AlphaType.Unpremul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
            });
            img.delete();
        });
    });

    gm('MakeLazyImageFromTextureSource_imgElement', (canvas) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }
        // This makes an offscreen <img> with the provided source.
        const imageEle = new Image();
        imageEle.src = '/assets/mandrill_512.png';

        // We need to wait until the image is loaded before the texture can use it. For good
        // measure, we also wait for it to be decoded.
        return imageEle.decode().then(() => {
            const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);
            canvas.drawImage(img, 5, 5, null);

            const info = img.getImageInfo();
            expect(info).toEqual({
              'width': 512, // width and height should be derived from the image.
              'height': 512,
              'alphaType': CanvasKit.AlphaType.Unpremul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
            });
            img.delete();
        });
    });

    gm('MakeLazyImageFromTextureSource_imageInfo', (canvas) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }
        // This makes an offscreen <img> with the provided source.
        // flutter_106433.png has transparent pixels, which is required to test the Premul
        // behavior. https://github.com/flutter/flutter/issues/106433
        const imageEle = new Image();
        imageEle.src = '/assets/flutter_106433.png';

        // We need to wait until the image is loaded before the texture can use it. For good
        // measure, we also wait for it to be decoded.
        return imageEle.decode().then(() => {
            const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle, {
              'width': 183,
              'height': 180,
              'alphaType': CanvasKit.AlphaType.Premul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
            });
            canvas.clear(CanvasKit.RED);
            canvas.drawImage(img, 20, 20, null);

            img.delete();
        });
    });

    gm('MakeLazyImageFromTextureSource_readPixels', (canvas) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }

        // This makes an offscreen <img> with the provided source.
        const imageEle = new Image();
        imageEle.src = '/assets/mandrill_512.png';

        // We need to wait until the image is loaded before the texture can use it. For good
        // measure, we also wait for it to be decoded.
        return imageEle.decode().then(() => {
            const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);
            const imgInfo = {
              'width': 512,
              'height': 512,
              'alphaType': CanvasKit.AlphaType.Unpremul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
              'colorSpace': CanvasKit.ColorSpace.SRGB
            };
            const src = CanvasKit.XYWHRect(0, 0, 512, 512);
            const pixels = img.readPixels(0, 0, imgInfo);
            expect(pixels).toBeTruthy();
            // Make a new image from reading the pixels of the texture-backed image,
            // then draw that new image to a canvas and verify it works.
            const newImg = CanvasKit.MakeImage(imgInfo, pixels, 512 * 4);
            canvas.drawImageRectCubic(newImg, src, CanvasKit.XYWHRect(256, 0, 256, 256), 1/3, 1/3);
            canvas.drawImageRectCubic(img, src, CanvasKit.XYWHRect(0, 0, 256, 256), 1/3, 1/3);

            const font = new CanvasKit.Font(null, 20);
            const paint = new CanvasKit.Paint();
            paint.setColor(CanvasKit.BLACK);
            canvas.drawText('original', 100, 280, paint, font);
            canvas.drawText('readPixels', 356, 280, paint, font);

            img.delete();
            newImg.delete();
            font.delete();
            paint.delete();
        });
    });

    // This tests the process of turning a SkPicture that contains texture-backed images into
    // an SkImage that can be drawn on a different surface. It does so by reading the pixels
    // back and creating a new SkImage from them.
    gm('MakeLazyImageFromTextureSource_makeImageSnapshot', (canvas) => {
        if (!CanvasKit.gpu) {
            return SHOULD_SKIP;
        }

        // This makes an offscreen <img> with the provided source.
        const imageEle = new Image();
        imageEle.src = '/assets/mandrill_512.png';

        // We need to wait until the image is loaded before the texture can use it. For good
        // measure, we also wait for it to be decoded.
        return imageEle.decode().then(() => {
            const img = CanvasKit.MakeLazyImageFromTextureSource(imageEle);

            const recorder = new CanvasKit.PictureRecorder();
            const recorderCanvas = recorder.beginRecording();
            const src = CanvasKit.XYWHRect(0, 0, 512, 512);
            recorderCanvas.drawImageRectCubic(img, src, src, 1/3, 1/3);
            const picture = recorder.finishRecordingAsPicture();

            // Draw the picture to an off-screen canvas
            const glCanvas = document.createElement("canvas");
            glCanvas.width = 512;
            glCanvas.height = 512;
            const surface = CanvasKit.MakeWebGLCanvasSurface(glCanvas);
            const surfaceCanvas = surface.getCanvas();
            surfaceCanvas.drawPicture(picture);
            const font = new CanvasKit.Font(null, 20);
            const paint = new CanvasKit.Paint();
            paint.setColor(CanvasKit.WHITE);
            // Put some text onto this surface, just to verify the readback works.
            surfaceCanvas.drawText('This is on the picture', 10, 50, paint, font);
            // Then read the surface as an image and read the pixels from there.
            const imgFromPicture = surface.makeImageSnapshot();
            const imgInfo = {
              'width': 512,
              'height': 512,
              'alphaType': CanvasKit.AlphaType.Unpremul,
              'colorType': CanvasKit.ColorType.RGBA_8888,
              'colorSpace': CanvasKit.ColorSpace.SRGB
            };
            const pixels = imgFromPicture.readPixels(0, 0, imgInfo);
            expect(pixels).toBeTruthy();
            // Create a new image with those pixels, which can be drawn on the test surface.
            const bitmapImg = CanvasKit.MakeImage(imgInfo, pixels, 512 * 4);

            canvas.drawImageRectCubic(bitmapImg, src, CanvasKit.XYWHRect(256, 0, 256, 256), 1/3, 1/3);
            canvas.drawImageRectCubic(img, src, CanvasKit.XYWHRect(0, 0, 256, 256), 1/3, 1/3);

            paint.setColor(CanvasKit.BLACK);
            canvas.drawText('original', 100, 280, paint, font);
            canvas.drawText('makeImageSnapshot', 290, 280, paint, font);

            img.delete();
            imgFromPicture.delete();
            bitmapImg.delete();
            picture.delete();
            surface.delete();
            font.delete();
            paint.delete();
            recorder.delete();
        });
    });


    it('encodes images in three different ways', () => {
        // This creates and draws an Image that is 1 pixel wide, 4 pixels tall with
        // the colors listed below.
        const pixels = Uint8Array.from([
            255,   0,   0, 255, // opaque red
              0, 255,   0, 255, // opaque green
              0,   0, 255, 255, // opaque blue
            255,   0, 255, 100, // transparent purple
        ]);
        const img = CanvasKit.MakeImage({
          'width': 1,
          'height': 4,
          'alphaType': CanvasKit.AlphaType.Unpremul,
          'colorType': CanvasKit.ColorType.RGBA_8888,
          'colorSpace': CanvasKit.ColorSpace.SRGB
        }, pixels, 4);

        let bytes = img.encodeToBytes(CanvasKit.ImageFormat.PNG, 100);
        assertBytesDecodeToImage(bytes, 'png');
        bytes = img.encodeToBytes(CanvasKit.ImageFormat.JPEG, 90);
        assertBytesDecodeToImage(bytes, 'jpeg');
        bytes = img.encodeToBytes(CanvasKit.ImageFormat.WEBP, 100);
        assertBytesDecodeToImage(bytes, 'webp');

        img.delete();
    });

    function assertBytesDecodeToImage(bytes, format) {
        expect(bytes).toBeTruthy('null output for ' + format);
        const img = CanvasKit.MakeImageFromEncoded(bytes);
        expect(img).toBeTruthy('Could not decode result from '+ format);
        img && img.delete();
    }

    it('can make a render target', () => {
        if (!CanvasKit.gpu) {
            return;
        }
        const canvas = document.getElementById('test');
        const context = CanvasKit.GetWebGLContext(canvas);
        const grContext = CanvasKit.MakeGrContext(context);
        expect(grContext).toBeTruthy();
        const target = CanvasKit.MakeRenderTarget(grContext, 100, 100);
        expect(target).toBeTruthy();
        target.delete();
        grContext.delete();
    });

    gm('PathEffect_MakePath1D', (canvas) => {
        // Based off //docs/examples/skpaint_path_1d_path_effect.cpp

        const path = new CanvasKit.Path();
        path.addOval(CanvasKit.XYWHRect(0, 0, 16, 6));

        const paint = new CanvasKit.Paint();
        const effect = CanvasKit.PathEffect.MakePath1D(
           path, 32, 0, CanvasKit.Path1DEffect.Rotate,
        );
        paint.setColor(CanvasKit.Color(94, 53, 88, 1)); // deep purple
        paint.setPathEffect(effect);
        paint.setAntiAlias(true);
        canvas.drawCircle(128, 128, 122, paint);

        path.delete();
        effect.delete();
        paint.delete();
    });

    gm('Can_Interpolate_Path', (canvas) => {
        const paint = new CanvasKit.Paint();
        paint.setAntiAlias(true);
        paint.setStyle(CanvasKit.PaintStyle.Stroke);
        paint.setStrokeWidth(2);
        const path = new CanvasKit.Path()
        const path2 = new CanvasKit.Path();
        const path3 = new CanvasKit.Path();
        path3.addCircle(30, 30, 10);
        path.moveTo(20, 20);
        path.lineTo(40, 40);
        path.lineTo(20, 40);
        path.lineTo(40, 20);
        path.close();
        path2.addRect([20, 20, 40, 40]);
        path2.transform(CanvasKit.Matrix.translated(40, 0));
        const canInterpolate1 = CanvasKit.Path.CanInterpolate(path, path2);
        expect(canInterpolate1).toBe(true);
        const canInterpolate2 = CanvasKit.Path.CanInterpolate(path, path3);
        expect(canInterpolate2).toBe(false);
        canvas.drawPath(path, paint);
        canvas.drawPath(path2, paint);
        path3.transform(CanvasKit.Matrix.translated(80, 0));
        canvas.drawPath(path3, paint);
        path.delete();
        path2.delete();
        path3.delete();
        paint.delete();
    });

    gm('Interpolate_Paths', (canvas) => {
        const paint = new CanvasKit.Paint();
        paint.setAntiAlias(true);
        paint.setStyle(CanvasKit.PaintStyle.Stroke);
        paint.setStrokeWidth(2);
        const path = new CanvasKit.Path()
        const path2 = new CanvasKit.Path();
        path.moveTo(20, 20);
        path.lineTo(40, 40);
        path.lineTo(20, 40);
        path.lineTo(40, 20);
        path.close();
        path2.addRect([20, 20, 40, 40]);
        for (let i = 0; i <= 1; i += 1.0 / 6) {
          const interp = CanvasKit.Path.MakeFromPathInterpolation(path, path2, i);
          canvas.drawPath(interp, paint);
          interp.delete();
          canvas.translate(30, 0);
        }
        path.delete();
        path2.delete();
        paint.delete();
    });

    gm('Draw_Circle', (canvas) => {
        const paint = new CanvasKit.Paint();
        paint.setColor(CanvasKit.Color(59, 53, 94, 1));
        const path = new CanvasKit.Path();
        path.moveTo(256, 256);
        path.addCircle(256, 256, 256);
        canvas.drawPath(path, paint);
        path.delete();
        paint.delete();
    });

    gm('PathEffect_MakePath2D', (canvas) => {
        // Based off //docs/examples/skpaint_path_2d_path_effect.cpp

        const path = new CanvasKit.Path();
        path.moveTo(20, 30);
        const points = [20, 20, 10, 30, 0, 30, 20, 10, 30, 10, 40, 0, 40, 10,
                        50, 10, 40, 20, 40, 30, 20, 50, 20, 40, 30, 30, 20, 30];
        for (let i = 0; i < points.length; i += 2) {
            path.lineTo(points[i], points[i+1]);
        }

        const paint = new CanvasKit.Paint();
        const effect = CanvasKit.PathEffect.MakePath2D(
          CanvasKit.Matrix.scaled(40, 40), path
        );
        paint.setColor(CanvasKit.Color(53, 94, 59, 1)); // hunter green
        paint.setPathEffect(effect);
        paint.setAntiAlias(true);
        canvas.drawRect(CanvasKit.LTRBRect(-20, -20, 300, 300), paint);

        path.delete();
        effect.delete();
        paint.delete();
    });

    gm('PathEffect_MakeLine2D', (canvas) => {
        // Based off //docs/examples/skpaint_line_2d_path_effect.cpp

        const lattice = CanvasKit.Matrix.multiply(
            CanvasKit.Matrix.scaled(8, 8),
            CanvasKit.Matrix.rotated(Math.PI / 6),
        );

        const paint = new CanvasKit.Paint();
        const effect = CanvasKit.PathEffect.MakeLine2D(
          2, lattice,
        );
        paint.setColor(CanvasKit.Color(59, 53, 94, 1)); // dark blue
        paint.setPathEffect(effect);
        paint.setAntiAlias(true);
        canvas.drawRect(CanvasKit.LTRBRect(20, 20, 300, 300), paint);

        effect.delete();
        paint.delete();
    });

    gm('ImageFilter_MakeBlend', (canvas) => {
        const redCF = CanvasKit.ColorFilter.MakeBlend(
                CanvasKit.Color(255, 0, 0, 0.4), CanvasKit.BlendMode.SrcOver);
        const redIF = CanvasKit.ImageFilter.MakeColorFilter(redCF, null);
        const blueCF = CanvasKit.ColorFilter.MakeBlend(
                CanvasKit.Color(0, 0, 255, 0.7), CanvasKit.BlendMode.SrcOver);
        const blueIF = CanvasKit.ImageFilter.MakeColorFilter(blueCF, null);

        const BOX_SIZE = 100;
        const SWATCH_SIZE = 80;
        const MARGIN = (BOX_SIZE - SWATCH_SIZE) / 2;
        const COLS_PER_ROW = CANVAS_WIDTH / BOX_SIZE;
        const blends = ['Clear', 'Src', 'Dst', 'SrcOver', 'DstOver', 'SrcIn', 'DstIn', 'SrcOut',
                        'DstOut', 'SrcATop', 'DstATop', 'Xor', 'Plus', 'Modulate', 'Screen',
                        'Overlay', 'Darken', 'Lighten', 'ColorDodge', 'ColorBurn', 'HardLight',
                        'SoftLight', 'Difference', 'Exclusion', 'Multiply', 'Hue', 'Saturation',
                        'Color', 'Luminosity'];
        const paint = new CanvasKit.Paint();
        // Put a dark green on the paint itself.
        paint.setColor(CanvasKit.Color(0, 255, 0, 0.2));

        const font = new CanvasKit.Font(null, 10);
        const textPaint = new CanvasKit.Paint();
        textPaint.setColor(CanvasKit.BLACK);

        for (let i = 0; i < blends.length; i++) {
            const filter = CanvasKit.ImageFilter.MakeBlend(CanvasKit.BlendMode[blends[i]],
                                                           redIF, blueIF);
            const col = i % COLS_PER_ROW, row = Math.floor(i / COLS_PER_ROW);

            paint.setImageFilter(filter);
            canvas.save();

            canvas.clipRect(CanvasKit.XYWHRect(col * BOX_SIZE + MARGIN, row * BOX_SIZE + MARGIN, SWATCH_SIZE, SWATCH_SIZE),
                            CanvasKit.ClipOp.Intersect);
            canvas.drawPaint(paint);
            canvas.restore();

            canvas.drawText(blends[i], col * BOX_SIZE + 30, row * BOX_SIZE + BOX_SIZE, textPaint, font);
            filter.delete();
        }
        redCF.delete();
        redIF.delete();
        blueCF.delete();
        blueIF.delete();
        paint.delete();
    });

    gm('ImageFilter_MakeDilate', (canvas, fetchedByteBuffers) => {

        const paint = new CanvasKit.Paint();
        const dilate = CanvasKit.ImageFilter.MakeDilate(2, 10, null);
        paint.setImageFilter(dilate);

        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        canvas.drawImage(img, 10, 20, paint);

        img.delete();
        paint.delete();
        dilate.delete();
    }, '/assets/mandrill_512.png');

    gm('ImageFilter_MakeErode', (canvas, fetchedByteBuffers) => {

        const paint = new CanvasKit.Paint();
        const erode = CanvasKit.ImageFilter.MakeErode(2, 10, null);
        paint.setImageFilter(erode);

        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        canvas.drawImage(img, 10, 20, paint);

        img.delete();
        paint.delete();
        erode.delete();
    }, '/assets/mandrill_512.png');

    gm('ImageFilter_MakeDisplacementMap', (canvas, fetchedByteBuffers) => {
        // See https://www.smashingmagazine.com/2021/09/deep-dive-wonderful-world-svg-displacement-filtering/
        // for a good writeup of displacement filters.
        // https://jsfiddle.skia.org/canvaskit/27ba8450861fd4ec9632276dcdb2edd0d967070c2bb44e60f803597ff78ccda2
        // is a way to play with how the color and scale interact.

        // As implemented, if the displacement map is smaller than the image * scale, things can
        // look strange, with a copy of the image in the background. Making it the size
        // of the canvas will at least mask the "ghost" image that shows up in the background.
        const DISPLACEMENT_SIZE = CANVAS_HEIGHT;
        const IMAGE_SIZE = 512;
        const SCALE = 30;
        const pixels = [];
        // Create a soft, oblong grid shape. This sort of makes it look like there is some warbly
        // glass in front of the mandrill image.
        for (let y = 0; y < DISPLACEMENT_SIZE; y++) {
            for (let x = 0; x < DISPLACEMENT_SIZE; x++) {
                if (x < SCALE/2 || y < SCALE/2 || x >= IMAGE_SIZE - SCALE/2 || y >= IMAGE_SIZE - SCALE/2) {
                    // grey means no displacement. If we displace off the edge of the image, we'll
                    // see strange transparent pixels showing up around the edges.
                    pixels.push(127, 127, 127, 255);
                } else {
                    // Scale our sine wave from [-1, 1] to [0, 255] (which will be scaled by the
                    // DisplacementMap back to [-1, 1].
                    // Setting the alpha to be 255 doesn't impact the translation, but does
                    // let us draw the image if we like.
                    pixels.push(Math.sin(x/5)*255+127, Math.sin(y/3)*255+127, 0, 255);
                }
            }
        }
        const mapImg = CanvasKit.MakeImage({
            width: DISPLACEMENT_SIZE,
            height: DISPLACEMENT_SIZE,
            // Premul is important - we do not want further division of our channels.
            alphaType: CanvasKit.AlphaType.Premul,
            colorType: CanvasKit.ColorType.RGBA_8888,
            colorSpace: CanvasKit.ColorSpace.SRGB,
        }, Uint8ClampedArray.from(pixels), 4 * DISPLACEMENT_SIZE);
        // To see just the displacement map, uncomment the lines below
        // canvas.drawImage(mapImg, 0, 0, null);
        // return;
        const map = CanvasKit.ImageFilter.MakeImage(mapImg, {C: 1/3, B:1/3});

        const displaced = CanvasKit.ImageFilter.MakeDisplacementMap(CanvasKit.ColorChannel.Red,
                                CanvasKit.ColorChannel.Green, SCALE, map, null);
        const paint = new CanvasKit.Paint();
        paint.setImageFilter(displaced);
        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();
        canvas.drawImage(img, 0, 0, paint);

        mapImg.delete();
        img.delete();
        map.delete();
        paint.delete();
        displaced.delete();
    }, '/assets/mandrill_512.png');

    gm('ImageFilter_MakeDropShadow', (canvas, fetchedByteBuffers) => {

        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();

        const drop = CanvasKit.ImageFilter.MakeDropShadow(10, -30, 4.0, 2.0, CanvasKit.MAGENTA, null);
        const paint = new CanvasKit.Paint();
        paint.setImageFilter(drop)
        canvas.drawImage(img, 50, 50, paint);

        img.delete();
        paint.delete();
        drop.delete();
    }, '/assets/mandrill_512.png');

    gm('ImageFilter_MakeDropShadowOnly', (canvas, fetchedByteBuffers) => {

        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();

        const drop = CanvasKit.ImageFilter.MakeDropShadowOnly(10, -30, 4.0, 2.0, CanvasKit.MAGENTA, null);
        const paint = new CanvasKit.Paint();
        paint.setImageFilter(drop)
        canvas.drawImage(img, 50, 50, paint);
        img.delete();
        paint.delete();
        drop.delete();
    }, '/assets/mandrill_512.png');

    gm('ImageFilter_MakeOffset', (canvas, fetchedByteBuffers) => {

        const img = CanvasKit.MakeImageFromEncoded(fetchedByteBuffers[0]);
        expect(img).toBeTruthy();

        const offset = CanvasKit.ImageFilter.MakeOffset(30, -130, null);
        const paint = new CanvasKit.Paint();
        paint.setImageFilter(offset);
        canvas.drawImage(img, 50, 50, paint);
        img.delete();
        paint.delete();
        offset.delete();
    }, '/assets/mandrill_512.png');

    gm('ImageFilter_MakeShader', (canvas) => {

        const rt = CanvasKit.RuntimeEffect.Make(`
uniform float4 color;
half4 main(vec2 fragcoord) {
    return vec4(color);
}
`);
        const shader = rt.makeShader([0.0, 0.0, 1.0, 0.5]);
        const filter = CanvasKit.ImageFilter.MakeShader(shader);
        const paint = new CanvasKit.Paint();
        paint.setImageFilter(filter);
        canvas.drawPaint(paint);
        paint.delete();
        filter.delete();
        shader.delete();
        rt.delete();
    });

    it('can create, delete WebGL contexts', () => {
        if (!CanvasKit.webgl) {
            return SHOULD_SKIP;
        }

        const newCanvas = document.createElement('canvas');
        expect(newCanvas).toBeTruthy();
        const ctx = CanvasKit.GetWebGLContext(newCanvas);
        expect(ctx).toBeGreaterThan(0);

        const grContext = CanvasKit.MakeWebGLContext(ctx);
        expect(grContext).toBeTruthy();

        grContext.delete();
        expect(grContext.isDeleted()).toBeTrue();
    });

    it('can create, release, and delete WebGL contexts', () => {
        if (!CanvasKit.webgl) {
            return SHOULD_SKIP;
        }

        const newCanvas = document.createElement('canvas');
        expect(newCanvas).toBeTruthy();
        const ctx = CanvasKit.GetWebGLContext(newCanvas);
        expect(ctx).toBeGreaterThan(0);

        const grContext = CanvasKit.MakeWebGLContext(ctx);
        expect(grContext).toBeTruthy();

        grContext.releaseResourcesAndAbandonContext();

        grContext.delete();
        expect(grContext.isDeleted()).toBeTrue();
    });

    it('can provide sample count and stencil parameters to onscreen surface', () => {
        if (!CanvasKit.webgl) {
            return SHOULD_SKIP;
        }
        const paramCanvas = document.createElement('canvas');
        const gl = paramCanvas.getContext('webgl');
        var sample = gl.getParameter(gl.SAMPLES);
        var stencil = gl.getParameter(gl.STENCIL_BITS);

        const newCanvas = document.createElement('canvas');
        const ctx = CanvasKit.GetWebGLContext(newCanvas);
        const grContext = CanvasKit.MakeWebGLContext(ctx);
        expect(grContext).toBeTruthy();

        var surface =  CanvasKit.MakeOnScreenGLSurface(grContext, 100, 100, CanvasKit.ColorSpace.SRGB, sample, stencil);
        expect(surface).toBeTruthy();
    });
});