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,37 @@ 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 = [
+      "red",
+      Float32Array.of(1, 0, 0, 1),
+      0xff0000ff,
+      [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) => {
+              canvas.drawColor(Skia.Color(ctx.color));
+            },
+            { 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]);
+      }
+    }
+  });
 });