#1194: Fixed type for inflate method to allow neg values (#1211)

package/cpp/rnskia/dom/nodes/JsiBoxNode.h

@@ -81,17 +81,17 @@ class JsiBoxNode : public JsiDomRenderNode, public JsiDomNodeCtor<JsiBoxNode> {
   }
 
 private:
-  SkRRect inflate(const SkRRect &box, SkScalar dx, SkScalar dy, size_t tx = 0,
-                  size_t ty = 0) {
+  SkRRect inflate(const SkRRect &box, SkScalar dx, SkScalar dy, SkScalar tx = 0,
+                  SkScalar ty = 0) {
     return SkRRect::MakeRectXY(
         SkRect::MakeXYWH(box.rect().x() - dx + tx, box.rect().y() - dy + ty,
                          box.rect().width() + 2 * dx,
                          box.rect().height() + 2 * dy),
         box.getSimpleRadii().x() + dx, box.getSimpleRadii().y() + dy);
   }
 
-  SkRRect deflate(const SkRRect &box, SkScalar dx, SkScalar dy, size_t tx = 0,
-                  size_t ty = 0) {
+  SkRRect deflate(const SkRRect &box, SkScalar dx, SkScalar dy, SkScalar tx = 0,
+                  SkScalar ty = 0) {
     return inflate(box, -dx, -dy, tx, ty);
   }
 

package/src/dom/nodes/drawings/Box.ts

@@ -40,7 +40,7 @@ export class BoxShadowNode extends JsiDeclarationNode<
   BoxShadowProps
 > {
   constructor(ctx: NodeContext, props: BoxShadowProps) {
-    super(ctx, DeclarationType.Unknown, NodeType.Box, props);
+    super(ctx, DeclarationType.Unknown, NodeType.BoxShadow, props);
   }
 
   materialize() {

package/src/dom/nodes/paint/ImageFilters.ts

@@ -140,7 +140,7 @@ export class BlurImageFilterNode extends ImageFilterDeclaration<BlurImageFilterP
 
 export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadowImageFilterProps> {
   constructor(ctx: NodeContext, props: DropShadowImageFilterProps) {
-    super(ctx, NodeType.BlurImageFilter, props);
+    super(ctx, NodeType.DropShadowImageFilter, props);
   }
 
   materialize() {

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

@@ -0,0 +1,64 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { Box, BoxShadow, Fill, FitBox } from "../../components";
+import { surface, importSkia, PIXEL_RATIO } from "../setup";
+
+describe("Box", () => {
+  it("should draw a box with inner and outer shadow", async () => {
+    const { rect, rrect } = importSkia();
+    const { width } = surface;
+    const size = width / 2;
+    const d = 10 * PIXEL_RATIO;
+    const img = await surface.draw(
+      <>
+        <Fill color="#add8e6" />
+        <Box
+          box={rrect(rect(size / 2, size / 2, size, size), 24, 24)}
+          color="#add8e6"
+        >
+          <BoxShadow dx={d} dy={d} blur={d} color="#93b8c4" inner />
+          <BoxShadow dx={-d} dy={-d} blur={d} color="#c7f8ff" inner />
+          <BoxShadow dx={d} dy={d} blur={d} color="#93b8c4" />
+          <BoxShadow dx={-d} dy={-d} blur={d} color="#c7f8ff" />
+        </Box>
+      </>
+    );
+    checkImage(img, docPath("box/simple-box-shadow.png"));
+  });
+  it("should render negative values", async () => {
+    const { rect } = importSkia();
+    const { width } = surface;
+    const w = width;
+    const h = width;
+    const src = { x: 15, y: 15, width: w - 30, height: h - 30 };
+    const border = { ...src, rx: 10, ry: 10 };
+    const img = await surface.draw(
+      <FitBox src={src} dst={rect(30, 15, w - 30, h - 10)}>
+        <Box box={border} color={"white"}>
+          <BoxShadow dx={5} dy={12} blur={5} color={"red"} />
+          <BoxShadow dx={5} dy={12} blur={5} color={"red"} />
+          <BoxShadow dx={-5} dy={-12} blur={5} color={"green"} />
+          <BoxShadow dx={-5} dy={-12} blur={5} color={"green"} />
+        </Box>
+      </FitBox>
+    );
+    checkImage(img, docPath("box/box-shadow.png"), { overwrite: true });
+  });
+  it("should draw a box with red stroke", async () => {
+    const { width } = surface;
+    const size = width / 2;
+    const img = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Box
+          box={{ width: size, height: size, x: 1 / 3, y: 1 / 3 }}
+          color="red"
+          style="stroke"
+          strokeWidth={2 / 3}
+        />
+      </>
+    );
+    checkImage(img, docPath("box/box-stroke.png"));
+  });
+});

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

@@ -1,6 +1,11 @@
 import React from "react";
 
-import { docPath, checkImage, itRunsNodeOnly } from "../../../__tests__/setup";
+import {
+  docPath,
+  checkImage,
+  itRunsNodeOnly,
+  itFailsE2e,
+} from "../../../__tests__/setup";
 import { fonts, images, surface } from "../setup";
 import {
   Fill,
@@ -90,11 +95,13 @@ describe("Test Image Filters", () => {
         </RoundedRect>
       </>
     );
-    checkImage(img, docPath("image-filters/dropshadow.png"));
+    checkImage(img, docPath("image-filters/dropshadow.png"), {
+      threshold: 0.05,
+    });
   });
   // This test should fail because it is not scaled properly but
   // it passes because of the low tolerance in the canvas result
-  it("Should draw a innershadow", async () => {
+  itFailsE2e("Should draw a innershadow", async () => {
     const { width } = surface;
     const padding = width / 8;
     const img = await surface.draw(
@@ -119,6 +126,8 @@ describe("Test Image Filters", () => {
         </RoundedRect>
       </>
     );
-    checkImage(img, docPath("image-filters/innershadow.png"));
+    checkImage(img, docPath("image-filters/innershadow.png"), {
+      threshold: 0.05,
+    });
   });
 });