@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,139 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { Fill, Path, RoundedRect } from "../../components";
+import { importSkia, surface } from "../setup";
+
+describe("Rects and rounded rects", () => {
+  it("The rounded rectangle radii should be scale to its maximum value", async () => {
+    const result = await surface.eval((Skia) => {
+      const rrect = Skia.RRectXY(Skia.XYWHRect(0, 0, 100, 100), 200, 200);
+      return { rx: rrect.rx, ry: rrect.ry };
+    });
+    expect(result).toEqual({ rx: 50, ry: 50 });
+
+    const result1 = await surface.eval((Skia) => {
+      const rrect = Skia.RRectXY(Skia.XYWHRect(0, 0, 100, 100), 200, 20);
+      return { rx: rrect.rx, ry: rrect.ry };
+    });
+    expect(result1).toEqual({ rx: 50, ry: 5 });
+
+    const result2 = await surface.eval((Skia) => {
+      const rrect = Skia.RRectXY(Skia.XYWHRect(0, 0, 100, 100), 0, 0);
+      return rrect.rx + rrect.ry;
+    });
+    expect(result2).toBe(0);
+
+    const result3 = await surface.eval((Skia) => {
+      const rrect = Skia.RRectXY(Skia.XYWHRect(0, 0, 100, 100), 10, 20);
+      return { rx: rrect.rx, ry: rrect.ry };
+    });
+    expect(result3).toEqual({ rx: 10, ry: 20 });
+  });
+  it("Should draw a rounded rect with uniform values (1)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const image = await surface.draw(
+      <RoundedRect
+        x={0}
+        y={0}
+        width={width}
+        height={width}
+        r={r}
+        color="lightblue"
+      />
+    );
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with uniform values (2)", async () => {
+    const { Skia } = importSkia();
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = Skia.RRectXY(Skia.XYWHRect(0, 0, width, width), r, r);
+    const image = await surface.draw(
+      <RoundedRect rect={rrct} color="lightblue" />
+    );
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with uniform values (3)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = {
+      rect: { x: 0, y: 0, width, height: width },
+      topLeft: { x: r, y: r },
+      topRight: { x: r, y: r },
+      bottomRight: { x: r, y: r },
+      bottomLeft: { x: r, y: r },
+    };
+    const image = await surface.draw(
+      <RoundedRect rect={rrct} color="lightblue" />
+    );
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with uniform values (4)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const { Skia } = importSkia();
+    const rrct = Skia.RRectXY(Skia.XYWHRect(0, 0, width, width), r, r);
+    const path = Skia.Path.Make();
+    path.addRRect(rrct);
+    const image = await surface.draw(<Path path={path} color="lightblue" />);
+    checkImage(image, docPath("rrect/uniform.png"));
+  });
+  it("Should draw a rounded rect with non-uniform values (1)", async () => {
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = {
+      rect: { x: 0, y: 0, width, height: width },
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: r, y: r },
+      bottomRight: { x: 0, y: 0 },
+      bottomLeft: { x: r, y: r },
+    };
+    const image = await surface.draw(
+      <RoundedRect rect={rrct} color="lightblue" />
+    );
+    checkImage(image, docPath("rrect/nonuniform.png"));
+  });
+  it("Should draw a rounded rect with non-uniform values (2)", async () => {
+    const { Skia } = importSkia();
+    const { width } = surface;
+    const r = width * 0.2;
+    const rrct = {
+      rect: { x: 0, y: 0, width, height: width },
+      topLeft: { x: 0, y: 0 },
+      topRight: { x: r, y: r },
+      bottomRight: { x: 0, y: 0 },
+      bottomLeft: { x: r, y: r },
+    };
+    const path = Skia.Path.Make();
+    path.addRRect(rrct);
+    const image = await surface.draw(<Path path={path} color="lightblue" />);
+    checkImage(image, docPath("rrect/nonuniform.png"));
+  });
+  it("Should draw a rounded rect with non-uniform values (3)", async () => {
+    const { Skia } = importSkia();
+    const { width, height } = surface;
+    const r = width * 0.2;
+    const barPath = Skia.Path.Make();
+    barPath.addRRect({
+      rect: { x: 0, y: 0, width, height },
+      topLeft: { x: r, y: r },
+      topRight: { x: r, y: r },
+      bottomLeft: { x: 0, y: 0 },
+      bottomRight: { x: 0, y: 0 },
+    });
+    const image = await surface.draw(<Path path={barPath} color="lightblue" />);
+    checkImage(image, docPath("rrect/test.png"));
+  });
+  /*
+   */
+  it("Supports CSS3 colors (1)", async () => {
+    const image = await surface.draw(<Fill color="hsl(120, 100%, 50%)" />);
+    checkImage(image, docPath("fill/green.png"));
+  });
+  it("Supports CSS3 colors (2)", async () => {
+    const image = await surface.draw(<Fill color="hsla(120, 100%, 50%, 1)" />);
+    checkImage(image, docPath("fill/green.png"));
+  });
+});

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

@@ -0,0 +1,324 @@
+/* eslint-disable max-len */
+import React from "react";
+
+import { surface, importSkia, fonts } from "../setup";
+import {
+  Circle,
+  Fill,
+  Group,
+  Paint,
+  RuntimeShader,
+  Text,
+} from "../../components";
+import { checkImage, docPath, itRunsE2eOnly } from "../../../__tests__/setup";
+
+const spiral = `
+uniform float scale;
+uniform float2 center;
+uniform float4 color;
+uniform shader image;
+
+half4 main(float2 p) {
+    float2 pp = p - center;
+    float radius = sqrt(dot(pp, pp));
+    radius = sqrt(radius);
+    float angle = atan(pp.y / pp.x);
+    float t = (angle + 3.1415926/2) / (3.1415926);
+    t += radius * scale;
+    t = fract(t);
+    return half4(mix(image.eval(vec2(0.5, 0.5)), color, t));
+}`;
+
+describe("Runtime Shader", () => {
+  itRunsE2eOnly("should use the sdf of a circle", async () => {
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform shader image;
+
+half4 main(float2 xy) {
+  vec4 color =  image.eval(xy);
+  if (xy.x < 128) {
+    return color;
+  }
+  return color.rbga;
+}
+    `)!;
+    const r = surface.width / 2;
+    expect(source).toBeDefined();
+    const img = await surface.draw(
+      <Group>
+        <RuntimeShader source={source} />
+        <Circle cx={r} cy={r} r={r} color="lightblue" />
+      </Group>
+    );
+    checkImage(img, "snapshots/runtime-shader/simple.png");
+  });
+  itRunsE2eOnly("should display a green and blue spiral", async () => {
+    const { width, height } = surface;
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(spiral)!;
+    expect(source).toBeTruthy();
+    const scale = 3;
+    const img = await surface.draw(
+      <>
+        <Group transform={[{ scale: 1 / scale }]}>
+          <Group
+            layer={
+              <Paint>
+                <RuntimeShader
+                  source={source}
+                  uniforms={{
+                    scale: 1 / scale,
+                    center: { x: (width * scale) / 2, y: (height * scale) / 2 },
+                    color: Skia.Color("rgb(0, 255, 0)"),
+                  }}
+                />
+              </Paint>
+            }
+            transform={[{ scale }]}
+          >
+            <Fill color="blue" />
+          </Group>
+        </Group>
+      </>
+    );
+    checkImage(img, "snapshots/runtime-shader/spiral.png");
+  });
+  itRunsE2eOnly(
+    "should be the reference result for the next test (1)",
+    async () => {
+      const { width, height } = surface;
+      const raw = await surface.eval(
+        (Skia, ctx) => {
+          const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
+          if (!offscreen) {
+            throw new Error("Could not create offscreen surface");
+          }
+          const canvas = offscreen.getCanvas();
+          const paint = Skia.Paint();
+          paint.setColor(Skia.Color("lightblue"));
+          canvas.save();
+          canvas.scale(3, 3);
+          canvas.drawCircle(0, 0, 25, paint);
+          canvas.restore();
+          offscreen.flush();
+          return offscreen.makeImageSnapshot().encodeToBase64();
+        },
+        { width, height }
+      );
+      const { Skia } = importSkia();
+      const data = Skia.Data.fromBase64(raw);
+      const img = Skia.Image.MakeImageFromEncoded(data)!;
+      expect(data).toBeDefined();
+
+      checkImage(img, "snapshots/runtime-shader/scaled-circle.png");
+    }
+  );
+  itRunsE2eOnly("should display display the circle untouched (1)", async () => {
+    const { width, height } = surface;
+    const raw = await surface.eval(
+      (Skia, ctx) => {
+        const offscreen = Skia.Surface.MakeOffscreen(ctx.width, ctx.height);
+        if (!offscreen) {
+          throw new Error("Could not create offscreen surface");
+        }
+        const canvas = offscreen.getCanvas();
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("lightblue"));
+        const paint2 = Skia.Paint();
+        const passThrough = `
+uniform shader image;
+
+half4 main(float2 xy) {
+  return image.eval(xy);
+}
+`;
+        const builder = Skia.RuntimeShaderBuilder(
+          Skia.RuntimeEffect.Make(passThrough)!
+        );
+        paint2.setImageFilter(
+          Skia.ImageFilter.MakeRuntimeShader(builder, null, null)
+        );
+        canvas.saveLayer(paint2);
+        canvas.scale(3, 3);
+        canvas.drawCircle(0, 0, 25, paint);
+        canvas.restore();
+        offscreen.flush();
+        return offscreen.makeImageSnapshot().encodeToBase64();
+      },
+      { width, height }
+    );
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBase64(raw);
+    const img = Skia.Image.MakeImageFromEncoded(data)!;
+    expect(data).toBeDefined();
+
+    checkImage(img, "snapshots/runtime-shader/scaled-circle.png", {
+      maxPixelDiff: 4,
+    });
+  });
+  itRunsE2eOnly(
+    "should be the reference result for the next test (2)",
+    async () => {
+      const raw = await surface.eval(
+        (Skia, ctx) => {
+          const { width, height } = ctx;
+          const data = Skia.Data.fromBase64(
+            "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAABJhJREFUeJzt3T2LVGcYx+H7GeJXCDjGtLurVep8i3W0swg2wSJdUDAgCAYMFlaKBgJ2gqSwEBIQBJM0gRRiQEEUDBqEFQQLwbhz7hR5ITHqHuM588zMua4PsPtv5seZM+elfH3r1wxa2bM6LrU3QJdGtQcskM3aA6BrAtDes9oDoGsC0N7T2gOgawLQVilPak+ArglAW5mPa0+ArglAe49qD4CuCUBbJR/WngBdE4CWMsuD2hugawLQ0qjEvdoboGsC0FKJ0d3aG6BrAtDS883mdu0N0DUBaCEjnuzbPf6l9g7omgC0UCJu1N4AfRCAVvJ67QXQBwFoISN+qr0B+iAALYya6Y+1N0AfBGBrG+u73v+59gjogwBsITO+q70B+iIAW8qrtRdAXwRgK6NypfYE6IsAvN7Nycr4Vu0R0BcBeI3MvFx7A/RJAF5jNNp2qfYG6JMAvEopd9ZX3v2+9gzokwC8Qom8WHsD9E0AXqm5UHsB9E0AXqbEtfWV99wAxNITgJfIzPO1N8AsCMB/bUxWd3xVewTMggC8ICPO1d4AsyIAL2jK9EztDTArAvAveXrfyk7P/2cwBOAfsmlO1d4AsyQAf8vTk107PfqbQRGAP02n5UTtDTBrAhARGXHcc/8ZIgGIuN9Mtx+rPQJqGHwAMvLovt3lt9o7oIahB+AbV/0xZIMOQCnN4doboKbBBqDJOOKOP4ZuqAG4undt/HntEVDbEAOwWZrNT2qPgHkwuACUEge96gv+MLQAnF1fGX9ZewTMiyEF4Ic9q+OPa4+AeTKUAGxkM/2o9giYN4MIQGbsd6cf/NfSByAjD0zWxt/W3gHz6J3aA/pVDk1Wxy71hVdY2iOAjDi+Z3X7F7V3wDxbygBk5snJ6viz2jtg3i1dADLz5GRtx6e1d8AiWKoAZMRxH35ob4lOApZDE9/54Y0sRQAy8oCz/fDmFj0AG5mxf7K2w+/88D8s8jmAH7KZfugiH/j/FvUI4Kwbe+DtLVoANkuJg27phW4s0leAq6XZ/MCHH7qzEEcATcYRz/CD7s17AL4ppTm8d9XTe6EP8xqA+xl51Es7oF9zF4CMON5Mtx/zui7o3xwFIE9Pp+WEt/TC7MxBAPJ0Ns0pj+yC2asVgI2MONeU6Zl9KzsfVNoAgzfbAJS4lpnnndyD+dB/AEq5UyIvRjQXvIwT5ktfAbiZmZdHo22X1lfe/b6n/wG8pa4CsJEZ30Xk1RiVK5OV8a2O/i7QozcOQEY8KRE3IvJ6Rvw0aqY/etkmLKa/ArAZEc8i4mmU8iQyH0fEoyj5MLM8GJW4V2J09/lmc9vv9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACy93wFAN/itW1l45QAAAABJRU5ErkJggg=="
+          );
+          const image = Skia.Image.MakeImageFromEncoded(data)!;
+          const offscreen = Skia.Surface.MakeOffscreen(width * 3, height * 3);
+          if (!offscreen) {
+            throw new Error("Could not create offscreen surface");
+          }
+          const canvas = offscreen.getCanvas();
+          const paint = Skia.Paint();
+          paint.setColor(Skia.Color("lightblue"));
+          canvas.save();
+          canvas.scale(3, 3);
+          canvas.drawImageRect(
+            image,
+            Skia.XYWHRect(0, 0, width, height),
+            Skia.XYWHRect(0, 0, width / 3, height / 3),
+            paint
+          );
+          canvas.restore();
+          offscreen.flush();
+          return offscreen.makeImageSnapshot().encodeToBase64();
+        },
+        { width: surface.width, height: surface.height }
+      );
+      const { Skia } = importSkia();
+      const data = Skia.Data.fromBase64(raw);
+      const img = Skia.Image.MakeImageFromEncoded(data)!;
+      expect(data).toBeDefined();
+
+      checkImage(img, "snapshots/runtime-shader/scaled-circle2.png");
+    }
+  );
+  itRunsE2eOnly(
+    "should leave the image from the previous test untouched (2)",
+    async () => {
+      const raw = await surface.eval(
+        (Skia, ctx) => {
+          const { width, height } = ctx;
+          const paint2 = Skia.Paint();
+          const passThrough = `uniform shader image;
+
+half4 main(float2 xy) {
+  return image.eval(xy);
+}`;
+          const builder = Skia.RuntimeShaderBuilder(
+            Skia.RuntimeEffect.Make(passThrough)!
+          );
+          paint2.setImageFilter(
+            Skia.ImageFilter.MakeRuntimeShader(builder, null, null)
+          );
+          const data = Skia.Data.fromBase64(
+            "iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAABJhJREFUeJzt3T2LVGcYx+H7GeJXCDjGtLurVep8i3W0swg2wSJdUDAgCAYMFlaKBgJ2gqSwEBIQBJM0gRRiQEEUDBqEFQQLwbhz7hR5ITHqHuM588zMua4PsPtv5seZM+elfH3r1wxa2bM6LrU3QJdGtQcskM3aA6BrAtDes9oDoGsC0N7T2gOgawLQVilPak+ArglAW5mPa0+ArglAe49qD4CuCUBbJR/WngBdE4CWMsuD2hugawLQ0qjEvdoboGsC0FKJ0d3aG6BrAtDS883mdu0N0DUBaCEjnuzbPf6l9g7omgC0UCJu1N4AfRCAVvJ67QXQBwFoISN+qr0B+iAALYya6Y+1N0AfBGBrG+u73v+59gjogwBsITO+q70B+iIAW8qrtRdAXwRgK6NypfYE6IsAvN7Nycr4Vu0R0BcBeI3MvFx7A/RJAF5jNNp2qfYG6JMAvEopd9ZX3v2+9gzokwC8Qom8WHsD9E0AXqm5UHsB9E0AXqbEtfWV99wAxNITgJfIzPO1N8AsCMB/bUxWd3xVewTMggC8ICPO1d4AsyIAL2jK9EztDTArAvAveXrfyk7P/2cwBOAfsmlO1d4AsyQAf8vTk107PfqbQRGAP02n5UTtDTBrAhARGXHcc/8ZIgGIuN9Mtx+rPQJqGHwAMvLovt3lt9o7oIahB+AbV/0xZIMOQCnN4doboKbBBqDJOOKOP4ZuqAG4undt/HntEVDbEAOwWZrNT2qPgHkwuACUEge96gv+MLQAnF1fGX9ZewTMiyEF4Ic9q+OPa4+AeTKUAGxkM/2o9giYN4MIQGbsd6cf/NfSByAjD0zWxt/W3gHz6J3aA/pVDk1Wxy71hVdY2iOAjDi+Z3X7F7V3wDxbygBk5snJ6viz2jtg3i1dADLz5GRtx6e1d8AiWKoAZMRxH35ob4lOApZDE9/54Y0sRQAy8oCz/fDmFj0AG5mxf7K2w+/88D8s8jmAH7KZfugiH/j/FvUI4Kwbe+DtLVoANkuJg27phW4s0leAq6XZ/MCHH7qzEEcATcYRz/CD7s17AL4ppTm8d9XTe6EP8xqA+xl51Es7oF9zF4CMON5Mtx/zui7o3xwFIE9Pp+WEt/TC7MxBAPJ0Ns0pj+yC2asVgI2MONeU6Zl9KzsfVNoAgzfbAJS4lpnnndyD+dB/AEq5UyIvRjQXvIwT5ktfAbiZmZdHo22X1lfe/b6n/wG8pa4CsJEZ30Xk1RiVK5OV8a2O/i7QozcOQEY8KRE3IvJ6Rvw0aqY/etkmLKa/ArAZEc8i4mmU8iQyH0fEoyj5MLM8GJW4V2J09/lmc9vv9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACy93wFAN/itW1l45QAAAABJRU5ErkJggg=="
+          );
+          const image = Skia.Image.MakeImageFromEncoded(data)!;
+          const offscreen = Skia.Surface.MakeOffscreen(width * 3, height * 3);
+          if (!offscreen) {
+            throw new Error("Could not create offscreen surface");
+          }
+          const canvas = offscreen.getCanvas();
+          const paint = Skia.Paint();
+          paint.setColor(Skia.Color("lightblue"));
+          canvas.scale(3, 3);
+          canvas.saveLayer(paint2);
+          canvas.drawImageRect(
+            image,
+            Skia.XYWHRect(0, 0, width, height),
+            Skia.XYWHRect(0, 0, width / 3, height / 3),
+            paint
+          );
+          canvas.restore();
+          canvas.restore();
+          offscreen.flush();
+          return offscreen.makeImageSnapshot().encodeToBase64();
+        },
+        { width: surface.width, height: surface.height }
+      );
+      const { Skia } = importSkia();
+      const data = Skia.Data.fromBase64(raw);
+      const img = Skia.Image.MakeImageFromEncoded(data)!;
+      expect(data).toBeDefined();
+
+      checkImage(img, "snapshots/runtime-shader/scaled-circle2.png");
+    }
+  );
+  itRunsE2eOnly("should use supersampling", async () => {
+    const font = fonts.RobotoMedium;
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform shader image;
+
+half4 main(float2 xy) {
+  vec4 color =  image.eval(xy);
+  if (xy.x < 256 * 3/2) {
+    return color;
+  }
+  return color.rbga;
+}
+`)!;
+    const img = await surface.draw(
+      <>
+        <Group transform={[{ scale: 1 / 3 }]}>
+          <Group
+            layer={
+              <Paint>
+                <RuntimeShader source={source} />
+              </Paint>
+            }
+            transform={[{ scale: 3 }]}
+          >
+            <Fill color="#B7C9E2" />
+            <Text
+              text="Hello World"
+              x={16}
+              y={32}
+              color="#e38ede"
+              font={font}
+            />
+          </Group>
+        </Group>
+      </>
+    );
+    checkImage(img, docPath("runtime-shader/with-supersampling.png"), {
+      maxPixelDiff: 1200,
+    });
+  });
+  itRunsE2eOnly("shouldn't use supersampling", async () => {
+    const font = fonts.RobotoMedium;
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform shader image;
+
+half4 main(float2 xy) {
+  vec4 color =  image.eval(xy);
+  if (xy.x < 256 / 2) {
+    return color;
+  }
+  return color.rbga;
+}
+`)!;
+    const img = await surface.draw(
+      <>
+        <Group
+          layer={
+            <Paint>
+              <RuntimeShader source={source} />
+            </Paint>
+          }
+        >
+          <Fill color="#B7C9E2" />
+          <Text text="Hello World" x={16} y={32} color="#e38ede" font={font} />
+        </Group>
+      </>
+    );
+    checkImage(img, docPath("runtime-shader/without-supersampling.png"), {
+      maxPixelDiff: 500,
+    });
+  });
+});

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

@@ -0,0 +1,148 @@
+import React from "react";
+
+import { surface, importSkia } from "../setup";
+import { Fill, Shader } from "../../components";
+import { checkImage } from "../../../__tests__/setup";
+
+describe("Signed Distance Function", () => {
+  it("should use the sdf of a circle", async () => {
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform float4 c1;
+uniform float4 c2;
+uniform float4 c3;
+uniform float4 c4;
+
+float sdCircle(vec2 p, float r) {
+  return length(p)-r;
+}
+
+vec4 main(vec2 xy) { 
+  vec2 c = vec2(128.0, 128.0);
+  float d = sdCircle(xy-c, 128.0);
+  return mix(c1, c2, saturate(d));
+}
+`)!;
+    const c1 = Skia.Color("#61dafb");
+    const c2 = Skia.Color("#fb61da");
+    const c3 = Skia.Color("#61fbcf");
+    const c4 = Skia.Color("#dafb61");
+    expect(source).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={source} uniforms={{ c1, c2, c3, c4 }} />
+      </Fill>
+    );
+    checkImage(img, "snapshots/sdf/circle.png");
+  });
+  it("should use the sdf of a line", async () => {
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform float4 c1;
+uniform float4 c2;
+
+float sdLine(vec2 p, vec2 a, vec2 b) {
+  float2 ab = b - a;
+  float2 ap = p - a;
+  float h = saturate(dot(ab, ap)/dot(ab, ab));
+  float2 aq = h * ab;
+  float d = length(ap-aq);//distance(p, aq+a);//sqrt(pow(length(ap), 2) - pow(length(aq), 2));
+  return d;
+}
+vec4 main(vec2 xy) { 
+  float strokeWidth = 40;
+  float2 p1 = vec2(32);
+  float2 p2 = vec2(256-32);
+  vec2 c = vec2(128.0, 128.0);
+  float d = sdLine(xy, p1, p2);
+  if (d < strokeWidth/2) {
+    return c2;
+  }
+  return c1;
+}
+`)!;
+    const c1 = Skia.Color("#61dafb");
+    const c2 = Skia.Color("#fb61da");
+    expect(source).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={source} uniforms={{ c1, c2 }} />
+      </Fill>
+    );
+    checkImage(img, "snapshots/sdf/line.png");
+  });
+  it("should use the sdf of a rectangle", async () => {
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform float4 c1;
+uniform float4 c2;
+
+float sdRect( in vec2 p, in vec2 b ) {
+    vec2 d = abs(p)-b;
+    return length(max(d,0.0)) + min(max(d.x,d.y),0.0);
+}
+
+vec4 main(vec2 xy) { 
+  vec2 b = vec2(64, 64);
+  vec2 c = vec2(128.0, 128.0);
+  float d = sdRect(xy - c, b);
+  if (d < 0) {
+    return c2;
+  }
+  return c1;
+}
+`)!;
+    const c1 = Skia.Color("#61dafb");
+    const c2 = Skia.Color("#fb61da");
+    expect(source).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={source} uniforms={{ c1, c2 }} />
+      </Fill>
+    );
+    checkImage(img, "snapshots/sdf/rectangle.png");
+  });
+  it("should use the sdf of a heart", async () => {
+    const { Skia } = importSkia();
+    const source = Skia.RuntimeEffect.Make(`
+uniform float4 c1;
+uniform float4 c2;
+uniform float2 resolution;
+
+float dot2(in vec2 v) { return dot(v,v); }
+
+float sdHeart(in vec2 p)
+{
+    p.x = abs(p.x);
+
+    if( p.y+p.x>1.0 )
+        return sqrt(dot2(p-vec2(0.25,0.75))) - sqrt(2.0)/4.0;
+    return sqrt(min(dot2(p-vec2(0.00,1.00)),
+                    dot2(p-0.5*max(p.x+p.y,0.0)))) * sign(p.x-p.y);
+}
+
+vec4 main(vec2 xy) {
+  vec2 p = (xy*2.0-resolution.xy)/-resolution.y;
+  p.y += 0.5;
+  float d = sdHeart(p);
+  if (d < 0) {
+    return c2;
+  }
+  return c1;
+}
+`)!;
+    const c1 = Skia.Color("#61dafb");
+    const c2 = Skia.Color("#fb61da");
+    expect(source).toBeDefined();
+    const { width, height } = surface;
+    const img = await surface.draw(
+      <Fill>
+        <Shader
+          source={source}
+          uniforms={{ c1, c2, resolution: [width, height] }}
+        />
+      </Fill>
+    );
+    checkImage(img, "snapshots/sdf/heart.png", { maxPixelDiff: 500 });
+  });
+});