Add test for blending the result of a mask (#1597)

example/src/Tests/useAssets.ts

@@ -18,6 +18,7 @@ const NotoColorEmojiSrc =
 export const useAssets = () => {
   const [error, setError] = useState<Error | null>(null);
   const errorHandler = useCallback((e: Error) => setError(e), []);
+  const mask = useImage(require("./assets/mask.png"), errorHandler);
   const oslo = useImage(require("./assets/oslo.jpg"), errorHandler);
   const skiaLogoJpeg = useImage(SkiaLogoJpeg, errorHandler);
   const skiaLogoPng = useImage(SkiaLogo, errorHandler);
@@ -39,7 +40,8 @@ export const useAssets = () => {
     !NotoColorEmoji ||
     !NotoSansSCRegular ||
     !skiaLogoJpeg ||
-    !skiaLogoPng
+    !skiaLogoPng ||
+    !mask
   ) {
     return null;
   }
@@ -50,5 +52,6 @@ export const useAssets = () => {
     oslo,
     skiaLogoJpeg,
     skiaLogoPng,
+    mask,
   };
 };

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

@@ -1,11 +1,11 @@
 import React from "react";
 
 import { docPath, checkImage } from "../../../__tests__/setup";
-import { Group, Mask, Circle, Rect } from "../../components";
-import { surface } from "../setup";
+import { Group, Mask, Circle, Rect, Image, Paint } from "../../components";
+import { importSkia, surface, images } from "../setup";
 
 describe("Mask Documentation Examples", () => {
-  it("Should draw an alpha mask", async () => {
+  it("should draw an alpha mask", async () => {
     const { width } = surface;
     const r = width / 2;
     const image = await surface.draw(
@@ -24,7 +24,7 @@ describe("Mask Documentation Examples", () => {
     );
     checkImage(image, docPath("mask/alpha-mask.png"));
   });
-  it("Should draw an luminance mask", async () => {
+  it("should draw an luminance mask", async () => {
     const { width } = surface;
     const r = width / 2;
     const image = await surface.draw(
@@ -44,4 +44,42 @@ describe("Mask Documentation Examples", () => {
     );
     checkImage(image, docPath("mask/luminance-mask.png"));
   });
+  it("should blend a mask", async () => {
+    const { width, height } = surface;
+    const { rect } = importSkia();
+    const rct = rect(0, 0, width, height);
+    const { mask } = images;
+    const image = await surface.draw(
+      <>
+        <Rect rect={rct} color={"cyan"} />
+        <Group layer={<Paint blendMode="multiply" />}>
+          <Mask
+            mode="luminance"
+            mask={
+              <Group>
+                <Rect x={0} y={0} width={120} height={256} color={"white"} />
+                <Rect
+                  x={120}
+                  y={0}
+                  width={256 - 120}
+                  height={256}
+                  color={"black"}
+                />
+              </Group>
+            }
+          >
+            <Image
+              image={mask}
+              fit="cover"
+              x={0}
+              y={0}
+              width={256}
+              height={256}
+            />
+          </Mask>
+        </Group>
+      </>
+    );
+    checkImage(image, docPath("mask/blend-mode-mask.png"));
+  });
 });

package/src/renderer/__tests__/setup.tsx

@@ -33,6 +33,7 @@ export let images: {
   oslo: SkImage;
   skiaLogoPng: SkImage;
   skiaLogoJpeg: SkImage;
+  mask: SkImage;
 };
 export let fonts: {
   RobotoMedium: SkFont;
@@ -62,8 +63,10 @@ beforeAll(async () => {
   const oslo = loadImage("skia/__tests__/assets/oslo.jpg");
   const skiaLogoPng = loadImage("skia/__tests__/assets/skia_logo.png");
   const skiaLogoJpeg = loadImage("skia/__tests__/assets/skia_logo_jpeg.jpg");
-  images = { oslo, skiaLogoPng, skiaLogoJpeg };
+  const mask = loadImage("skia/__tests__/assets/mask.png");
+  images = { oslo, skiaLogoPng, skiaLogoJpeg, mask };
   fonts = { RobotoMedium, NotoColorEmoji, NotoSansSCRegular };
+  assets.set(mask, "mask");
   assets.set(oslo, "oslo");
   assets.set(RobotoMedium, "RobotoMedium");
   assets.set(NotoColorEmoji, "NotoColorEmoji");