@shopify/react-native-skia 1.3.12 → 1.4.0

package/src/renderer/__tests__/e2e/AnimatedImages.spec.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+
+import { checkImage } from "../../../__tests__/setup";
+import { Image } from "../../components";
+import { BirdGIF, importSkia, surface } from "../setup";
+
+describe("Animated Images", () => {
+  it("should decode gifs (1)", async () => {
+    const result = await surface.eval((Skia) => {
+      const data = Skia.Data.fromBase64(
+        "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
+      );
+      const animatedImage =
+        Skia.AnimatedImage.MakeAnimatedImageFromEncoded(data);
+      if (!animatedImage) {
+        return false;
+      }
+
+      if (animatedImage.getFrameCount() !== 1) {
+        return false;
+      }
+
+      animatedImage.decodeNextFrame();
+      animatedImage.getCurrentFrame();
+      animatedImage.currentFrameDuration();
+      return true;
+    });
+    expect(result).toEqual(true);
+  });
+  it("should decode gifs (2)", async () => {
+    const result = await surface.eval((Skia) => {
+      const data = Skia.Data.fromBase64(
+        "R0lGODlhAQABAIAAAGGqHwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
+      );
+      const animatedImage =
+        Skia.AnimatedImage.MakeAnimatedImageFromEncoded(data);
+      if (!animatedImage) {
+        return "";
+      }
+      const frame = animatedImage.getCurrentFrame();
+      if (!frame) {
+        return "";
+      }
+      return frame.encodeToBase64();
+    });
+    expect(result).toEqual(
+      // eslint-disable-next-line max-len
+      "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAANzQklUCAgI2+FP4AAAAAxJREFUCJljSFwlDwACmgErMAA+hwAAAABJRU5ErkJggg=="
+    );
+  });
+  it("should decode the 3rd frame of the GIF", async () => {
+    const result = await surface.eval(
+      (Skia, { bird }) => {
+        const data = Skia.Data.fromBase64(bird);
+        const animatedImage =
+          Skia.AnimatedImage.MakeAnimatedImageFromEncoded(data);
+        if (!animatedImage) {
+          return "";
+        }
+        animatedImage.decodeNextFrame();
+        animatedImage.decodeNextFrame();
+        const frame = animatedImage.getCurrentFrame();
+        if (!frame) {
+          return "";
+        }
+        return frame.encodeToBase64();
+      },
+      { bird: BirdGIF }
+    );
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBase64(result);
+    const frame = Skia.Image.MakeImageFromEncoded(data);
+    const { width, height } = surface;
+    const img = await surface.draw(
+      <>
+        <Image
+          image={frame}
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          fit="cover"
+        />
+      </>
+    );
+    checkImage(img, "snapshots/animated-images/bird.png");
+  });
+});

package/src/renderer/__tests__/e2e/Atlas.spec.tsx

@@ -0,0 +1,358 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { importSkia, surface } from "../setup";
+import { Atlas, Circle, Group, Rect } from "../../components";
+
+describe("Atlas", () => {
+  it("should read the RSXform properties", async () => {
+    const result = await surface.eval((Skia) => {
+      const transform = Skia.RSXform(1, 2, 3, 4);
+      return [transform.scos, transform.ssin, transform.tx, transform.ty];
+    });
+    expect(result).toEqual([1, 2, 3, 4]);
+  });
+  it("should draw the atlas using the imperative API", async () => {
+    const img = await surface.drawOffscreen((Skia, canvas) => {
+      const size = 200;
+      const texSurface = Skia.Surface.MakeOffscreen(size, size)!;
+      const texCanvas = texSurface.getCanvas();
+      texCanvas.drawColor(Skia.Color("red"));
+      const tex = texSurface.makeImageSnapshot();
+      const srcs = [
+        Skia.XYWHRect(0, 0, size, size),
+        Skia.XYWHRect(0, 0, size, size),
+      ];
+      const dsts = [Skia.RSXform(0.5, 0, 0, 0), Skia.RSXform(0, 0.5, 200, 100)];
+      const paint = Skia.Paint();
+      canvas.drawAtlas(tex, srcs, dsts, paint);
+    });
+    checkImage(img, "snapshots/atlas/simple.png");
+  });
+  // it("should test the RSXforms (1)", async () => {
+  //   const { Skia } = importSkia();
+  //   const scos = Math.cos(Math.PI / 4);
+  //   const ssin = Math.sin(Math.PI / 4);
+  //   const px = 25;
+  //   const py = 25;
+  //   const tx = px - scos * px + ssin * py;
+  //   const ty = py - ssin * px - scos * py;
+  //   const f1 = Skia.RSXform(scos, ssin, tx, ty);
+  //   const result = await surface.eval((Sk) => {
+  //     const f2 = Sk.RSXformFromRadians(1, Math.PI / 4, 0, 0, 25, 25);
+  //     return [f2.scos, f2.ssin, f2.tx, f2.ty];
+  //   });
+  //   expect(result).toEqual([f1.scos, f1.ssin, f1.tx, f1.ty]);
+  // });
+  it("should test the RSXforms (2)", async () => {
+    const { Skia } = importSkia();
+    const f1 = Skia.RSXformFromRadians(1, Math.PI / 4, 0, 0, 25, 25);
+    const result = await surface.eval((Sk) => {
+      const f2 = Sk.RSXformFromRadians(1, Math.PI / 4, 0, 0, 25, 25);
+      return [f2.scos, f2.ssin, f2.tx, f2.ty];
+    });
+    expect(result[0]).toBeCloseTo(f1.scos);
+    expect(result[1]).toBeCloseTo(f1.ssin);
+    expect(result[2]).toBeCloseTo(f1.tx);
+    expect(result[3]).toBeCloseTo(f1.ty);
+  });
+  it("should test the RSXforms (3)", async () => {
+    const { Skia } = importSkia();
+    const image = (() => {
+      const texSurface = Skia.Surface.MakeOffscreen(50, 50)!;
+      const texCanvas = texSurface.getCanvas();
+      texCanvas.drawColor(Skia.Color("cyan"));
+      return texSurface.makeImageSnapshot();
+    })();
+    const rct = Skia.XYWHRect(0, 0, 50, 50);
+    const scos = Math.cos(Math.PI / 4);
+    const ssin = Math.sin(Math.PI / 4);
+    const px = 25;
+    const py = 25;
+    const tx = px - scos * px + ssin * py;
+    const ty = py - ssin * px - scos * py;
+    const img = await surface.draw(
+      <Group>
+        <Atlas
+          image={image}
+          sprites={[rct, rct, rct, rct]}
+          transforms={[
+            Skia.RSXform(scos, ssin, tx, ty),
+            Skia.RSXformFromRadians(1, Math.PI / 4, 0, 0, 25, 25),
+            Skia.RSXform(scos, ssin, 100 + tx, ty),
+            Skia.RSXformFromRadians(1, Math.PI / 4, 100, 0, 125, 25),
+          ]}
+        />
+        <Circle r={5} color="red" cx={px} cy={py} />
+      </Group>
+    );
+    checkImage(img, "snapshots/atlas/rsxform1.png", {
+      maxPixelDiff: 500,
+    });
+  });
+  it("should test the RSXforms (4)", async () => {
+    const { Skia } = importSkia();
+    const image = (() => {
+      const texSurface = Skia.Surface.MakeOffscreen(50, 50)!;
+      const texCanvas = texSurface.getCanvas();
+      texCanvas.drawColor(Skia.Color("cyan"));
+      return texSurface.makeImageSnapshot();
+    })();
+    const rct = Skia.XYWHRect(0, 0, 50, 50);
+    const scos = Math.cos(Math.PI / 4);
+    const ssin = Math.sin(Math.PI / 4);
+    const px = 25;
+    const py = 25;
+    const tx = px - scos * px + ssin * py;
+    const ty = py - ssin * px - scos * py;
+    const img = await surface.draw(
+      <Atlas
+        image={image}
+        sprites={[rct, rct, rct, rct, rct]}
+        transforms={[
+          Skia.RSXform(1, 0, 0, 0),
+          Skia.RSXform(0.5, 0, 100, 12.5),
+          Skia.RSXform(scos, ssin, 200, 0),
+          Skia.RSXform(scos, ssin, 0, 200),
+          Skia.RSXform(scos, ssin, tx, 100 + ty),
+        ]}
+      />
+    );
+    checkImage(img, "snapshots/atlas/rsxform.png", {
+      maxPixelDiff: 500,
+    });
+  });
+  it("Simple Atlas", async () => {
+    const { Skia } = importSkia();
+    const image = (() => {
+      const texSurface = Skia.Surface.MakeOffscreen(75, 75)!;
+      const texCanvas = texSurface.getCanvas();
+      texCanvas.drawColor(Skia.Color("red"));
+      return texSurface.makeImageSnapshot();
+    })();
+    const img = await surface.draw(
+      <Atlas
+        image={image}
+        sprites={[Skia.XYWHRect(0, 0, 75, 75), Skia.XYWHRect(0, 0, 75, 75)]}
+        transforms={[Skia.RSXform(0.5, 0, 0, 0), Skia.RSXform(0, 0.5, 50, 50)]}
+      />
+    );
+    checkImage(img, "snapshots/atlas/simple2.png", {
+      maxPixelDiff: 500,
+    });
+  });
+  it("Simple Atlas identity", async () => {
+    const { Skia } = importSkia();
+    const size = 75;
+    const texSurface = Skia.Surface.MakeOffscreen(size, size)!;
+    const texCanvas = texSurface.getCanvas();
+    texCanvas.drawColor(Skia.Color("red"));
+    const image = texSurface.makeImageSnapshot();
+    const img = await surface.draw(
+      <Atlas
+        image={image}
+        sprites={[
+          Skia.XYWHRect(0, 0, size, size),
+          Skia.XYWHRect(0, 0, size, size),
+        ]}
+        transforms={[Skia.RSXform(1, 0, 0, 0), Skia.RSXform(1, 0, 0, 0)]}
+      />
+    );
+    checkImage(img, "snapshots/atlas/identity.png");
+  });
+  it("Atlas documentation example", async () => {
+    const { Skia, rect, drawAsImage } = importSkia();
+    const size = { width: 25, height: 25 * 0.45 };
+    const strokeWidth = 2;
+    const textureSize = {
+      width: size.width + strokeWidth,
+      height: size.height + strokeWidth,
+    };
+    const texture = drawAsImage(
+      <Group>
+        <Rect
+          rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
+          color="cyan"
+        />
+        <Rect
+          rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
+          color="blue"
+          style="stroke"
+          strokeWidth={strokeWidth}
+        />
+      </Group>,
+      textureSize
+    );
+    const numberOfBoxes = 150;
+    const pos = { x: 128, y: 128 };
+    const width = 256;
+    const sprites = new Array(numberOfBoxes)
+      .fill(0)
+      .map(() => rect(0, 0, textureSize.width, textureSize.height));
+    const transforms = new Array(numberOfBoxes).fill(0).map((_, i) => {
+      const tx = 5 + ((i * size.width) % width);
+      const ty = 25 + Math.floor(i / (width / size.width)) * size.width;
+      const r = Math.atan2(pos.y - ty, pos.x - tx);
+      return Skia.RSXform(Math.cos(r), Math.sin(r), tx, ty);
+    });
+
+    const img = await surface.draw(
+      <Atlas image={texture} sprites={sprites} transforms={transforms} />
+    );
+    checkImage(img, docPath("atlas/hello-world.png"), {
+      maxPixelDiff: 500,
+    });
+  });
+  it("should use the colors property properly", async () => {
+    const { Skia, rect, drawAsImage } = importSkia();
+    const size = { width: 25, height: 25 * 0.45 };
+    const strokeWidth = 2;
+    const textureSize = {
+      width: size.width + strokeWidth,
+      height: size.height + strokeWidth,
+    };
+    const texture = drawAsImage(
+      <Group>
+        <Rect
+          rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
+          color="black"
+        />
+      </Group>,
+      textureSize
+    );
+    const numberOfBoxes = 150;
+    const pos = { x: 128, y: 128 };
+    const width = 256;
+    const sprites = new Array(numberOfBoxes)
+      .fill(0)
+      .map(() => rect(0, 0, textureSize.width, textureSize.height));
+    const transforms = new Array(numberOfBoxes).fill(0).map((_, i) => {
+      const tx = 5 + ((i * size.width) % width);
+      const ty = 25 + Math.floor(i / (width / size.width)) * size.width;
+      const r = Math.atan2(pos.y - ty, pos.x - tx);
+      return Skia.RSXform(Math.cos(r), Math.sin(r), tx, ty);
+    });
+    class SeededRandom {
+      private seed: number;
+
+      constructor(seed: number) {
+        this.seed = seed;
+      }
+
+      // Linear Congruential Generator
+      next(): number {
+        this.seed = (this.seed * 9301 + 49297) % 233280;
+        return this.seed / 233280;
+      }
+    }
+
+    function generateSeededRandomColor(seed: number): string {
+      const random = new SeededRandom(seed);
+
+      const red = Math.floor(random.next() * 256);
+      const green = Math.floor(random.next() * 256);
+      const blue = Math.floor(random.next() * 256);
+
+      const redHex = red.toString(16).padStart(2, "0");
+      const greenHex = green.toString(16).padStart(2, "0");
+      const blueHex = blue.toString(16).padStart(2, "0");
+
+      return `#${redHex}${greenHex}${blueHex}`;
+    }
+
+    const colors = new Array(numberOfBoxes)
+      .fill(0)
+      .map((_, i) => Skia.Color(generateSeededRandomColor(i)));
+    const img = await surface.draw(
+      <Atlas
+        image={texture}
+        sprites={sprites}
+        transforms={transforms}
+        colors={colors}
+      />
+    );
+    checkImage(img, docPath("atlas/colors.png"), {
+      maxPixelDiff: 500,
+    });
+  });
+  it("should use the colors and blend mode property properly", async () => {
+    const { Skia, rect, drawAsImage } = importSkia();
+    const size = { width: 25, height: 25 * 0.45 };
+    const strokeWidth = 2;
+    const textureSize = {
+      width: size.width + strokeWidth,
+      height: size.height + strokeWidth,
+    };
+    const texture = drawAsImage(
+      <Group>
+        <Rect
+          rect={rect(strokeWidth / 2, strokeWidth / 2, size.width, size.height)}
+          color="rgb(36,43,56)"
+        />
+      </Group>,
+      textureSize
+    );
+    const numberOfBoxes = 150;
+    const pos = { x: 128, y: 128 };
+    const width = 256;
+    const sprites = new Array(numberOfBoxes)
+      .fill(0)
+      .map(() => rect(0, 0, textureSize.width, textureSize.height));
+    const transforms = new Array(numberOfBoxes).fill(0).map((_, i) => {
+      const tx = 5 + ((i * size.width) % width);
+      const ty = 25 + Math.floor(i / (width / size.width)) * size.width;
+      const r = Math.atan2(pos.y - ty, pos.x - tx);
+      return Skia.RSXform(Math.cos(r), Math.sin(r), tx, ty);
+    });
+    const colors = new Array(numberOfBoxes)
+      .fill(0)
+      .map(() => Skia.Color("#61bea2"));
+    const img = await surface.draw(
+      <Atlas
+        image={texture}
+        sprites={sprites}
+        transforms={transforms}
+        colors={colors}
+        blendMode="screen"
+      />
+    );
+    checkImage(img, docPath("atlas/colors-and-blend-mode.png"), {
+      maxPixelDiff: 500,
+    });
+  });
+  it("should accept null as a texture", async () => {
+    const { Skia, rect } = importSkia();
+    const size = { width: 25, height: 25 * 0.45 };
+    const textureSize = {
+      width: 0,
+      height: 0,
+    };
+    const numberOfBoxes = 150;
+    const pos = { x: 128, y: 128 };
+    const width = 256;
+    const sprites = new Array(numberOfBoxes)
+      .fill(0)
+      .map(() => rect(0, 0, textureSize.width, textureSize.height));
+    const transforms = new Array(numberOfBoxes).fill(0).map((_, i) => {
+      const tx = 5 + ((i * size.width) % width);
+      const ty = 25 + Math.floor(i / (width / size.width)) * size.width;
+      const r = Math.atan2(pos.y - ty, pos.x - tx);
+      return Skia.RSXform(Math.cos(r), Math.sin(r), tx, ty);
+    });
+    const colors = new Array(numberOfBoxes)
+      .fill(0)
+      .map(() => Skia.Color("#61bea2"));
+    const img = await surface.draw(
+      <Atlas
+        image={null}
+        sprites={sprites}
+        transforms={transforms}
+        colors={colors}
+        blendMode="screen"
+      />
+    );
+    checkImage(img, docPath("atlas/null.png"), {
+      maxPixelDiff: 500,
+    });
+  });
+});

package/src/renderer/__tests__/e2e/BackdropFilters.spec.tsx

@@ -0,0 +1,141 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import {
+  BackdropBlur,
+  BackdropFilter,
+  Blur,
+  Circle,
+  ColorMatrix,
+  Fill,
+  Image,
+  LinearGradient,
+} from "../../components";
+import { importSkia, surface, images } from "../setup";
+import { Group } from "../../components/Group";
+
+// https://kazzkiq.github.io/svg-color-filter/
+const BLACK_AND_WHITE = [
+  0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
+];
+
+describe("Backdrop Filters", () => {
+  it("A black and white color filter as backdrop color filter", async () => {
+    const { oslo } = images;
+    const { width } = surface;
+    const size = width;
+    const img = await surface.draw(
+      <Group>
+        <Image
+          image={oslo}
+          x={0}
+          y={0}
+          width={width}
+          height={width}
+          fit="cover"
+        />
+        <BackdropFilter
+          clip={{ x: 0, y: size / 2, width: size, height: size / 2 }}
+          filter={<ColorMatrix matrix={BLACK_AND_WHITE} />}
+        />
+      </Group>
+    );
+    checkImage(img, docPath("black-and-white-backdrop-filter.png"));
+  });
+  it("Blur backdrop filter", async () => {
+    const { oslo } = images;
+    const { width } = surface;
+    const size = width;
+    const img = await surface.draw(
+      <Group>
+        <Fill color="white" />
+        <Image
+          image={oslo}
+          x={0}
+          y={0}
+          width={width}
+          height={width}
+          fit="cover"
+        />
+        <BackdropBlur
+          blur={4 / 3}
+          clip={{ x: 0, y: size / 2, width: size, height: size / 2 }}
+        >
+          <Fill color="rgba(0, 0, 0, 0.5)" />
+        </BackdropBlur>
+      </Group>
+    );
+    checkImage(img, docPath("blur-backdrop-filter.png"));
+  });
+  it("should display the Aurora Example", async () => {
+    const { width, height } = surface;
+    const { vec } = importSkia();
+    const c = vec(width / 2, height / 2);
+    const r = c.x - 32 / 3;
+    const clip = { x: 0, y: c.y, width, height: c.y };
+    const img = await surface.draw(
+      <>
+        <Fill color="black" />
+        <Circle c={c} r={r}>
+          <LinearGradient
+            start={vec(c.x - r, c.y - r)}
+            end={vec(c.x + r, c.y + r)}
+            colors={["#FFF723", "#E70696"]}
+          />
+        </Circle>
+        <BackdropFilter filter={<Blur blur={10 / 3} />} clip={clip}>
+          <Fill color="rgba(0, 0, 0, 0.3)" />
+        </BackdropFilter>
+      </>
+    );
+    checkImage(img, docPath("blur-backdrop-aurora.png"));
+  });
+  it("should display the Aurora Example with the BackdropBlur component", async () => {
+    const { width, height } = surface;
+    const { vec } = importSkia();
+    const c = vec(width / 2, height / 2);
+    const r = c.x - 32 / 3;
+    const clip = { x: 0, y: c.y, width, height: c.y };
+    const img = await surface.draw(
+      <>
+        <Fill color="black" />
+        <Circle c={c} r={r}>
+          <LinearGradient
+            start={vec(c.x - r, c.y - r)}
+            end={vec(c.x + r, c.y + r)}
+            colors={["#FFF723", "#E70696"]}
+          />
+        </Circle>
+        <BackdropBlur blur={10 / 3} clip={clip}>
+          <Fill color="rgba(0, 0, 0, 0.3)" />
+        </BackdropBlur>
+      </>
+    );
+    checkImage(img, docPath("blur-backdrop-aurora.png"));
+  });
+  it("should display the Aurora Example with the BackdropBlur component and a string as clipping path", async () => {
+    const { width, height } = surface;
+    const { vec, Skia } = importSkia();
+    const c = vec(width / 2, height / 2);
+    const r = c.x - 32 / 3;
+    const path = Skia.Path.Make();
+    path.addRect(Skia.XYWHRect(0, c.y, width, c.y));
+    const clip = path.toSVGString();
+    const img = await surface.draw(
+      <>
+        <Fill color="black" />
+        <Circle c={c} r={r}>
+          <LinearGradient
+            start={vec(c.x - r, c.y - r)}
+            end={vec(c.x + r, c.y + r)}
+            colors={["#FFF723", "#E70696"]}
+          />
+        </Circle>
+        <BackdropBlur blur={10 / 3} clip={clip}>
+          <Fill color="rgba(0, 0, 0, 0.3)" />
+        </BackdropBlur>
+      </>
+    );
+    checkImage(img, docPath("blur-backdrop-aurora.png"));
+  });
+});

package/src/renderer/__tests__/e2e/Blending.spec.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+
+import { importSkia, surface } from "../setup";
+import { docPath, checkImage } from "../../../__tests__/setup";
+import {
+  Blend,
+  ColorShader,
+  Fill,
+  Group,
+  LinearGradient,
+  RadialGradient,
+} from "../../components";
+
+describe("Test Blending", () => {
+  it("should display a linear gradient", async () => {
+    const { width, height } = surface;
+    const image = await surface.draw(
+      <Group>
+        <LinearGradient
+          colors={["cyan", "magenta", "yellow"]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: width, y: height }}
+        />
+        <Fill />
+      </Group>
+    );
+    checkImage(image, "snapshots/runtime-effects/linear-gradient.png");
+  });
+
+  it("should display a color", async () => {
+    const image = await surface.draw(
+      <Fill>
+        <ColorShader color="lightblue" />
+      </Fill>
+    );
+    checkImage(image, docPath("shaders/color.png"));
+  });
+
+  it("should blend cyan/magenta/yellow to black (multiply)", async () => {
+    const { vec } = importSkia();
+    const { width } = surface;
+    const r = width / 2;
+    const c = vec(r, r);
+    const image = await surface.draw(
+      <Fill>
+        <Blend mode="multiply">
+          <RadialGradient r={r} c={c} colors={["cyan", "magenta"]} />
+          <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+          <RadialGradient r={r} c={c} colors={["yellow", "cyan"]} />
+        </Blend>
+      </Fill>
+    );
+    checkImage(image, "snapshots/runtime-effects/blend-multiply.png");
+  });
+
+  it("should blend using color burn", async () => {
+    const { vec } = importSkia();
+    const { width } = surface;
+    const r = width / 2;
+    const c = vec(r, r);
+    let image = await surface.draw(
+      <Fill>
+        <Blend mode="colorBurn">
+          <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+          <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+          <RadialGradient r={r} c={c} colors={["yellow", "cyan"]} />
+        </Blend>
+      </Fill>
+    );
+    checkImage(image, "snapshots/runtime-effects/blend-color-burn.png", {
+      maxPixelDiff: 324,
+    });
+    image = await surface.draw(
+      <Fill>
+        <Blend mode="colorBurn">
+          <RadialGradient r={r} c={c} colors={["yellow", "cyan"]} />
+          <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+          <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+        </Blend>
+      </Fill>
+    );
+    checkImage(image, "snapshots/runtime-effects/blend-color-burn2.png", {
+      maxPixelDiff: 324,
+    });
+  });
+
+  it("should blend using multiply", async () => {
+    const { vec } = importSkia();
+    const { width } = surface;
+    const r = width / 2;
+    const c = vec(r, r);
+    let image = await surface.draw(
+      <Fill>
+        <Blend mode="colorBurn">
+          <RadialGradient r={r} c={c} colors={["yellow", "cyan"]} />
+          <RadialGradient r={r} c={c} colors={["cyan", "magenta"]} />
+          <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+        </Blend>
+      </Fill>
+    );
+    checkImage(image, "snapshots/runtime-effects/blend-color-burn3.png");
+    image = await surface.draw(
+      <Fill>
+        <Blend mode="colorBurn">
+          <RadialGradient r={r} c={c} colors={["yellow", "cyan"]} />
+          <Blend mode="colorBurn">
+            <RadialGradient r={r} c={c} colors={["cyan", "magenta"]} />
+            <RadialGradient r={r} c={c} colors={["magenta", "yellow"]} />
+          </Blend>
+        </Blend>
+      </Fill>
+    );
+    checkImage(image, "snapshots/runtime-effects/blend-color-burn3.png");
+  });
+});