Add offscreen canvas test

Author: louix

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

@@ -23,7 +23,7 @@ describe("Colors", () => {
       };
 
       const c1 = Skia.Color("cyan");
-      const c2 = Skia.Color([0, 1, 1, 1]);
+      const c2 = Skia.Color([0, 255, 255, 255]);
       const c3 = Skia.Color(0xff00ffff);
       const c4 = Skia.Color(Float32Array.of(0, 1, 1, 1));
 
@@ -35,4 +35,42 @@ describe("Colors", () => {
     });
     expect(result).toBe(true);
   });
+  it("should render the same color regardless of constructor input types", async () => {
+    // given (different inputs representing the same color
+    const colors = [
+      { kind: "string" as const, value: "red" },
+      { kind: "floatArray32" as const, value: [1, 0, 0, 1] },
+      { kind: "number" as const, value: 0xff0000ff },
+      { kind: "array" as const, value: [255, 0, 0, 255] },
+    ];
+
+    // when (for each input we draw a colored canvas and encode it to bytes)
+    const buffers = await Promise.all(
+      colors.map((color) =>
+        surface
+          .drawOffscreen(
+            (Skia, canvas, ctx) => {
+              const c =
+                ctx.color.kind === "floatArray32"
+                  ? // we cannot pass in a Float32Array via ctx, need to construct it inside
+                    new Float32Array(ctx.color.value)
+                  : ctx.color.value;
+              canvas.drawColor(Skia.Color(c));
+            },
+            { color }
+          )
+          .then((image) => image.encodeToBytes())
+      )
+    );
+
+    // then (expect the encoded bytes are equal)
+    for (let i = 1; i < buffers.length; i++) {
+      const prev = buffers[i - 1];
+      const curr = buffers[i];
+      expect(prev.length).toBe(curr.length);
+      for (let j = 0; j < prev.length; j++) {
+        expect(prev[j]).toBe(curr[j]);
+      }
+    }
+  });
 });