🧪 convert new group tests to declarative; savelayer is passing, backdrop filtering is not

Author: macksal

packages/skia/src/dom/types/Common.ts

@@ -7,6 +7,7 @@ import type {
   InputRRect,
   PaintStyle,
   SaveLayerFlag,
+  SkImageFilter,
   SkPaint,
   SkPath,
   SkRect,
@@ -72,6 +73,7 @@ export interface TransformProps {
 }
 
 export interface SaveLayerProps {
+  backdropFilter?: SkImageFilter;
   saveLayerFlags?: SaveLayerFlag;
 }
 

packages/skia/src/renderer/__tests__/e2e/Group.spec.tsx

@@ -1,7 +1,17 @@
 import React from "react";
 
 import { checkImage, docPath } from "../../../__tests__/setup";
-import { Image, Group, Fill, FitBox, Path } from "../../components";
+import {
+  Image,
+  Group,
+  Fill,
+  FitBox,
+  Path,
+  Rect,
+  Circle,
+  Paint,
+  Blur,
+} from "../../components";
 import { images, importSkia, PIXEL_RATIO, surface } from "../setup";
 
 describe("Group", () => {
@@ -164,6 +174,48 @@ describe("Group", () => {
     );
     checkImage(img, docPath("group/bloom.png"));
   });
+  it("Copies a layer and adds new content to it (decl)", async () => {
+    const { width, height } = surface;
+    const centreY = height / 2;
+    const { SaveLayerFlag, rect } = importSkia();
+    const img = await surface.draw(
+      <>
+        <Fill color="black" />
+        <Rect
+          x={0}
+          y={centreY - 0.1 * height}
+          width={width}
+          height={0.2 * height}
+          color={[0, 0, 0.6, 1]}
+        />
+        <Circle
+          cx={0.25 * width}
+          cy={centreY}
+          r={0.2 * width}
+          color={[0.8, 0, 0, 1]}
+        />
+        <Group clip={rect(0, 0, width, centreY)}>
+          <Group
+            saveLayerFlags={SaveLayerFlag.SaveLayerInitWithPrevious}
+            layer={
+              <Paint blendMode={"screen"}>
+                <Blur blur={width * 0.05} mode={"decal"} />
+              </Paint>
+            }
+          >
+            <Circle
+              cx={0.75 * width}
+              cy={centreY}
+              r={0.2 * width}
+              color={[0.8, 0, 0, 1]}
+            />
+          </Group>
+        </Group>
+      </>
+    );
+
+    checkImage(img, docPath("group/bloom.png"));
+  });
   it("Copies a layer through a backdrop filter and adds new content to it", async () => {
     const { width, height } = surface;
     const centreY = height / 2;
@@ -200,4 +252,46 @@ describe("Group", () => {
     );
     checkImage(img, docPath("group/bloom2.png"));
   });
+  it("Copies a layer through a backdrop filter and adds new content to it (decl)", async () => {
+    const { width, height } = surface;
+    const centreY = height / 2;
+    const { TileMode, rect, Skia } = importSkia();
+    const img = await surface.draw(
+      <>
+        <Fill color="black" />
+        <Rect
+          x={0}
+          y={centreY - 0.1 * height}
+          width={width}
+          height={0.2 * height}
+          color={[0, 0, 0.6, 1]}
+        />
+        <Circle
+          cx={0.25 * width}
+          cy={centreY}
+          r={0.2 * width}
+          color={[0.8, 0, 0, 1]}
+        />
+        <Group clip={rect(0, 0, width, centreY)}>
+          <Group
+            layer={<Paint blendMode={"screen"} />}
+            backdropFilter={Skia.ImageFilter.MakeBlur(
+              width * 0.05,
+              width * 0.05,
+              TileMode.Decal
+            )}
+          >
+            <Circle
+              cx={0.75 * width}
+              cy={centreY}
+              r={0.2 * width}
+              color={[0.8, 0, 0, 1]}
+            />
+          </Group>
+        </Group>
+      </>
+    );
+
+    checkImage(img, docPath("group/bloom2.png"));
+  });
 });