@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,278 @@
+import React from "react";
+
+import {
+  height as wHeight,
+  importSkia,
+  surface,
+  width as wWidth,
+  images,
+} from "../setup";
+import { processResult, checkImage } from "../../../__tests__/setup";
+import {
+  ColorShader,
+  Fill,
+  Group,
+  Image,
+  ImageShader,
+  RoundedRect,
+} from "../../components";
+import { setupSkia } from "../../../skia/__tests__/setup";
+import { fitRects } from "../../../dom/nodes/datatypes/Fitting";
+
+describe("Opacity", () => {
+  it("Build reference result", async () => {
+    const image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Fill color="rgba(0, 0, 255, 0.25)" />
+      </>
+    );
+    checkImage(image, "snapshots/drawings/violet.png");
+  });
+  it("Should multiply multiply the color opacity (1)", async () => {
+    const image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Group opacity={0.5}>
+          <Fill color="rgba(0, 0, 255, 0.5)" />
+        </Group>
+      </>
+    );
+    checkImage(image, "snapshots/drawings/violet.png");
+  });
+  it("Should multiply multiply the color opacity (2)", async () => {
+    const image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Group opacity={0.5}>
+          <Group opacity={0.5}>
+            <Fill color="blue" />
+          </Group>
+        </Group>
+      </>
+    );
+    checkImage(image, "snapshots/drawings/violet.png");
+  });
+  it("Should multiply the opacity to 0", async () => {
+    const { rect, rrect } = importSkia();
+    const { width } = surface;
+    const r = width * 0.5;
+    const image = await surface.draw(
+      <Group>
+        <Fill color="lightblue" />
+        <Group opacity={0}>
+          <RoundedRect
+            rect={rrect(rect(0, 0, r, r), r, r)}
+            color="rgba(0, 0, 0, 0.2)"
+          />
+          <RoundedRect
+            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
+            color="white"
+          />
+        </Group>
+      </Group>
+    );
+    checkImage(image, "snapshots/drawings/opacity-multiplication.png");
+  });
+  it("Should build a reference result for the opacity", () => {
+    const { surface: ckSurface, canvas, Skia } = setupSkia(wWidth, wHeight);
+    const { rect, rrect } = importSkia();
+    const p1 = Skia.Paint();
+    const r = wWidth * 0.5;
+
+    p1.setColor(Skia.Color("lightblue"));
+    p1.setAlphaf(0.5);
+    canvas.drawPaint(p1);
+
+    const p2 = Skia.Paint();
+    p2.setColor(Skia.Color("rgba(0, 0, 0, 1)"));
+    p2.setAlphaf(0.2 * 0.5 * 0.5);
+    canvas.drawRRect(rrect(rect(0, 0, r, r), r, r), p2);
+
+    const p3 = Skia.Paint();
+    p3.setColor(Skia.Color("white"));
+    p3.setAlphaf(0.5 * 0.5);
+    canvas.drawRRect(rrect(rect(0, 0, r / 2, r / 2), r, r), p3);
+
+    processResult(ckSurface, "snapshots/drawings/opacity-multiplication2.png");
+  });
+  it("Should multiply the opacity to 0.25", async () => {
+    const { rect, rrect } = importSkia();
+    const { width } = surface;
+    const r = width * 0.5;
+    const image = await surface.draw(
+      <Group opacity={0.5}>
+        <Fill color="lightblue" />
+        <Group opacity={0.5}>
+          <RoundedRect
+            rect={rrect(rect(0, 0, r, r), r, r)}
+            color="rgba(0, 0, 0, 0.2)"
+          />
+          <RoundedRect
+            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
+            color="white"
+          />
+        </Group>
+      </Group>
+    );
+    checkImage(image, "snapshots/drawings/opacity-multiplication2.png");
+  });
+  it("Should build a reference result for shader opacity", () => {
+    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
+    canvas.drawColor(Skia.Color("white"));
+    const paint = Skia.Paint();
+    paint.setShader(Skia.Shader.MakeColor(Skia.Color("lightblue")));
+    paint.setAlphaf(0.5);
+    canvas.drawPaint(paint);
+    processResult(ckSurface, "snapshots/drawings/shader-opacity-reference.png");
+  });
+  it("Should set shader opacity (1)", async () => {
+    let image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Group opacity={0.5}>
+          <ColorShader color="lightblue" />
+          <Fill />
+        </Group>
+      </>
+    );
+    checkImage(image, "snapshots/drawings/shader-opacity-reference.png");
+    image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Fill opacity={0.5}>
+          <ColorShader color="lightblue" />
+        </Fill>
+      </>
+    );
+    checkImage(image, "snapshots/drawings/shader-opacity-reference.png");
+  });
+  it("Should multiply the opacity to 0.25 using a Shader", async () => {
+    const { rect, rrect } = importSkia();
+    const { width } = surface;
+    const r = width * 0.5;
+    const image = await surface.draw(
+      <Group opacity={0.5}>
+        <Fill color="lightblue" />
+        <Group opacity={0.5}>
+          <RoundedRect rect={rrect(rect(0, 0, r, r), r, r)} opacity={0.2}>
+            <ColorShader color="black" />
+          </RoundedRect>
+          <RoundedRect
+            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
+            color="white"
+          />
+        </Group>
+      </Group>
+    );
+    checkImage(image, "snapshots/drawings/opacity-multiplication2.png");
+  });
+  it("Build reference result (2)", () => {
+    const {
+      surface: ckSurface,
+      Skia,
+      canvas,
+      width,
+      height,
+    } = setupSkia(wWidth, wHeight);
+    const { oslo } = images;
+    canvas.drawColor(Skia.Color("lightblue"));
+    const paint = Skia.Paint();
+    paint.setAlphaf(0.5);
+    const { src, dst } = fitRects(
+      "cover",
+      {
+        x: 0,
+        y: 0,
+        width: oslo.width(),
+        height: oslo.height(),
+      },
+      { x: 0, y: 0, width, height }
+    );
+    canvas.drawImageRect(oslo, src, dst, paint);
+    processResult(ckSurface, "snapshots/drawings/opacity-image.png");
+  });
+  it("Should apply opacity to an image (1)", async () => {
+    const { oslo } = images;
+    const { width, height } = surface;
+    const img = await surface.draw(
+      <Group>
+        <Fill color="lightblue" />
+        <Group opacity={0.5}>
+          <Image
+            image={oslo}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+        </Group>
+      </Group>
+    );
+    checkImage(img, "snapshots/drawings/opacity-image.png");
+  });
+  it("Should apply opacity to an image (2)", async () => {
+    const { oslo } = images;
+    const {} = importSkia();
+    const { width, height } = surface;
+    const img = await surface.draw(
+      <Group>
+        <Fill color="lightblue" />
+        <Image
+          opacity={0.5}
+          image={oslo}
+          x={0}
+          y={0}
+          width={width}
+          height={height}
+          fit="cover"
+        />
+      </Group>
+    );
+    checkImage(img, "snapshots/drawings/opacity-image.png");
+  });
+  it("Should apply opacity to an image shader (1)", async () => {
+    const { oslo } = images;
+    const { width, height } = surface;
+    const img = await surface.draw(
+      <Group>
+        <Fill color="lightblue" />
+        <Fill opacity={0.5}>
+          <ImageShader
+            image={oslo}
+            x={0}
+            y={0}
+            width={width}
+            height={height}
+            fit="cover"
+          />
+        </Fill>
+      </Group>
+    );
+    checkImage(img, "snapshots/drawings/opacity-image.png");
+  });
+  it("Should apply opacity to an image shader (2)", async () => {
+    const { oslo } = images;
+    const {} = importSkia();
+    const { width, height } = surface;
+    const img = await surface.draw(
+      <Group>
+        <Fill color="lightblue" />
+        <Group opacity={0.5}>
+          <Fill>
+            <ImageShader
+              image={oslo}
+              x={0}
+              y={0}
+              width={width}
+              height={height}
+              fit="cover"
+            />
+          </Fill>
+        </Group>
+      </Group>
+    );
+    checkImage(img, "snapshots/drawings/opacity-image.png");
+  });
+});

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

@@ -0,0 +1,170 @@
+/* eslint-disable max-len */
+import React from "react";
+
+import { surface, importSkia } from "../setup";
+import {
+  Circle,
+  Fill,
+  Group,
+  LinearGradient,
+  Paint,
+  Path,
+} from "../../components";
+import { checkImage } from "../../../__tests__/setup";
+import { fitbox } from "../../components/shapes/FitBox";
+
+const blendModes = [
+  "clear",
+  "src",
+  "dst",
+  "srcOver",
+  "dstOver",
+  "srcIn",
+  "dstIn",
+  "srcOut",
+  "dstOut",
+  "srcATop",
+  "dstATop",
+  "xor",
+  "plus",
+  "modulate",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "colorDodge",
+  "colorBurn",
+  "hardLight",
+  "softLight",
+  "difference",
+  "exclusion",
+  "multiply",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+] as const;
+
+const SIZE = 32;
+const COLS = 256 / SIZE;
+
+describe("Paint", () => {
+  it("should interpret the #rrggbbaa correctly", async () => {
+    const { width, height } = surface;
+    const { rect } = importSkia();
+    const image = await surface.draw(
+      <>
+        <Group clip={rect(0, 0, width / 2, height)}>
+          <Fill color="#ff000079" />
+        </Group>
+        <Group clip={rect(width / 2, 0, width / 2, height)}>
+          <Fill color="#ff000080" />
+        </Group>
+      </>
+    );
+    checkImage(image, "snapshots/paint/colors.png");
+  });
+  it("should accept a paint object as property", async () => {
+    const { width, height } = surface;
+    const { Skia } = importSkia();
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("lightblue"));
+    const image = await surface.draw(
+      <Group>
+        <Circle
+          cx={width / 2}
+          cy={height / 2}
+          r={width / 2}
+          paint={paint}
+          color="red"
+        />
+      </Group>
+    );
+    checkImage(image, "snapshots/paint/circle.png");
+  });
+  it("should accept a paint object as path property", async () => {
+    const { Skia } = importSkia();
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("lightblue"));
+    const image = await surface.draw(
+      <Group>
+        <Path path="M0 0h100v100H0z" paint={paint} color="red" />
+      </Group>
+    );
+    checkImage(image, "snapshots/paint/path-paint.png");
+  });
+  it("should display blend modes properly", async () => {
+    const { Skia, rect } = importSkia();
+    const src = Skia.Path.MakeFromSVGString(
+      [
+        "M170.699 148.614C135.228 184.085 100.799 213.726 74.0057 232.813C90.1873 241.166 108.534 245.913 127.998 245.913C193.121 245.913 245.909 193.124 245.909 128.001C245.909 110.165 241.926 93.2652 234.837 78.1096C217.359 99.6154 195.456 123.859 170.699 148.615V148.614Z",
+        "M254.299 1.69725C247.995 -4.60656 225.09 7.01991 194.111 30.4188C175.254 17.6079 152.513 10.089 127.998 10.089C62.8758 10.089 10.0869 62.8778 10.0869 128C10.0869 152.517 17.6079 175.254 30.4188 194.113C7.01991 225.094 -4.60656 248.001 1.69725 254.301C13.1117 265.715 78.9083 218.421 148.663 148.666C218.418 78.9109 265.715 13.1111 254.298 1.69986L254.299 1.69725Z",
+      ].join(" ")
+    )!;
+    const dst = Skia.Path.MakeFromSVGString(
+      [
+        "M3.75337 3.75477C10.8647 -3.35674 92.9919 -5.28784 142.454 44.1778C154.016 55.7403 163.904 67.9247 171.948 80.1734L208.991 81.7669L256 128.773L195.968 145.267C196.467 160.332 192.34 173.419 182.882 182.88C173.423 192.338 160.334 196.467 145.27 195.967L128.776 256L81.7688 208.991L80.1773 171.946C67.9284 163.902 55.7442 154.012 44.1825 142.451C-5.28603 92.9918 -3.359 10.8662 3.75637 3.75272L3.75337 3.75477ZM48.1571 79.8283C56.9032 88.5745 71.0812 88.5745 79.8252 79.8283C88.5712 71.0821 88.5712 56.9038 79.8252 48.1595C71.0791 39.4133 56.9012 39.4133 48.1571 48.1595C39.4111 56.9038 39.4111 71.0841 48.1571 79.8283Z",
+        "M195.01 222.191C184.687 211.867 183.417 199.108 191.258 191.264C199.098 183.425 211.857 184.692 222.184 195.017C235.86 208.692 242.751 238.822 240.785 240.789C238.817 242.759 208.688 235.867 195.01 222.191Z",
+      ].join(" ")
+    )!;
+    expect(src).toBeDefined();
+    expect(dst).toBeDefined();
+    const srcBox = src.computeTightBounds();
+    const dstBox = dst.computeTightBounds();
+    const img = await surface.draw(
+      <>
+        {blendModes.map((blendMode, i) => {
+          return (
+            <Group
+              transform={[
+                { translateX: SIZE * (i % COLS) },
+                { translateY: SIZE * Math.floor(i / COLS) },
+              ]}
+              key={blendMode}
+              layer
+            >
+              <Path
+                path={dst}
+                transform={fitbox("contain", dstBox, rect(0, 0, SIZE, SIZE))}
+                color="pink"
+              />
+              <Group layer={<Paint blendMode={blendMode} />}>
+                <Path
+                  path={src}
+                  color="lightblue"
+                  transform={fitbox("contain", srcBox, rect(0, 0, SIZE, SIZE))}
+                />
+              </Group>
+            </Group>
+          );
+        })}
+      </>
+    );
+    checkImage(img, "snapshots/paint/blend-mode.png");
+  });
+  it("Dithering", async () => {
+    const { height } = surface;
+    const { vec } = importSkia();
+    const c1 = "#202225ff";
+    const c2 = "#141619FF";
+    async function drawGradientWithDither(dither: boolean) {
+      return surface.draw(
+        <Fill dither={dither}>
+          <LinearGradient
+            start={vec(0, 0)}
+            end={vec(0, height)}
+            colors={[c1, c2]}
+          />
+        </Fill>
+      );
+    }
+    const withDither = await drawGradientWithDither(true);
+    const withoutDither = await drawGradientWithDither(false);
+    checkImage(withDither, "snapshots/paint/dither.png");
+    checkImage(withoutDither, "snapshots/paint/without-dither.png");
+    checkImage(withoutDither, "snapshots/paint/dither.png", {
+      shouldFail: true,
+      threshold: 0,
+    });
+  });
+});

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

@@ -0,0 +1,262 @@
+import React from "react";
+
+import { importSkia, resolveFile, surface } from "../setup";
+import { checkImage, docPath } from "../../../__tests__/setup";
+import {
+  Blur,
+  ColorMatrix,
+  Fill,
+  Group,
+  OpacityMatrix,
+  Paint,
+  Paragraph,
+} from "../../components";
+
+import { ParagraphAsset } from "./setup";
+
+const RobotoMedium = Array.from(
+  resolveFile("skia/__tests__/assets/Roboto-Medium.ttf")
+);
+
+describe("Paragraphs", () => {
+  it("Should use shader for the foreground and background", async () => {
+    const img = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
+        const robotoMedium = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoMedium))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoMedium, "Roboto");
+        const colors = ["#dafb61", "#61DAFB", "#fb61da", "#61fbcf"].flatMap(
+          (c) => Array.from(Skia.Color(c))
+        );
+        const rt = Skia.RuntimeEffect.Make(ctx.bilinearInterpolation)!;
+        const backgroundPaint = Skia.Paint();
+        backgroundPaint.setShader(
+          rt.makeShader([0, 0, ctx.width, ctx.height, ...colors])
+        );
+        const foregroundPaint = Skia.Paint();
+        foregroundPaint.setShader(
+          Skia.Shader.MakeRadialGradient(
+            { x: 0, y: 0 },
+            ctx.width,
+            ["magenta", "yellow"].map((cl) => Skia.Color(cl)),
+            null,
+            0
+          )
+        );
+        const para = Skia.ParagraphBuilder.Make({}, provider)
+          .pushStyle(
+            {
+              fontFamilies: ["Roboto"],
+              fontSize: 72,
+              fontStyle: { weight: 500 },
+            },
+            foregroundPaint,
+            backgroundPaint
+          )
+          .addText("Say Hello to Skia")
+          .pop()
+          .build();
+        para.layout(ctx.width);
+        para.paint(canvas, 0, 0);
+      },
+      {
+        RobotoMedium,
+        width: surface.width,
+        height: surface.height,
+        bilinearInterpolation: `
+        uniform vec4 position;
+        uniform vec4 colors[4];
+        
+        vec4 main(vec2 pos) {
+          vec2 uv = (pos - vec2(position.x, position.y))/vec2(position.z, position.w);
+          vec4 colorA = mix(colors[0], colors[1], uv.x);
+          vec4 colorB = mix(colors[2], colors[3], uv.x);
+          return mix(colorA, colorB, uv.y);
+        }`,
+      }
+    );
+    checkImage(img, docPath(`paragraph/background-${surface.OS}.png`));
+  });
+  it("Should use shader for the foreground", async () => {
+    const img = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
+        const robotoMedium = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoMedium))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoMedium, "Roboto");
+        const foregroundPaint = Skia.Paint();
+        foregroundPaint.setShader(
+          Skia.Shader.MakeRadialGradient(
+            { x: 0, y: 0 },
+            ctx.width,
+            ["magenta", "yellow"].map((cl) => Skia.Color(cl)),
+            null,
+            0
+          )
+        );
+        const para = Skia.ParagraphBuilder.Make({}, provider)
+          .pushStyle(
+            {
+              fontFamilies: ["Roboto"],
+              fontSize: 72,
+              fontStyle: { weight: 500 },
+            },
+            foregroundPaint
+          )
+          .addText("Say Hello to Skia")
+          .pop()
+          .build();
+        para.layout(ctx.width);
+        para.paint(canvas, 0, 0);
+      },
+      {
+        RobotoMedium,
+        width: surface.width,
+        height: surface.height,
+        bilinearInterpolation: `
+        uniform vec4 position;
+        uniform vec4 colors[4];
+        
+        vec4 main(vec2 pos) {
+          vec2 uv = (pos - vec2(position.x, position.y))/vec2(position.z, position.w);
+          vec4 colorA = mix(colors[0], colors[1], uv.x);
+          vec4 colorB = mix(colors[2], colors[3], uv.x);
+          return mix(colorA, colorB, uv.y);
+        }`,
+      }
+    );
+    checkImage(img, docPath(`paragraph/foreground-${surface.OS}.png`));
+  });
+  it("Should use shader for the background", async () => {
+    const img = await surface.drawOffscreen(
+      (Skia, canvas, ctx) => {
+        const robotoMedium = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoMedium))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoMedium, "Roboto");
+        const colors = ["#dafb61", "#61DAFB", "#fb61da", "#61fbcf"].flatMap(
+          (c) => Array.from(Skia.Color(c))
+        );
+        const rt = Skia.RuntimeEffect.Make(ctx.bilinearInterpolation)!;
+        const backgroundPaint = Skia.Paint();
+        backgroundPaint.setShader(
+          rt.makeShader([0, 0, ctx.width, ctx.height, ...colors])
+        );
+        const para = Skia.ParagraphBuilder.Make({}, provider)
+          .pushStyle(
+            {
+              fontFamilies: ["Roboto"],
+              fontSize: 72,
+              fontStyle: { weight: 500 },
+              color: Skia.Color("black"),
+            },
+            undefined,
+            backgroundPaint
+          )
+          .addText("Say Hello to Skia")
+          .pop()
+          .build();
+        para.layout(ctx.width);
+        para.paint(canvas, 0, 0);
+      },
+      {
+        RobotoMedium,
+        width: surface.width,
+        height: surface.height,
+        bilinearInterpolation: `
+        uniform vec4 position;
+        uniform vec4 colors[4];
+        
+        vec4 main(vec2 pos) {
+          vec2 uv = (pos - vec2(position.x, position.y))/vec2(position.z, position.w);
+          vec4 colorA = mix(colors[0], colors[1], uv.x);
+          vec4 colorB = mix(colors[2], colors[3], uv.x);
+          return mix(colorA, colorB, uv.y);
+        }`,
+      }
+    );
+    checkImage(img, docPath(`paragraph/background-only-${surface.OS}.png`));
+  });
+
+  it("should apply an image filter to the paragraph", async () => {
+    const { Skia: Sk } = importSkia();
+    const { width } = surface;
+    const paragraph = new ParagraphAsset(
+      Sk,
+      (Skia, ctx) => {
+        const robotoMedium = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoMedium))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoMedium, "Roboto");
+        return Skia.ParagraphBuilder.Make({}, provider)
+          .pushStyle({
+            fontFamilies: ["Roboto"],
+            color: Skia.Color("black"),
+            fontSize: 25,
+          })
+          .addText("Hello Skia")
+          .build();
+      },
+      { RobotoMedium }
+    );
+    const image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Group
+          layer={
+            <Paint>
+              <Blur blur={2} />
+            </Paint>
+          }
+        >
+          <Paragraph paragraph={paragraph} x={0} y={0} width={width} />
+        </Group>
+      </>
+    );
+    checkImage(image, docPath(`blurred-paragraph-${surface.OS}.png`));
+  });
+
+  it("should apply an opacity filter to the paragraph", async () => {
+    const { Skia: Sk } = importSkia();
+    const { width } = surface;
+    const paragraph = new ParagraphAsset(
+      Sk,
+      (Skia, ctx) => {
+        const robotoMedium = Skia.Typeface.MakeFreeTypeFaceFromData(
+          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoMedium))
+        )!;
+        const provider = Skia.TypefaceFontProvider.Make();
+        provider.registerFont(robotoMedium, "Roboto");
+        return Skia.ParagraphBuilder.Make({}, provider)
+          .pushStyle({
+            fontFamilies: ["Roboto"],
+            color: Skia.Color("black"),
+            fontSize: 25,
+          })
+          .addText("Hello Skia")
+          .build();
+      },
+      { RobotoMedium }
+    );
+    const image = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Group
+          layer={
+            <Paint>
+              <ColorMatrix matrix={OpacityMatrix(0.5)} />
+            </Paint>
+          }
+        >
+          <Paragraph paragraph={paragraph} x={0} y={0} width={width} />
+        </Group>
+      </>
+    );
+    checkImage(image, docPath(`opacity-paragraph-${surface.OS}.png`));
+  });
+});