tests.javaScript.all.ts

import * as Mocha from "mocha";
import { expect } from "chai";
import { Buffer } from "buffer";
import {
  RequestFile,
  NativeEngine,
  RawTexture,
  DynamicTexture,
  MeshBuilder,
  DefaultRenderingPipeline,
  RefractionPostProcess,
  ImageProcessingPostProcess,
  HighlightsPostProcess,
  PassPostProcess,
  TonemapPostProcess,
  TonemappingOperator,
  Color3,
  ConvolutionPostProcess,
  BlackAndWhitePostProcess,
  ShaderMaterial,
  Scene,
  Vector2,
  BlurPostProcess
} from "@babylonjs/core";
import { GradientMaterial } from "@babylonjs/materials";
import { registerPngTests } from "./tests.nativeEngine.png";

declare var describe: typeof Mocha.describe;
declare var it: typeof Mocha.it;

Mocha.setup("bdd");
// @ts-ignore
Mocha.reporter("spec");

declare const hostPlatform: string;
declare const hasGpuRendering: boolean;
declare const hasNativeImageLoading: boolean;
declare const setExitCode: (code: number) => void;
declare const setImageReloadTestResponse: (bytes: Uint8Array) => void;
declare const skipCanvasGpuTests: boolean;
declare const _native: any;

registerPngTests(describe, it, hasGpuRendering && hasNativeImageLoading);

describe("Native texture readback", function () {
  this.timeout(10000);
  // Native LoadRawTexture is also disabled when native image loading is off.
  const itWithRawTexture = hasGpuRendering && hasNativeImageLoading ? it : it.skip;

  itWithRawTexture("returns bottom-origin RGBA8 crops and preserves destination offsets", async function () {
    const engine = new NativeEngine();
    const scene = new Scene(engine);
    try {
      for (const invertY of [false, true]) {
        const width = 5;
        const height = 7;
        const data = new Uint8Array(width * height * 4);
        for (let y = 0; y < height; ++y) {
          for (let x = 0; x < width; ++x) {
            data.set([x * 40, y * 30, 128, 255], (y * width + x) * 4);
          }
        }
        const texture = RawTexture.CreateRGBATexture(data, width, height, scene, false, invertY);
        try {
          for (const [x, y, readWidth, readHeight] of [
            [0, 0, width, height], [0, 0, 1, 1], [4, 6, 1, 1],
            [1, 0, 3, 2], [1, 2, 2, 3], [0, 5, 5, 2]
          ]) {
            const storage = new Uint8Array(readWidth * readHeight * 4 + 12).fill(91);
            const destination = storage.subarray(4, storage.length - 8);
            const result = await texture.readPixels(0, 0, destination, true, false, x, y, readWidth, readHeight);
            expect(result).to.equal(destination);
            expect(Array.from(storage.subarray(0, 4))).to.deep.equal([91, 91, 91, 91]);
            expect(Array.from(storage.subarray(storage.length - 8))).to.deep.equal(Array(8).fill(91));
            for (let row = 0; row < readHeight; ++row) {
              const sourceY = invertY ? height - 1 - (y + row) : y + row;
              for (let column = 0; column < readWidth; ++column) {
                const offset = (row * readWidth + column) * 4;
                expect(Array.from(destination.subarray(offset, offset + 4)),
                  `invertY=${invertY}, crop=${x},${y},${readWidth},${readHeight}, pixel=${column},${row}`)
                  .to.deep.equal([(x + column) * 40, sourceY * 30, 128, 255]);
              }
            }
          }
        } finally {
          texture.dispose();
        }
      }
    } finally {
      scene.dispose();
      engine.dispose();
    }
  });

  itWithRawTexture("returns wide odd-height readbacks without changing the middle row", async function () {
    const engine = new NativeEngine();
    const scene = new Scene(engine);
    try {
      const width = 2049;
      const height = 3;
      const rowPitch = width * 4;
      const data = new Uint8Array(rowPitch * height);
      for (let y = 0; y < height; ++y) {
        for (let x = 0; x < width; ++x) {
          data.set([x % 251, y * 70, Math.floor(x / 256) * 23, 255], y * rowPitch + x * 4);
        }
      }
      for (const invertY of [false, true]) {
        const texture = RawTexture.CreateRGBATexture(data, width, height, scene, false, invertY);
        try {
          const result = await texture.readPixels();
          if (!(result instanceof Uint8Array)) {
            throw new Error("Expected RGBA8 wide readback");
          }
          expect(result.length).to.equal(data.length);
          for (let row = 0; row < height; ++row) {
            const sourceY = invertY ? height - 1 - row : row;
            expect(Array.from(result.subarray(row * rowPitch, (row + 1) * rowPitch)))
              .to.deep.equal(Array.from(data.subarray(sourceY * rowPitch, (sourceY + 1) * rowPitch)));
          }
        } finally {
          texture.dispose();
        }
      }
    } finally {
      scene.dispose();
      engine.dispose();
    }
  });

  itWithRawTexture("uses mip extents for cropped readback", async function () {
    const engine = new NativeEngine();
    const scene = new Scene(engine);
    try {
      const data = new Uint8Array(4 * 8 * 4);
      for (let y = 0; y < 8; ++y) {
        for (let x = 0; x < 4; ++x) {
          data.set([x < 2 ? 255 : 0, y < 4 ? 255 : 0, 0, 255], (y * 4 + x) * 4);
        }
      }
      const texture = RawTexture.CreateRGBATexture(data, 4, 8, scene, true, false);
      for (const [y, green] of [[0, 255], [3, 0]]) {
        const result = await texture.readPixels(0, 1, null, true, false, 1, y, 1, 1);
        if (!(result instanceof Uint8Array)) {
          throw new Error("Expected RGBA8 mip readback");
        }
        expect(result.length).to.equal(4);
        expect(result[0]).to.equal(0);
        // Mip generation can round a solid 255 channel down by one.
        expect(result[1]).to.be.closeTo(green, 1);
        expect(result[2]).to.equal(0);
        expect(result[3]).to.equal(255);
      }
      const internalTexture = texture.getInternalTexture();
      if (!internalTexture) {
        throw new Error("Expected an initialized raw texture");
      }
      for (const [x, y, width, height] of [
        [2, 0, 1, 1], [0, 4, 1, 1], [0, 3, 1, 2], [0, 0, 0, 1],
        [0, 0, 65535, 65535]
      ]) {
        let error: unknown;
        try {
          await engine._readTexturePixels(internalTexture, width, height, -1, 1, null, true, false, x, y);
        } catch (caught) {
          error = caught;
        }
        if (!(error instanceof Error)) {
          throw new Error("Expected out-of-range mip readback to reject");
        }
        expect(error.message).to.contain("rectangle is out of range");
      }
      for (const invalid of [65536, 65537, 256, 2 ** 32, 2 ** 32 + 1, -1, 0.5, NaN, Infinity]) {
        for (const component of [1, 2, 3, 4, 0]) {
          const request = [0, 0, 0, 1, 1];
          request[component] = invalid;
          const [mip, x, y, width, height] = request;
          const destination = new Uint8Array(4).fill(91);
          let error: unknown;
          try {
            await engine._readTexturePixels(internalTexture, width, height, -1, mip, destination, true, false, x, y);
          } catch (caught) {
            error = caught;
          }
          if (!(error instanceof Error)) {
            throw new Error(`Expected invalid readback component ${component}=${invalid} to reject`);
          }
          const maximum = component === 0 ? 255 : 65535;
          if (!Number.isInteger(invalid) || invalid < 0 || invalid > maximum) {
            const parameter = ["mip level", "x", "y", "width", "height"][component];
            expect(error.message).to.equal(`readTexture ${parameter} must be a finite integer between 0 and ${maximum}.`);
          } else {
            expect(error.message).to.contain("rectangle is out of range");
          }
          expect(Array.from(destination)).to.deep.equal([91, 91, 91, 91]);
        }
      }
    } finally {
      scene.dispose();
      engine.dispose();
    }
  });
});

describe("RequestFile", function () {
  this.timeout(0);
  it("should throw when requesting a URL with no protocol", function () {
    function requestFile() {
      RequestFile("noprotocol.gltf", () => {});
    }
    expect(requestFile).to.throw();
  });
});

describe("ColorParsing", function () {
  expect(_native.Canvas.parseColor("")).to.equal(0);
  expect(_native.Canvas.parseColor("transparent")).to.equal(0);
  expect(_native.Canvas.parseColor("#123")).to.equal(0xff332211);
  expect(_native.Canvas.parseColor("#1234")).to.equal(0x44332211);
  expect(_native.Canvas.parseColor("#123456")).to.equal(0xff563412);
  expect(_native.Canvas.parseColor("#12345678")).to.equal(0x78563412);
  expect(_native.Canvas.parseColor("snow")).to.equal(0xfffafaff);
  expect(_native.Canvas.parseColor("rgb(16,32,48)")).to.equal(0xff302010);
  // Alpha is a 0-1 number (or a percentage) per CSS Color, so any value above
  // 1 clamps to fully opaque. It is not a 0-255 channel like r/g/b.
  expect(_native.Canvas.parseColor("rgba(16,32,48,64)")).to.equal(0xff302010);
  expect(_native.Canvas.parseColor("rgb(16,     32   ,  48   )")).to.equal(
    0xff302010
  );
  expect(
    _native.Canvas.parseColor("rgba(    16,     32   ,  48 , 64  )")
  ).to.equal(0xff302010);
  expect(_native.Canvas.parseColor("rgba(16,32,48,1)")).to.equal(0xff302010);
  expect(_native.Canvas.parseColor("rgba(16,32,48,0)")).to.equal(0x00302010);
  // Fractional and percentage alpha, whitespace-separated components and the
  // "/ alpha" form all used to fall through to the "unable to parse" throw.
  expect(_native.Canvas.parseColor("rgba(16,32,48,0.5)")).to.equal(0x80302010);
  expect(_native.Canvas.parseColor("rgba(16 32 48 / 50%)")).to.equal(
    0x80302010
  );
  expect(_native.Canvas.parseColor("rgb(16 32 48)")).to.equal(0xff302010);
  expect(_native.Canvas.parseColor("rgb(100%,0%,0%)")).to.equal(0xff0000ff);
  expect(_native.Canvas.parseColor("hsl(0,100%,50%)")).to.equal(0xff0000ff);
  expect(_native.Canvas.parseColor("hsla(0,100%,50%,0.5)")).to.equal(
    0x800000ff
  );

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("unknownColor");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("#");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("#12345");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgb(11)");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgb(11,22,33");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgb(11,22,33,");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgba(11,   22, 33,  )");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgba(11,   22, 33, 44,   55,   66 )");
    }
    expect(incorrectColor).to.throw();
  });

  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgb");
    }
    expect(incorrectColor).to.throw();
  });
  it("should throw", function () {
    function incorrectColor() {
      _native.Canvas.parseColor("rgba");
    }
    expect(incorrectColor).to.throw();
  });
});

describe("Canvas2D", function () {
  // No-op renderers accept GPU commands but cannot produce pixels for readback.
  const itWithGpu = hasGpuRendering ? it : it.skip;

  function createContext(): any {
    const canvas = new _native.Canvas();
    canvas.width = 64;
    canvas.height = 64;
    return canvas.getContext("2d");
  }

  function createCanvas(width: number, height: number): any {
    const canvas = new _native.Canvas();
    canvas.width = width;
    canvas.height = height;
    return { canvas, context: canvas.getContext("2d") };
  }

  function disposeCanvas(resource: any): void {
    resource.context.dispose();
    resource.canvas.dispose();
  }

  function captureGpuPixels(canvas: any): any {
    return canvas.getContext("2d").getImageData(
      0,
      0,
      canvas.width,
      canvas.height
    ).data;
  }

  function pixelAt(
    pixels: any,
    width: number,
    x: number,
    y: number
  ): number[] {
    const offset = (y * width + x) * 4;
    return [
      pixels[offset],
      pixels[offset + 1],
      pixels[offset + 2],
      pixels[offset + 3],
    ];
  }

  (skipCanvasGpuTests ? it.skip : it)(
    "intersects nested clips and restores parent clips on the GPU",
    async function () {
      this.timeout(10000);
      for (const translated of [false, true]) {
        const engine = new NativeEngine();
        const scene = new Scene(engine);
        try {
          const texture = new DynamicTexture("nested clips", 64, scene, false);
          const ctx = texture.getContext();
          ctx.fillStyle = "white";
          ctx.fillRect(0, 0, 64, 64);
          ctx.save();
          ctx.beginPath();
          ctx.rect(8, 0, 24, 64);
          ctx.clip();

          ctx.save();
          if (translated) {
            ctx.translate(16, 0);
          }
          ctx.beginPath();
          ctx.rect(0, 0, 64, 64);
          ctx.clip();
          ctx.fillStyle = "red";
          ctx.fillRect(0, 0, 64, 64);
          ctx.restore();

          ctx.fillStyle = "#00ff00";
          ctx.fillRect(24, 0, 16, 64);
          ctx.save();
          ctx.beginPath();
          ctx.rect(40, 0, 16, 64);
          ctx.clip();
          ctx.fillStyle = "magenta";
          ctx.fillRect(0, 0, 64, 64);
          ctx.restore();
          ctx.restore();

          ctx.fillStyle = "blue";
          ctx.fillRect(40, 0, 8, 64);
          texture.update(false);
          const pixels = await texture.readPixels();
          if (!(pixels instanceof Uint8Array)) {
            throw new Error("Expected RGBA8 GPU readback for the canvas texture");
          }
          const pixel = (x: number) =>
            Array.from(
              pixels.subarray(
                (32 * 64 + x) * 4,
                (32 * 64 + x + 1) * 4
              )
            );
          expect(pixel(4), "outside parent").to.deep.equal([
            255, 255, 255, 255
          ]);
          expect(pixel(12), "translated child boundary").to.deep.equal(
            translated ? [255, 255, 255, 255] : [255, 0, 0, 255]
          );
          expect(pixel(20), "inside intersection").to.deep.equal([
            255, 0, 0, 255
          ]);
          expect(pixel(28), "restored parent").to.deep.equal([
            0, 255, 0, 255
          ]);
          expect(pixel(36), "outside restored parent").to.deep.equal([
            255, 255, 255, 255
          ]);
          expect(pixel(44), "restored unclipped state").to.deep.equal([
            0, 0, 255, 255
          ]);
          expect(pixel(52), "disjoint clip").to.deep.equal([
            255, 255, 255, 255
          ]);
          expect(pixel(60), "outside every fill").to.deep.equal([
            255, 255, 255, 255
          ]);
        } finally {
          scene.dispose();
          engine.dispose();
        }
      }
    }
  );

  (skipCanvasGpuTests ? it.skip : it)(
    "normalizes negative rectangle dimensions before intersecting GPU clips",
    async function () {
      this.timeout(10000);
      const engine = new NativeEngine();
      const scene = new Scene(engine);
      try {
        const texture = new DynamicTexture("signed clips", 64, scene, false);
        const ctx = texture.getContext();
        for (const rotated of [false, true]) {
          let expected: Uint8Array | undefined;
          for (const flips of [
            [false, false], [true, false], [false, true], [true, true]
          ]) {
            const flipX = flips[0];
            const flipY = flips[1];
            ctx.fillStyle = "white";
            ctx.fillRect(0, 0, 64, 64);
            ctx.save();
            ctx.beginPath();
            ctx.rect(18, 12, 36, 44);
            ctx.clip();
            ctx.save();
            if (rotated) {
              ctx.translate(32, 32);
              ctx.rotate(0.3);
              ctx.translate(-32, -32);
            }
            ctx.beginPath();
            ctx.rect(
              flipX ? 40 : 16, flipY ? 40 : 20,
              flipX ? -24 : 24, flipY ? -20 : 20
            );
            ctx.clip();
            ctx.fillStyle = "blue";
            ctx.fillRect(0, 0, 64, 64);
            ctx.restore();
            ctx.restore();
            texture.update(false);

            const pixels = await texture.readPixels();
            if (!(pixels instanceof Uint8Array)) {
              throw new Error("Expected RGBA8 GPU readback for signed clips");
            }
            const description =
              `rotated=${rotated}, flipX=${flipX}, flipY=${flipY}`;
            expect(pixelAt(pixels, 64, 28, 30), `inside clip, ${description}`)
              .to.deep.equal([0, 0, 255, 255]);
            expect(pixelAt(pixels, 64, 0, 0), "outside parent clip")
              .to.deep.equal([255, 255, 255, 255]);
            if (expected) {
              let changed = 0;
              for (let index = 0; index < pixels.length; ++index) {
                if (pixels[index] !== expected[index]) {
                  ++changed;
                }
              }
              expect(changed, `signed clip equivalence, ${description}`)
                .to.equal(0);
            } else {
              expected = pixels.slice();
            }
          }
        }
      } finally {
        scene.dispose();
        engine.dispose();
      }
    }
  );

  (skipCanvasGpuTests ? it.skip : it)(
    "clears only the clipped GPU region and ignores globalAlpha and filters",
    async function () {
      this.timeout(10000);
      const engine = new NativeEngine();
      const scene = new Scene(engine);
      try {
        const texture = new DynamicTexture("clipped clear", 64, scene, false);
        const ctx = texture.getContext();
        ctx.fillStyle = "red";
        ctx.fillRect(0, 0, 64, 64);
        texture.update(false);

        ctx.filter = "blur(2px)";
        ctx.fillRect(0, 0, 64, 64);
        ctx.save();
        ctx.beginPath();
        ctx.rect(8, 0, 24, 64);
        ctx.clip();
        ctx.globalAlpha = 0.25;
        ctx.clearRect(0, 0, 64, 64);
        ctx.restore();
        texture.update(false);
        const pixels = await texture.readPixels();
        if (!(pixels instanceof Uint8Array)) {
          throw new Error("Expected RGBA8 GPU readback for the canvas texture");
        }
        const pixel = (x: number) =>
          Array.from(
            pixels.subarray((32 * 64 + x) * 4, (32 * 64 + x + 1) * 4)
          );
        expect(pixel(36), "preserved near clip").to.deep.equal([
          255, 0, 0, 255
        ]);
        expect(pixel(16), "fully cleared inside clip").to.deep.equal([
          0, 0, 0, 0
        ]);
        expect(pixel(44), "preserved after clip").to.deep.equal([
          255, 0, 0, 255
        ]);
      } finally {
        scene.dispose();
        engine.dispose();
      }
    }
  );

  it("round-trips a string fillStyle and strokeStyle", function () {
    const ctx = createContext();
    ctx.fillStyle = "#ff0000";
    ctx.strokeStyle = "#00ff00";
    expect(ctx.fillStyle).to.equal("#ff0000");
    expect(ctx.strokeStyle).to.equal("#00ff00");
  });

  it("rejects a prototype-spoofed object in place of a Path2D", function () {
    // instanceof only walks the prototype chain, and a prototype is assignable, so an
    // InstanceOf gate accepted any object wearing Path2D.prototype and then unwrapped it.
    // Handing fill() a CanvasGradient this way was an access violation, not a wrong answer.
    // Object.create(Path2D.prototype) is the same hole with no native wrap behind it at all.
    const ctx = createContext();
    const spoofedGradient: any = ctx.createLinearGradient(0, 0, 10, 10);
    Object.setPrototypeOf(spoofedGradient, Path2D.prototype);
    expect(spoofedGradient instanceof Path2D).to.equal(true);

    const bare: any = Object.create(Path2D.prototype);
    expect(bare instanceof Path2D).to.equal(true);

    const realPath = new Path2D();
    for (const impostor of [spoofedGradient, bare]) {
      expect(function () { ctx.fill(impostor); }).to.throw();
      expect(function () { ctx.stroke(impostor); }).to.throw();
      expect(function () { realPath.addPath(impostor); }).to.throw();
      // The Path2D() argument is a (Path2D or DOMString) union, so a non-Path2D is string
      // data rather than an error. It must not be unwrapped on the way there.
      expect(function () { new Path2D(impostor); }).to.not.throw();
    }
  });

  it("ignores a prototype-spoofed object assigned to fillStyle or strokeStyle", function () {
    // Same defect on the gradient side: the assignment gate accepted anything wearing the
    // gradient prototype and stored it, and the next fill unwrapped it as a CanvasGradient.
    const ctx = createContext();
    const gradient = ctx.createLinearGradient(0, 0, 10, 10);
    const spoofedPath: any = new Path2D();
    Object.setPrototypeOf(spoofedPath, Object.getPrototypeOf(gradient));

    ctx.fillStyle = "#ff0000";
    ctx.strokeStyle = "#00ff00";
    ctx.fillStyle = spoofedPath;
    ctx.strokeStyle = spoofedPath;

    // Per spec an unusable assignment leaves the previous value in place.
    expect(ctx.fillStyle).to.equal("#ff0000");
    expect(ctx.strokeStyle).to.equal("#00ff00");

    // The drawing path must stay usable rather than unwrapping the impostor.
    expect(function () { ctx.fillRect(0, 0, 10, 10); }).to.not.throw();
    expect(function () { ctx.strokeRect(0, 0, 10, 10); }).to.not.throw();
  });

  it("rejects a non-Path2D argument to fill and stroke", function () {
    // Neither call type-checked the argument before handing it to ObjectWrap::Unwrap,
    // which does no checking of its own, so an unrelated object was reinterpreted as a
    // NativeCanvasPath2D. stroke() was the worse of the two: it had no gate at all, so
    // even a string got there.
    // The thrown type is deliberately not asserted: a C++ Napi::TypeError surfaces as a
    // JS TypeError on some engines and as an InternalError on the QuickJS Node-API port,
    // so only the fact that it throws is portable. Every other throw test here does the same.
    const ctx = createContext();
    expect(function () { ctx.stroke("x"); }).to.throw();
    expect(function () { ctx.stroke({}); }).to.throw();
    expect(function () { ctx.stroke(5); }).to.throw();
    expect(function () { ctx.fill({}); }).to.throw();
    expect(function () { ctx.fill(5); }).to.throw();
  });

  it("still accepts the valid fill and stroke argument forms", function () {
    const ctx = createContext();
    const path = new Path2D("M0 0 L10 10");
    expect(function () { ctx.fill(); }).to.not.throw();
    expect(function () { ctx.stroke(); }).to.not.throw();
    // undefined selects the no-argument overload rather than being a bad Path2D.
    expect(function () { ctx.fill(undefined); }).to.not.throw();
    expect(function () { ctx.stroke(undefined); }).to.not.throw();
    // fill() also takes a fill rule string.
    expect(function () { ctx.fill("evenodd"); }).to.not.throw();
    expect(function () { ctx.fill(new String("evenodd") as any); }).to.not.throw();
    expect(function () {
      ctx.fill({ toString: function () { return "nonzero"; } } as any);
    }).to.not.throw();
    expect(function () { ctx.fill(path); }).to.not.throw();
    expect(function () { ctx.fill(path, "nonzero"); }).to.not.throw();
    expect(function () { ctx.fill(path, new String("evenodd") as any); }).to.not.throw();
    expect(function () { ctx.stroke(path); }).to.not.throw();
    expect(function () { ctx.fill("invalid"); }).to.throw();
    expect(function () { ctx.fill(path, "invalid"); }).to.throw();
  });

  it("rejects a non-Path2D argument to Path2D.addPath", function () {
    // addPath had neither a type check nor an arity check, so addPath() unwrapped a
    // missing argument and addPath("x") unwrapped a string. See above for why the
    // thrown type is not asserted.
    const path = new Path2D();
    expect(function () { path.addPath(); }).to.throw();
    expect(function () { path.addPath("x"); }).to.throw();
    expect(function () { path.addPath({}); }).to.throw();
    expect(function () { path.addPath(new Path2D("M0 0 L5 5")); }).to.not.throw();
  });

  it("rejects an invalid native source argument to drawImage", function () {
    // Native-looking impostors must throw, not AV via an unchecked Unwrap.
    const ctx = createContext();
    const realCanvas = new _native.Canvas();
    const spoofedCanvas = Object.create(Object.getPrototypeOf(realCanvas));
    expect(spoofedCanvas instanceof _native.Canvas).to.equal(true);
    expect(function () { ctx.drawImage({}, 0, 0); }).to.throw();
    expect(function () { ctx.drawImage(new Path2D(), 0, 0); }).to.throw();
    expect(function () { ctx.drawImage(spoofedCanvas, 0, 0); }).to.throw();
    realCanvas.dispose();
  });

  it("treats a non-Path2D Path2D() argument as path data", function () {
    // The constructor routed on IsObject(), so any object was unwrapped as a Path2D.
    // Per the (Path2D or DOMString) union a non-Path2D is stringified instead.
    expect(function () { new Path2D({}); }).to.not.throw();
    expect(function () { new Path2D(5); }).to.not.throw();
    expect(function () { new Path2D(); }).to.not.throw();
    // A copy of a real Path2D still copies, and an object that stringifies to path
    // data is still parsed as such.
    const source = new Path2D("M0 0 L10 10");
    const ctx = createContext();
    expect(function () { ctx.fill(new Path2D(source)); }).to.not.throw();
    expect(function () {
      ctx.fill(new Path2D({ toString: function () { return "M0 0 L10 10"; } }));
    }).to.not.throw();
  });

  it("accepts a CanvasGradient as fillStyle", function () {
    const ctx = createContext();
    const gradient = ctx.createLinearGradient(0, 0, 64, 64);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(1, "blue");
    expect(function () {
      ctx.fillStyle = gradient;
    }).to.not.throw();
    expect(ctx.fillStyle).to.not.equal("#ff0000");
  });

  it("accepts a CanvasGradient as strokeStyle", function () {
    // strokeStyle used to be string-only and threw "A string was expected",
    // which broke every GUI control that strokes with a gradient (Line, Button border).
    const ctx = createContext();
    const gradient = ctx.createLinearGradient(0, 0, 64, 64);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(1, "blue");
    expect(function () {
      ctx.strokeStyle = gradient;
    }).to.not.throw();
  });

  it("accepts a radial CanvasGradient defined by two independent circles", function () {
    const ctx = createContext();
    // Neither concentric nor r0 == 0: both circles have to be honored.
    const gradient = ctx.createRadialGradient(10, 10, 5, 40, 32, 30);
    gradient.addColorStop(0, "yellow");
    gradient.addColorStop(0.5, "pink");
    gradient.addColorStop(1, "green");
    expect(function () {
      ctx.fillStyle = gradient;
      ctx.strokeStyle = gradient;
    }).to.not.throw();
  });

  it("restores a gradient strokeStyle across save/restore", function () {
    const ctx = createContext();
    const gradient = ctx.createLinearGradient(0, 0, 64, 64);
    gradient.addColorStop(0, "red");
    ctx.strokeStyle = "#0000ff";
    ctx.save();
    ctx.strokeStyle = gradient;
    ctx.restore();
    expect(ctx.strokeStyle).to.equal("#0000ff");
  });

  it("restores the shadow attributes across save/restore", function () {
    // These have no nanovg counterpart, so nvgRestore() never rewound them and a
    // value assigned after save() survived restore().
    const ctx = createContext();
    ctx.shadowColor = "#00ff00";
    ctx.shadowBlur = 1;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 3;
    ctx.save();
    ctx.shadowColor = "#ff0000";
    ctx.shadowBlur = 40;
    ctx.shadowOffsetX = 50;
    ctx.shadowOffsetY = 60;
    ctx.restore();
    expect(ctx.shadowColor).to.equal("#00ff00");
    expect(ctx.shadowBlur).to.equal(1);
    expect(ctx.shadowOffsetX).to.equal(2);
    expect(ctx.shadowOffsetY).to.equal(3);
  });

  it("restores the remaining drawing state across save/restore", function () {
    // nvgRestore() rewinds nanovg's copy of these, but the wrapper kept its own
    // mirror, so the getters reported the post-save() value forever after.
    const ctx = createContext();
    ctx.lineWidth = 1;
    ctx.globalAlpha = 1;
    ctx.lineCap = "butt";
    ctx.lineJoin = "miter";
    ctx.miterLimit = 10;
    ctx.setLineDash([1, 2]);
    ctx.save();
    ctx.lineWidth = 9;
    ctx.globalAlpha = 0.25;
    ctx.lineCap = "round";
    ctx.lineJoin = "bevel";
    ctx.miterLimit = 3;
    ctx.setLineDash([7, 8, 9]);
    ctx.restore();
    expect(ctx.lineWidth).to.equal(1);
    expect(ctx.globalAlpha).to.equal(1);
    expect(ctx.lineCap).to.equal("butt");
    expect(ctx.lineJoin).to.equal("miter");
    expect(ctx.miterLimit).to.equal(10);
    expect(ctx.getLineDash()).to.deep.equal([1, 2]);
  });

  it("reads back globalAlpha", function () {
    // globalAlpha was registered with a nullptr getter, so it was write-only and
    // reading it gave undefined. The value was never mirrored either, so the
    // save/restore stack carried a field nothing could observe.
    const ctx = createContext();
    expect(ctx.globalAlpha).to.equal(1);
    ctx.globalAlpha = 0.5;
    expect(ctx.globalAlpha).to.equal(0.5);
  });

  it("ignores an out-of-range or non-finite globalAlpha", function () {
    // The spec says values outside [0, 1] and non-finite values are ignored,
    // leaving the previous value in place, rather than clamped or thrown.
    const ctx = createContext();
    ctx.globalAlpha = 0.5;
    ctx.globalAlpha = -1;
    expect(ctx.globalAlpha).to.equal(0.5);
    ctx.globalAlpha = 2;
    expect(ctx.globalAlpha).to.equal(0.5);
    ctx.globalAlpha = Infinity;
    expect(ctx.globalAlpha).to.equal(0.5);
    ctx.globalAlpha = NaN;
    expect(ctx.globalAlpha).to.equal(0.5);
    ctx.globalAlpha = 0;
    expect(ctx.globalAlpha).to.equal(0);
  });

  it("reports the spec defaults on a fresh context", function () {
    // These four mirror state nanovg also keeps, and nvgReset installs butt/miter/1/10.
    // The C++ mirrors were value-initialized to ""/""/0/0 instead, so a fresh context
    // reported a default it was not actually drawing with.
    const ctx = createContext();
    expect(ctx.lineCap).to.equal("butt");
    expect(ctx.lineJoin).to.equal("miter");
    expect(ctx.lineWidth).to.equal(1);
    expect(ctx.miterLimit).to.equal(10);
  });

  it("keeps the previous dash list when a new one is rejected", function () {
    // The list was cleared before validation, so a rejected argument -- which the
    // spec says must leave the previous list untouched -- wiped it instead.
    const ctx = createContext();
    ctx.setLineDash([5, 10]);
    ctx.setLineDash([-1]);
    expect(ctx.getLineDash()).to.deep.equal([5, 10]);
    ctx.setLineDash([2, "x"]);
    expect(ctx.getLineDash()).to.deep.equal([5, 10]);
    ctx.setLineDash([Number.NaN]);
    expect(ctx.getLineDash()).to.deep.equal([5, 10]);
    // A valid list still replaces it, and an empty list still means "solid".
    ctx.setLineDash([3, 4]);
    expect(ctx.getLineDash()).to.deep.equal([3, 4]);
    ctx.setLineDash([]);
    expect(ctx.getLineDash()).to.deep.equal([]);
  });

  it("keeps a gradient assigned to fillStyle alive across a collection", function () {
    const ctx = createContext();
    const global: any = Function("return this")();

    // Create and assign the gradient inside a scope that keeps no reference to it, so
    // the only thing left pointing at it is whatever fillStyle stored. CanvasGradient is
    // an ObjectWrap, so if the style does not root the JavaScript wrapper the finalizer
    // deletes the native gradient and the next fill dereferences freed memory.
    (function () {
      const gradient: any = ctx.createLinearGradient(0, 0, 64, 0);
      gradient.addColorStop(0, "red");
      gradient.addColorStop(1, "blue");
      gradient.tag = "kept";
      ctx.fillStyle = gradient;
    })();

    // Not every engine the polyfill runs on exposes a collection hook; the assertions
    // below are worth making either way.
    if (typeof global.CollectGarbage === "function") {
      global.CollectGarbage();
    }

    // The getter has to hand back the object that was assigned. The expando proves it is
    // that same JavaScript object rather than a fresh wrapper.
    expect(ctx.fillStyle.tag).to.equal("kept");
    // ...and the native gradient behind it has to still be there.
    ctx.fillStyle.addColorStop(0.5, "green");
    ctx.fillRect(0, 0, 64, 64);
  });
  it("keeps a gradient assigned to strokeStyle alive across a collection", function () {
    const ctx = createContext();
    const global: any = Function("return this")();

    (function () {
      const gradient: any = ctx.createRadialGradient(32, 32, 0, 32, 32, 32);
      gradient.addColorStop(0, "red");
      gradient.addColorStop(1, "blue");
      gradient.tag = "kept";
      ctx.strokeStyle = gradient;
    })();

    if (typeof global.CollectGarbage === "function") {
      global.CollectGarbage();
    }

    expect(ctx.strokeStyle.tag).to.equal("kept");
    ctx.strokeStyle.addColorStop(0.5, "green");
    ctx.strokeRect(0, 0, 64, 64);
  });
  it("keeps the previous dash list when the argument is not a list", function () {
    // A present-but-rejected argument skipped the parse loop and then committed the
    // empty temporary, so setLineDash("x") cleared the list where setLineDash([-1])
    // correctly kept it. An absent argument still means "solid".
    const ctx = createContext();
    ctx.setLineDash([5, 10]);
    ctx.setLineDash("x" as any);
    expect(ctx.getLineDash()).to.deep.equal([5, 10]);
    ctx.setLineDash(null as any);
    expect(ctx.getLineDash()).to.deep.equal([5, 10]);
    ctx.setLineDash(7 as any);
    expect(ctx.getLineDash()).to.deep.equal([5, 10]);
    (ctx.setLineDash as any)();
    expect(ctx.getLineDash()).to.deep.equal([]);
  });

  it("restores font", function () {
    // font was the one exposed attribute left out of the saved state. It is worse than
    // the getter-only cases: the font id resolved here is what the text draw path binds,
    // so the wrong face actually rendered after a restore().
    const ctx = createContext();
    ctx.font = "18px Arial";
    // The getter reports a normalized serialization, so compare against the round-tripped
    // value rather than the literal that was assigned.
    const saved = ctx.font;
    ctx.save();
    ctx.font = "40px Times";
    expect(ctx.font).to.not.equal(saved);
    ctx.restore();
    expect(ctx.font).to.equal(saved);
    expect(function () {
      ctx.fillText("after restore", 0, 20);
    }).to.not.throw();
  });

  it("ignores a fillStyle or strokeStyle that is neither a color string nor a gradient", function () {
    // Both setters reached napi_unwrap for any object, so `ctx.strokeStyle = {}` unwrapped
    // an object that was never wrapped and dereferenced whatever the slot held. Per spec
    // an unusable value leaves the attribute unchanged.
    const ctx = createContext();
    ctx.fillStyle = "#ff0000";
    ctx.strokeStyle = "#00ff00";
    expect(function () {
      ctx.fillStyle = {} as any;
      ctx.strokeStyle = {} as any;
      ctx.fillStyle = [] as any;
      ctx.strokeStyle = (function () {}) as any;
    }).to.not.throw();
    expect(ctx.fillStyle).to.equal("#ff0000");
    expect(ctx.strokeStyle).to.equal("#00ff00");
    // A real gradient is still accepted.
    const gradient = ctx.createLinearGradient(0, 0, 64, 0);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(1, "blue");
    ctx.fillStyle = gradient;
    expect(ctx.fillStyle).to.not.equal("#ff0000");
  });

  it("accepts two color stops at the same offset", function () {
    // Only checks that the insertion path accepts the duplicate offset the spec allows;
    // std::map::insert() dropped it by returning {it, false} rather than throwing, so this
    // does not by itself prove the stop survives. That needs a separate rendered-ramp assertion.
    const ctx = createContext();
    const gradient = ctx.createLinearGradient(0, 0, 64, 0);
    gradient.addColorStop(0, "red");
    gradient.addColorStop(0.5, "red");
    gradient.addColorStop(0.5, "blue");
    gradient.addColorStop(1, "blue");
    expect(function () {
      ctx.fillStyle = gradient;
      ctx.fillRect(0, 0, 64, 64);
    }).to.not.throw();
  });

  // The three parsers below all used to reach std::stof/std::stoi with a value the regex
  // admits but the target type cannot hold. The resulting std::out_of_range is not a
  // Napi::Error, so it escaped the N-API callback and terminated the host process outright
  // rather than surfacing as a JS exception. Reaching the assertion at all is the test.
  it("survives an out-of-range rgb() component", function () {
    const ctx = createContext();
    const huge = "9".repeat(400);
    expect(function () {
      ctx.fillStyle = `rgb(${huge}, 0, 0)`;
    }).to.not.throw();
    expect(function () {
      ctx.fillStyle = `rgba(0, 0, 0, ${huge})`;
    }).to.not.throw();
  });

  it("survives an out-of-range font size and weight", function () {
    const ctx = createContext();
    ctx.font = "18px Arial";
    // The size regex accepts an exponent, so this parses but does not fit a float.
    expect(function () {
      ctx.font = "18e999px Arial";
    }).to.not.throw();
    expect(function () {
      ctx.font = `${"9".repeat(400)} 18px Arial`;
    }).to.not.throw();
    // An unparseable font is ignored, so the previous one stays in effect.
    expect(ctx.font).to.contain("18px");
  });

  it("survives an out-of-range letterSpacing", function () {
    const ctx = createContext();
    expect(function () {
      ctx.letterSpacing = `${"9".repeat(400)}px`;
    }).to.not.throw();
  });

  it("rejects a createImageData source whose dimensions are not valid extents", function () {
    const ctx = createContext();
    // The ImageData overload is duck-typed, so these never went through WebIDL's
    // unsigned long conversion. A negative width used to wrap to 4294967295 and ask
    // for a ~17 GB allocation instead of being rejected.
    const bad = [
      { width: -1, height: 1 },
      { width: 1, height: -1 },
      { width: 1.5, height: 1 },
      { width: 5e9, height: 1 },
      { width: Infinity, height: 1 },
    ];
    bad.forEach(function (source) {
      expect(function () {
        ctx.createImageData(source);
      }, JSON.stringify(source)).to.throw();
    });
  });

  it("creates image data from a valid source object", function () {
    const ctx = createContext();
    const data = ctx.createImageData({ width: 4, height: 3 });
    expect(data.width).to.equal(4);
    expect(data.height).to.equal(3);
  });

  itWithGpu("renders a semi-transparent Canvas source through the destination GPU", function () {
    const source = createCanvas(8, 8);
    const destination = createCanvas(8, 8);
    try {
      source.context.fillStyle = "rgba(240, 120, 60, 0.5)";
      source.context.fillRect(0, 0, 8, 8);
      destination.context.drawImage(source.canvas, 0, 0);

      const sample = pixelAt(
        captureGpuPixels(destination.canvas),
        destination.canvas.width,
        4,
        4
      );
      expect(sample[0]).to.be.within(220, 255);
      expect(sample[1]).to.be.within(100, 140);
      expect(sample[2]).to.be.within(40, 80);
      expect(sample[3]).to.be.within(110, 145);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("recognizes a Canvas source before ImageBitmap-shaped own properties", function () {
    const source = createCanvas(8, 8);
    const destination = createCanvas(8, 8);
    try {
      source.context.fillStyle = "#20c060";
      source.context.fillRect(0, 0, 8, 8);
      Object.defineProperty(source.canvas, "data", {
        value: new Uint8Array(8 * 8 * 4),
      });

      destination.context.drawImage(source.canvas, 0, 0);

      const sample = pixelAt(
        captureGpuPixels(destination.canvas),
        destination.canvas.width,
        4,
        4
      );
      expect(sample[0]).to.be.within(15, 50);
      expect(sample[1]).to.be.within(175, 210);
      expect(sample[2]).to.be.within(75, 115);
      expect(sample[3]).to.be.greaterThan(240);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("applies fractional source crops and destination rectangles on the GPU", function () {
    const source = createCanvas(12, 8);
    const destination = createCanvas(30, 22);
    try {
      source.context.fillStyle = "#ff0000";
      source.context.fillRect(0, 0, 6, 4);
      source.context.fillStyle = "#00ff00";
      source.context.fillRect(6, 0, 6, 4);
      source.context.fillStyle = "#0000ff";
      source.context.fillRect(0, 4, 6, 4);
      source.context.fillStyle = "#ffff00";
      source.context.fillRect(6, 4, 6, 4);

      // A narrow crop straddling x=6 amplifies fractional-coordinate handling.
      destination.context.drawImage(
        source.canvas,
        5.99,
        0,
        1.01,
        4,
        2.75,
        1.25,
        24.5,
        8.5
      );
      // Do the same across y=4 in a separate destination region.
      destination.context.drawImage(
        source.canvas,
        0,
        3.99,
        6,
        1.01,
        1.25,
        11.75,
        12.5,
        8.5
      );

      const pixels = captureGpuPixels(destination.canvas);
      // Pixel (12,3), sampled at its center (12.5,3.5), maps to source
      // x = 5.99 + (12.5 - 2.75) * 1.01 / 24.5 = 6.39194.
      // Between red texel center 5.5 and green center 6.5, ideal bilinear
      // weights are 10.8% red / 89.2% green (R~28, G~227).
      // Integer truncation maps x to 5.4375; ignoring the crop maps x to
      // 5.25. Both negative controls are solid red at this sample.
      const green = pixelAt(pixels, destination.canvas.width, 12, 3);
      expect(green[1] - green[0]).to.be.greaterThan(100);
      expect(green[3]).to.be.greaterThan(200);

      // Pixel (3,14), sampled at (3.5,14.5), maps to source
      // y = 3.99 + (14.5 - 11.75) * 1.01 / 8.5 = 4.31676.
      // That is 18.3% top red / 81.7% bottom blue (R~47, B~208).
      // Integer truncation maps y to 3.4375 and ignoring the crop maps y
      // to 3.5, both solid red rather than blue.
      const blue = pixelAt(pixels, destination.canvas.width, 3, 14);
      expect(blue[2] - blue[0]).to.be.greaterThan(80);
      expect(blue[3]).to.be.greaterThan(200);

      const fractionalEdge = pixelAt(
        pixels,
        destination.canvas.width,
        26,
        3
      );
      expect(fractionalEdge[0]).to.be.lessThan(80);
      expect(fractionalEdge[1]).to.be.greaterThan(180);
      expect(fractionalEdge[2]).to.be.lessThan(50);
      expect(fractionalEdge[3]).to.be.greaterThan(150);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("normalizes negative source and destination extents", function () {
    const source = createCanvas(12, 8);
    const destination = createCanvas(16, 12);
    try {
      source.context.fillStyle = "#ff0000";
      source.context.fillRect(0, 0, 12, 8);
      source.context.fillStyle = "#ffff00";
      source.context.fillRect(6, 4, 4, 3);

      destination.context.drawImage(
        source.canvas,
        10,
        7,
        -4,
        -3,
        12,
        10,
        -8,
        -6
      );

      const pixels = captureGpuPixels(destination.canvas);
      const inside = pixelAt(pixels, destination.canvas.width, 7, 7);
      expect(inside[0]).to.be.greaterThan(220);
      expect(inside[1]).to.be.greaterThan(220);
      expect(inside[2]).to.be.lessThan(30);
      expect(inside[3]).to.be.greaterThan(220);

      const outside = pixelAt(pixels, destination.canvas.width, 2, 7);
      expect(outside[3]).to.equal(0);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("clips the source rectangle and adjusts the destination proportionally", function () {
    const source = createCanvas(8, 8);
    const destination = createCanvas(16, 16);
    try {
      source.context.fillStyle = "#00ffff";
      source.context.fillRect(0, 0, 8, 8);
      destination.context.drawImage(
        source.canvas,
        -2,
        -2,
        4,
        4,
        2,
        2,
        12,
        12
      );

      const pixels = captureGpuPixels(destination.canvas);
      expect(pixelAt(pixels, destination.canvas.width, 5, 5)[3]).to.equal(0);

      const inside = pixelAt(pixels, destination.canvas.width, 10, 10);
      expect(inside[0]).to.be.lessThan(30);
      expect(inside[1]).to.be.greaterThan(220);
      expect(inside[2]).to.be.greaterThan(220);
      expect(inside[3]).to.be.greaterThan(220);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("keeps temporary Canvas images alive until queued draws flush", function () {
    const source = createCanvas(8, 8);
    const destination = createCanvas(16, 8);
    try {
      source.context.fillStyle = "#ff0000";
      source.context.fillRect(0, 0, 8, 8);
      destination.context.drawImage(source.canvas, 0, 0, 8, 8);

      source.context.fillStyle = "#0000ff";
      source.context.fillRect(0, 0, 8, 8);
      destination.context.drawImage(source.canvas, 8, 0, 8, 8);

      const pixels = captureGpuPixels(destination.canvas);
      const first = pixelAt(pixels, destination.canvas.width, 4, 4);
      expect(first[0]).to.be.greaterThan(220);
      expect(first[1]).to.be.lessThan(30);
      expect(first[2]).to.be.lessThan(30);
      expect(first[3]).to.be.greaterThan(220);

      const second = pixelAt(pixels, destination.canvas.width, 12, 4);
      expect(second[0]).to.be.lessThan(30);
      expect(second[1]).to.be.lessThan(30);
      expect(second[2]).to.be.greaterThan(220);
      expect(second[3]).to.be.greaterThan(220);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("keeps ImageData uploads alive through putImageData and drawImage", function () {
    const destination = createCanvas(12, 6);
    try {
      const putData = destination.context.createImageData(4, 4);
      const drawData = destination.context.createImageData(4, 4);
      for (let i = 0; i < putData.data.length; i += 4) {
        putData.data[i] = 240;
        putData.data[i + 1] = 96;
        putData.data[i + 2] = 32;
        putData.data[i + 3] = 255;

        drawData.data[i] = 96;
        drawData.data[i + 1] = 48;
        drawData.data[i + 2] = 240;
        drawData.data[i + 3] = 255;
      }

      destination.context.putImageData(putData, 1, 1);
      destination.context.drawImage(
        {
          data: drawData.data,
          width: drawData.width,
          height: drawData.height,
          // NativeEngine image bitmaps expose bimg::TextureFormat::RGBA8.
          format: 74,
        },
        7,
        1
      );

      const pixels = captureGpuPixels(destination.canvas);
      const putSample = pixelAt(pixels, destination.canvas.width, 2, 2);
      expect(putSample[0]).to.be.greaterThan(220);
      expect(putSample[1]).to.be.within(75, 115);
      expect(putSample[2]).to.be.within(15, 50);
      expect(putSample[3]).to.be.greaterThan(240);

      const drawSample = pixelAt(pixels, destination.canvas.width, 8, 2);
      expect(drawSample[0]).to.be.within(75, 115);
      expect(drawSample[1]).to.be.within(30, 70);
      expect(drawSample[2]).to.be.greaterThan(220);
      expect(drawSample[3]).to.be.greaterThan(240);
    } finally {
      disposeCanvas(destination);
    }
  });

  itWithGpu("preserves transform, rectangular clip, and globalAlpha for Canvas crops", function () {
    const source = createCanvas(20, 8);
    const destination = createCanvas(16, 12);
    try {
      source.context.fillStyle = "#00ffff";
      source.context.fillRect(12, 0, 8, 8);

      destination.context.fillStyle = "#000000";
      destination.context.fillRect(0, 0, 16, 12);
      destination.context.beginPath();
      destination.context.rect(4, 2, 6, 6);
      destination.context.clip();
      destination.context.translate(2, 1);
      destination.context.globalAlpha = 0.5;
      destination.context.drawImage(
        source.canvas,
        12,
        0,
        4,
        8,
        0,
        0,
        8,
        8
      );

      expect(destination.context.globalAlpha).to.equal(0.5);
      const transform = destination.context.getTransform();
      expect(transform.e).to.equal(2);
      expect(transform.f).to.equal(1);

      const pixels = captureGpuPixels(destination.canvas);
      const cropped = pixelAt(pixels, destination.canvas.width, 5, 4);
      expect(cropped[0]).to.be.lessThan(30);
      expect(cropped[1]).to.be.within(100, 155);
      expect(cropped[2]).to.be.within(100, 155);
      expect(cropped[3]).to.be.greaterThan(240);

      const translatedEdge = pixelAt(
        pixels,
        destination.canvas.width,
        8,
        4
      );
      expect(translatedEdge[0]).to.be.lessThan(30);
      expect(translatedEdge[1]).to.be.within(100, 155);
      expect(translatedEdge[2]).to.be.within(100, 155);
      expect(translatedEdge[3]).to.be.greaterThan(240);

      const clippedOut = pixelAt(pixels, destination.canvas.width, 5, 8);
      expect(clippedOut[0]).to.be.lessThan(10);
      expect(clippedOut[1]).to.be.lessThan(10);
      expect(clippedOut[2]).to.be.lessThan(10);
      expect(clippedOut[3]).to.be.greaterThan(240);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("intersects repeated Canvas draws with a retained non-rectangular clip", function () {
    const source = createCanvas(4, 4);
    const destination = createCanvas(16, 12);
    try {
      source.context.fillStyle = "#ff0000";
      source.context.fillRect(0, 0, 4, 4);

      destination.context.fillStyle = "#000000";
      destination.context.fillRect(0, 0, 16, 12);
      destination.context.beginPath();
      destination.context.moveTo(1, 1);
      destination.context.lineTo(13, 1);
      destination.context.lineTo(1, 11);
      destination.context.closePath();
      destination.context.clip();
      destination.context.drawImage(source.canvas, 2, 2, 4, 4);
      destination.context.drawImage(source.canvas, 10, 8, 4, 4);

      const pixels = captureGpuPixels(destination.canvas);
      const firstDraw = pixelAt(pixels, destination.canvas.width, 3, 3);
      expect(firstDraw[0]).to.be.greaterThan(220);
      expect(firstDraw[1]).to.be.lessThan(30);
      expect(firstDraw[2]).to.be.lessThan(30);
      expect(firstDraw[3]).to.be.greaterThan(240);

      [
        // Inside the triangle but outside both destination rectangles.
        pixelAt(pixels, destination.canvas.width, 2, 8),
        // Inside the second destination rectangle but outside the triangle.
        pixelAt(pixels, destination.canvas.width, 12, 9),
      ].forEach(function (outside) {
        expect(outside[0]).to.be.lessThan(10);
        expect(outside[1]).to.be.lessThan(10);
        expect(outside[2]).to.be.lessThan(10);
        expect(outside[3]).to.be.greaterThan(240);
      });
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("reads fractional drawImage edge coverage from the framebuffer", function () {
    const source = createCanvas(2, 2);
    const destination = createCanvas(8, 8);
    try {
      source.context.fillStyle = "#ffffff";
      source.context.fillRect(0, 0, 2, 2);
      destination.context.drawImage(source.canvas, 1.75, 1.75, 2.5, 2.5);

      const pixels = destination.context.getImageData(0, 0, 8, 8).data;
      expect(pixelAt(pixels, destination.canvas.width, 2, 2)[3]).to.equal(255);
      [
        pixelAt(pixels, destination.canvas.width, 1, 2),
        pixelAt(pixels, destination.canvas.width, 4, 2),
        pixelAt(pixels, destination.canvas.width, 2, 1),
        pixelAt(pixels, destination.canvas.width, 2, 4),
      ].forEach(function (edge) {
        expect(edge[3]).to.be.within(40, 90);
      });
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("reads new NanoVG draws after getImageData and toDataURL snapshots", function () {
    const resource = createCanvas(8, 8);
    try {
      resource.context.fillStyle = "#ff0000";
      resource.context.fillRect(0, 0, 8, 8);
      expect(pixelAt(captureGpuPixels(resource.canvas), 8, 6, 6)).to.deep.equal([255, 0, 0, 255]);
      resource.canvas.toDataURL();

      resource.context.fillStyle = "#0000ff";
      resource.context.fillRect(0, 0, 4, 8);
      const pixels = captureGpuPixels(resource.canvas);
      expect(pixelAt(pixels, 8, 2, 2)).to.deep.equal([0, 0, 255, 255]);
      expect(pixelAt(pixels, 8, 6, 6)).to.deep.equal([255, 0, 0, 255]);
    } finally {
      disposeCanvas(resource);
    }
  });

  itWithGpu("reads filtered Canvas draws instead of unfiltered source pixels", function () {
    const source = createCanvas(16, 16);
    const destination = createCanvas(16, 16);
    try {
      source.context.fillStyle = "#ffffff";
      source.context.fillRect(4, 4, 8, 8);
      destination.context.filter = "blur(2px)";
      destination.context.drawImage(source.canvas, 0, 0);
      const pixels = captureGpuPixels(destination.canvas);
      const fringe = pixelAt(pixels, 16, 3, 8);
      const center = pixelAt(pixels, 16, 8, 8);
      // The unfiltered CPU copy has zero alpha outside the source ink.
      expect(fringe[0]).to.equal(fringe[1]);
      expect(fringe[1]).to.equal(fringe[2]);
      expect(fringe[3]).to.be.greaterThan(0);
      expect(center[3]).to.be.greaterThan(fringe[3]);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("reads source dimensions after coercing drawImage coordinates once", function () {
    const source = createCanvas(8, 8);
    const destination = createCanvas(8, 8);
    try {
      source.context.fillStyle = "#ff0000";
      source.context.fillRect(0, 0, 8, 8);
      let conversions = 0;
      destination.context.drawImage(source.canvas, {
        valueOf() {
          ++conversions;
          source.canvas.width = 4;
          return 0;
        },
      }, 0);
      expect(conversions).to.equal(1);
      const pixels = captureGpuPixels(destination.canvas);
      expect(pixelAt(pixels, 8, 2, 2)).to.deep.equal([255, 0, 0, 255]);
      expect(pixelAt(pixels, 8, 6, 2)).to.deep.equal([0, 0, 0, 0]);
    } finally {
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  itWithGpu("retains the Canvas source kind across coordinate coercion", function () {
    const source = createCanvas(8, 8);
    const destination = createCanvas(8, 8);
    const prototype = Object.getPrototypeOf(source.canvas);
    try {
      source.context.fillStyle = "#ff0000";
      source.context.fillRect(0, 0, 8, 8);
      let conversions = 0;
      destination.context.drawImage(source.canvas, {
        valueOf() {
          ++conversions;
          source.canvas.width = 4;
          Object.setPrototypeOf(source.canvas, null);
          source.canvas.data = new Uint8Array(0);
          return 0;
        },
      }, 0);
      expect(conversions).to.equal(1);
      const pixels = captureGpuPixels(destination.canvas);
      expect(pixelAt(pixels, 8, 2, 2)).to.deep.equal([255, 0, 0, 255]);
      expect(pixelAt(pixels, 8, 6, 2)).to.deep.equal([0, 0, 0, 0]);
    } finally {
      Object.setPrototypeOf(source.canvas, prototype);
      disposeCanvas(destination);
      disposeCanvas(source);
    }
  });

  it("retains the ImageBitmap source kind when coercion removes its data", function () {
    const destination = createCanvas(8, 8);
    try {
      [false, true].forEach(function (noOp) {
        const bitmap = {
          width: 8,
          height: 8,
          format: 74,
          data: new Uint8Array(8 * 8 * 4),
        };
        let conversions = 0;
        const draw = function () {
          destination.context.drawImage(bitmap, {
            valueOf() {
              ++conversions;
              delete bitmap.data;
              return 0;
            },
          }, 0, noOp ? 0 : 8, 8);
        };
        if (noOp) {
          expect(draw).not.to.throw();
        } else {
          expect(draw).to.throw("drawImage: ImageBitmap data must be a typed array.");
        }
        expect(conversions).to.equal(1);
      });
    } finally {
      disposeCanvas(destination);
    }
  });

  itWithGpu("clips framebuffer readback and normalizes negative region extents", function () {
    const resource = createCanvas(8, 8);
    try {
      resource.context.fillStyle = "#ff0000";
      resource.context.fillRect(0, 0, 8, 8);
      const positive = resource.context.getImageData(-1, -1, 3, 3);
      const negative = resource.context.getImageData(2, 2, -3, -3);
      expect(Array.from(negative.data)).to.deep.equal(Array.from(positive.data));
      expect(pixelAt(positive.data, 3, 0, 0)).to.deep.equal([0, 0, 0, 0]);
      expect(pixelAt(positive.data, 3, 1, 1)).to.deep.equal([255, 0, 0, 255]);

      const outside = resource.context.getImageData(-2147483648, 0, -2, 1);
      expect(Array.from(outside.data)).to.deep.equal([0, 0, 0, 0, 0, 0, 0, 0]);
      resource.canvas.width = 4;
      expect(Array.from(resource.context.getImageData(0, 0, 1, 1).data)).to.deep.equal([0, 0, 0, 0]);
    } finally {
      disposeCanvas(resource);
    }
  });

  it("falls back to PNG for default, empty, case-variant, and unsupported MIME types", function () {
    const canvas = new _native.Canvas();
    canvas.width = 2;
    canvas.height = 2;
    try {
      [
        canvas.toDataURL(),
        canvas.toDataURL(""),
        canvas.toDataURL("image/png"),
        canvas.toDataURL("IMAGE/PNG"),
        canvas.toDataURL("image/jpeg"),
      ].forEach(function (url) {
        expect(url.indexOf("data:image/png;base64,")).to.equal(0);
        expect(url.length).to.be.greaterThan(32);
      });
    } finally {
      canvas.dispose();
    }
  });

  it("ends PNG data URLs at IEND without trailing allocation bytes", function () {
    [1, 2, 64].forEach(function (size) {
      const canvas = new _native.Canvas();
      canvas.width = size;
      canvas.height = size;
      try {
        const url = canvas.toDataURL();
        const png = Buffer.from(url.substring("data:image/png;base64,".length), "base64");
        expect(Array.from(png.subarray(0, 8))).to.deep.equal([137, 80, 78, 71, 13, 10, 26, 10]);
        let offset = 8;
        let foundEnd = false;
        while (offset + 12 <= png.length) {
          const length = png.readUInt32BE(offset);
          const type = png.toString("ascii", offset + 4, offset + 8);
          offset += length + 12;
          expect(offset).to.be.at.most(png.length);
          if (type === "IEND") {
            expect(length).to.equal(0);
            foundEnd = true;
            break;
          }
        }
        expect(foundEnd).to.equal(true);
        expect(offset).to.equal(png.length);
      } finally {
        canvas.dispose();
      }
    });
  });

  it("returns ascent and descent in no-font text metrics", function () {
    const resource = createCanvas(8, 8);
    try {
      resource.context.font = "20px MissingFontForCanvasMetrics";
      const metrics = resource.context.measureText("test");
      expect(metrics).to.have.property("actualBoundingBoxAscent");
      expect(metrics).to.have.property("actualBoundingBoxDescent");
      expect(metrics.actualBoundingBoxAscent).to.equal(15);
      expect(metrics.actualBoundingBoxDescent).to.equal(5);
    } finally {
      disposeCanvas(resource);
    }
  });
});

function createSceneAndWait(callback: (engine: NativeEngine, scene: Scene) => void, done: () => void) {
  const engine = new NativeEngine();
  const scene = new Scene(engine);
  scene.createDefaultCamera();
  callback(engine, scene);
  scene.executeWhenReady(() => {
    done();
  });
}

describe("Materials", function () {
  this.timeout(0);
  it("Empty ShaderMaterial should compile", function (done) {
    function createEmptyShaderMat() {
      createSceneAndWait((engine, scene) => {
        const sphere = MeshBuilder.CreateSphere(
          "sphere",
          { diameter: 2, segments: 32 },
          scene
        );
        const shaders = {
          vertexSource: `void main() {}`,
          fragmentSource: `void main() {}`,
        };
        const mat = new ShaderMaterial("shader", scene, shaders, {});
        sphere.material = mat;
      }, done);
    }
    createEmptyShaderMat();
  });
  it("GradientMaterial should compile", function (done) {
    createSceneAndWait((engine, scene) => {
      const sphere = MeshBuilder.CreateSphere(
        "sphere",
        { diameter: 2, segments: 32 },
        scene
      );
      const gradientMaterial = new GradientMaterial("grad", scene);
      sphere.material = gradientMaterial;
    }, done);
  });
});

describe("PostProcesses", function () {
  this.timeout(0);
  it("PassPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new PassPostProcess("Scene copy", 1.0, camera);
    }, done);
  });
  it("BlackAndWhitePostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new BlackAndWhitePostProcess("bandw", 1.0, camera);
    }, done);
  });
  it("BlurPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new BlurPostProcess(
        "Horizontal blur",
        new Vector2(1.0, 0),
        32,
        0.25,
        camera
      );
    }, done);
  });
  it("ConvolutionPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new ConvolutionPostProcess(
        "Sepia",
        ConvolutionPostProcess.EmbossKernel,
        1.0,
        camera
      );
    }, done);
  });
  it("HighlightsPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new HighlightsPostProcess("highlights", 1.0, camera);
    }, done);
  });
  it("TonemapPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new TonemapPostProcess("tonemap", TonemappingOperator.Hable, 1.0, camera);
    }, done);
  });
  it("ImageProcessingPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new ImageProcessingPostProcess("processing", 1.0, camera);
    }, done);
  });
  it("RefractionPostProcess", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera;
      new RefractionPostProcess(
        "Refraction",
        "https://playground.babylonjs.com/textures/grass.jpg",
        new Color3(1.0, 1.0, 1.0),
        0.5,
        0.5,
        1.0,
        camera
      );
    }, done);
  });
  it("DefaultPipeline", function (done) {
    createSceneAndWait((engine, scene) => {
      const camera = scene._activeCamera!;
      new DefaultRenderingPipeline(
        "defaultPipeline", // The name of the pipeline
        true, // Do you want the pipeline to use HDR texture?
        scene, // The scene instance
        [camera] // The list of cameras to be attached to
      );
    }, done);
  });
  /*
    it("FxaaPostProcess", function(done) {
        createSceneAndWait((engine, scene) => {
            const camera = scene._activeCamera;
            new FxaaPostProcess("fxaa", 1.0, camera);
        }, done);
    });
    it("ColorCorrectionPostProcess", function(done) {
        createSceneAndWait((engine, scene) => {
            const camera = scene._activeCamera;
            new ColorCorrectionPostProcess("color_correction", "https://doc.babylonjs.com/_next/image?url=%2Fimg%2Fhow_to%2Fpost-processes%2Flut-inverted.png&w=256&q=16", 1.0, camera);
        }, done);
    });
    it("LensRenderingPipeline", function(done) {
        createSceneAndWait((engine, scene) => {
            const camera = scene._activeCamera;
            const parameters = {
                edge_blur: 1.0,
                chromatic_aberration: 1.0,
                distortion: 1.0,
            };              
            new LensRenderingPipeline('lensEffects', parameters, scene, 1.0, camera);
        }, done);
    });
    it("MotionBlurPostProcess", function(done) {
        createSceneAndWait((engine, scene) => {
            const camera = scene._activeCamera;
            new MotionBlurPostProcess(
                "mb", // The name of the effect.
                scene, // The scene containing the objects to blur according to their velocity.
                1.0, // The required width/height ratio to downsize to before computing the render pass.
                camera // The camera to apply the render pass to.
            );
        }, done);
    });
    it("ScreenSpaceReflectionPostProcess", function(done) {
        createSceneAndWait((engine, scene) => {
            const camera = scene._activeCamera;
            new ScreenSpaceReflectionPostProcess("ssr", scene, 1.0, camera);
        }, done);
    });*/
});

describe("NativeEncoding", function () {
  this.timeout(0);

  async function expectValidPNG(blob: Blob) {
    expect(blob).to.be.instanceOf(Blob);
    const arrayBuffer = await blob.arrayBuffer();
    expect(arrayBuffer.byteLength).to.be.greaterThan(0);

    const pngSignature = new Uint8Array(arrayBuffer.slice(0, 4));
    expect(pngSignature[0]).to.equal(137); // PNG signature bytes
    expect(pngSignature[1]).to.equal(80);  // 'P'
    expect(pngSignature[2]).to.equal(78);  // 'N'
    expect(pngSignature[3]).to.equal(71);  // 'G'
  }

  it("should encode a PNG", async function () {
    const pixelData = new Uint8Array(4).fill(255);
    const result = await _native.EncodeImageAsync(pixelData, 1, 1, "image/png", false);
    await expectValidPNG(result);
  });

  it("should handle multiple concurrent encoding tasks", async function () {
    const pixelDatas = [];
    for (let i = 0; i < 10; i++) {
      pixelDatas.push(new Uint8Array(4).fill(255));
    }
    const results = await Promise.all(pixelDatas.map((pixelData) =>
      _native.EncodeImageAsync(pixelData, 1, 1, "image/png", false)
    ));
    await Promise.all(results.map(b => expectValidPNG(b)));
  });
});

function hexToBytes(hex: string): Uint8Array {
  const out = new Uint8Array(hex.length / 2);
  for (let i = 0; i < out.length; ++i) {
    out[i] = parseInt(hex.substr(i * 2, 2), 16);
  }
  return out;
}

// Both plugins default to OFF, so report them as skipped rather than silently passing
// when the build did not opt in. CI enables both for the jobs that run UnitTests.
(typeof _native.DracoCodec !== "undefined" ? describe : describe.skip)("NativeDraco", function () {
  this.timeout(0);

  // Two triangles sharing an edge. Values are exact halves so they survive the float32
  // round trip bit-for-bit once quantization is disabled.
  const positions = new Float32Array([
    0, 0, 0,
    1, 0, 0,
    0, 1, 0,
    1, 1, 0,
  ]);
  const indices = new Uint16Array([0, 1, 2, 1, 3, 2]);

  // Encoded by the reference draco3dgltf 1.5.7 encoder (the same package Babylon.js takes
  // its decoder from), standard edgebreaker, 14-bit position quantization. Using a fixture
  // from the reference encoder rather than our own output pins this decoder to the upstream
  // bitstream instead of to itself.
  const ENCODED = hexToBytes(
    "445241434f02020101000000040200020000011fff011101ff00000100090300000201010100030301300110030024824a0400000000ff3f00000000000000000000000000000000803f0e");
  const POSITION_ATTRIBUTE_ID = 0;

  // A 63-vertex UV sphere carrying POSITION, NORMAL and TEX_COORD, encoded by the same
  // reference encoder with per-attribute quantization. The single-triangle-pair fixture
  // above cannot exercise multi-attribute decoding or a non-degenerate edgebreaker
  // traversal, which are what the glTF-bitstream-only build actually restricts.
  //
  // The expected counts below are what the reference draco3dgltf decoder reports for this
  // exact buffer, not the pre-encode mesh: Draco merges points whose attributes all match
  // and drops the degenerate triangles at the poles, so 63 vertices / 96 triangles going
  // in becomes 62 vertices / 91 triangles coming out.
  const SPHERE = hexToBytes(
    "445241434f020201010000003a5b025b05001a5fd73e55ad3e55d5aa3e5555adaa3ea55455559faaaaaa565501ff0111" +
    "ff02694af8058097a3755f03ff0000000000010100010009030000020101090300010301030902000202010101000f2b" +
    "a106b907592e51030c141534f4dfc29a78ddaf7f80bed2ffff2bad28fedf4fcb03010030a7577c44104633030047e86d" +
    "00c02304008f08128a7a003c181d05009108c20010d48301102848f888fa0fdc030090d02b010050db9591d895901000" +
    "749b07f388bca224060084f91f49f408cd0c0088ee9110006466480800ba0d840110a80703405010e61175c5500b00ba" +
    "12a805005dc92b23d12b9dc1b6fbb400e0113dc2480c8007eb8a9208c2b43d000009bd1200f8b4a016007425510b00bc" +
    "525702009fd62b010050eb950040a8ed4a0040d48a5a00d095422d00f04aa0160078a54f0b00ba92570200a2b62b0180" +
    "50eb0cb89da8ed3600e0110200490409030580074762004098a00000e1aef8881e8cb7010090b0ed018047f8081f1100" +
    "80b0001075ea0e00cc0c00000000ff3f0000000080bf000080bf000080bf000000400e000301000b036904135103f109" +
    "a106b9270e3ecb87a50ecead84ceeaa8bdde65000002dc7542d24fdbb29af35e882de5dab6c48d3dd1bbeceebaec45c6" +
    "73b0bb6b772244eb067057e873dc4e3d72c57b21b6539244f9b4fe44ef620ee3d4cf9108b00b40340076034034000000" +
    "44130dc01c19673cc72e4413bd8b398c673cc72e00d10010057042d294b60000fc0fd127b6b63cbd9acf91f1ffff9492" +
    "621f37ff030000ff0100000a010101000d039532550a1b0901090109010a0eb9fbab2e93abef3f8700fcff00aceaff00" +
    "60a0001a8220220800400800820822089a0000000000ff0f000000000000000000000000803f0c");
  const SPHERE_VERTICES = 62;
  const SPHERE_INDICES = 273;

  function expectDecodedQuad(decoded: any) {
    expect(decoded.totalVertices).to.equal(positions.length / 3);
    expect(decoded.indices.length).to.equal(indices.length);

    const attribute = decoded.attributes.find((a: any) => a.kind === "position");
    expect(attribute, "decoded position attribute").to.not.equal(undefined);

    const corner = (buffer: any, i: number) =>
      [buffer[i * 3], buffer[i * 3 + 1], buffer[i * 3 + 2]]
        .map((v: number) => v.toFixed(2))
        .join(",");

    const expectedCorners: string[] = [];
    const actualCorners: string[] = [];
    for (let i = 0; i < indices.length; ++i) {
      expectedCorners.push(corner(positions, indices[i]));
      actualCorners.push(corner(attribute.data, decoded.indices[i]));
    }
    expect(actualCorners.sort()).to.deep.equal(expectedCorners.sort());
  }

  function captureError(callback: () => unknown): string {
    try {
      callback();
    } catch (error) {
      if (error instanceof Error) {
        return `${error.name}: ${error.message}`;
      }
      throw new Error(`Expected an Error object, received ${String(error)}`);
    }
    throw new Error("Expected callback to throw");
  }

  it("publishes the codec version it was built against", function () {
    expect(_native.DracoCodec.Version).to.be.a("string");
    expect(_native.DracoCodec.Version).to.match(/^\d+\.\d+\.\d+$/);
  });

  it("keeps the compatibility entry points interoperable with DracoCodec", function () {
    expect(_native.decodeDracoMesh).to.be.a("function");
    expect(_native.encodeDracoMesh).to.be.a("function");

    const compatibilityEncoded = _native.encodeDracoMesh(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      indices,
      {});
    expectDecodedQuad(_native.DracoCodec.Decode(
      compatibilityEncoded.data,
      { position: compatibilityEncoded.attributeIds.position }));

    const groupedEncoded = _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      indices,
      {});
    expectDecodedQuad(_native.decodeDracoMesh(
      groupedEncoded.data,
      { position: groupedEncoded.attributeIds.position }));
  });

  it("propagates compatibility entry point errors", function () {
    const emptyData = new Uint8Array(0);
    expect(captureError(() => _native.decodeDracoMesh(emptyData)))
      .to.equal(captureError(() => _native.DracoCodec.Decode(emptyData)));

    const noAttributes: any[] = [];
    expect(captureError(() => _native.encodeDracoMesh(noAttributes, null, {})))
      .to.equal(captureError(() => _native.DracoCodec.Encode(noAttributes, null, {})));
  });

  it("decodes a mesh produced by the reference glTF encoder", function () {
    const decoded = _native.DracoCodec.Decode(ENCODED, { position: POSITION_ATTRIBUTE_ID });

    expect(decoded.totalVertices).to.equal(positions.length / 3);
    expect(decoded.indices.length).to.equal(indices.length);

    // Draco reorders points, so compare the triangles as sets of resolved corner
    // positions rather than assuming the original vertex order survived. Rounded to
    // two decimals so the comparison tolerates quantization but still separates
    // coordinates that are a whole unit apart.
    const attribute = decoded.attributes.find((a: any) => a.kind === "position");
    expect(attribute, "decoded position attribute").to.not.equal(undefined);
    expect(attribute.size).to.equal(3);

    const corner = (buffer: any, i: number) =>
      [buffer[i * 3], buffer[i * 3 + 1], buffer[i * 3 + 2]]
        .map((v: number) => v.toFixed(2))
        .join(",");

    const expectedCorners: string[] = [];
    const actualCorners: string[] = [];
    for (let i = 0; i < indices.length; ++i) {
      expectedCorners.push(corner(positions, indices[i]));
      actualCorners.push(corner(attribute.data, decoded.indices[i]));
    }
    expect(actualCorners.sort()).to.deep.equal(expectedCorners.sort());
  });

  it("decodes without an explicit attribute id map", function () {
    const decoded = _native.DracoCodec.Decode(ENCODED);
    expect(decoded.totalVertices).to.equal(positions.length / 3);
    expect(decoded.attributes.find((a: any) => a.kind === "position")).to.not.equal(undefined);
  });

  it("decodes a multi-attribute mesh", function () {
    const decoded = _native.DracoCodec.Decode(SPHERE, { position: 0, normal: 1, uv: 2 });

    expect(decoded.totalVertices).to.equal(SPHERE_VERTICES);
    expect(decoded.indices.length).to.equal(SPHERE_INDICES);

    const byKind: any = {};
    for (const a of decoded.attributes) {
      byKind[a.kind] = a;
    }

    expect(byKind.position.size).to.equal(3);
    expect(byKind.normal.size).to.equal(3);
    expect(byKind.uv.size).to.equal(2);

    expect(byKind.position.data.length).to.equal(SPHERE_VERTICES * 3);
    expect(byKind.normal.data.length).to.equal(SPHERE_VERTICES * 3);
    expect(byKind.uv.data.length).to.equal(SPHERE_VERTICES * 2);

    // Every index must address a real vertex, and the geometry must actually be the
    // unit sphere that was encoded rather than plausible-looking noise.
    for (let i = 0; i < decoded.indices.length; ++i) {
      expect(decoded.indices[i]).to.be.lessThan(SPHERE_VERTICES);
    }

    for (let v = 0; v < SPHERE_VERTICES; ++v) {
      const x = byKind.position.data[v * 3];
      const y = byKind.position.data[v * 3 + 1];
      const z = byKind.position.data[v * 3 + 2];
      expect(Math.sqrt(x * x + y * y + z * z)).to.be.closeTo(1, 0.01);
    }
  });

  it("rejects malformed input", function () {
    const garbage = new Uint8Array(64);
    for (let i = 0; i < garbage.length; ++i) {
      garbage[i] = (i * 37) & 0xff;
    }
    expect(() => _native.DracoCodec.Decode(garbage)).to.throw();
  });

  it("rejects truncated input", function () {
    const truncated = ENCODED.slice(0, Math.floor(ENCODED.length / 2));
    expect(() => _native.DracoCodec.Decode(truncated)).to.throw();
  });

  it("rejects an empty buffer", function () {
    expect(() => _native.DracoCodec.Decode(new Uint8Array(0))).to.throw();
  });

  it("exposes an encoder", function () {
    expect(_native.DracoCodec.Encode).to.be.a("function");
  });

  it("round trips a mesh through the encoder and back", function () {
    // Quantization is left off so the exact-half coordinates above survive bit for bit.
    const encoded = _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      indices);

    // Int8Array, matching Babylon.js's IDracoEncodedMeshData contract and the WASM
    // encoder it stands in for.
    expect(encoded.data).to.be.an.instanceOf(Int8Array);
    expect(encoded.data.length).to.be.greaterThan(0);
    expect(encoded.attributeIds.position).to.be.a("number");

    const decoded = _native.DracoCodec.Decode(encoded.data, { position: encoded.attributeIds.position });

    expect(decoded.totalVertices).to.equal(positions.length / 3);
    expect(decoded.indices.length).to.equal(indices.length);

    // Same set-of-corners comparison as the decode tests: Draco is free to reorder points.
    const attribute = decoded.attributes.find((a: any) => a.kind === "position");
    expect(attribute, "decoded position attribute").to.not.equal(undefined);

    const corner = (buffer: any, i: number) =>
      [buffer[i * 3], buffer[i * 3 + 1], buffer[i * 3 + 2]]
        .map((v: number) => v.toFixed(2))
        .join(",");

    const expectedCorners: string[] = [];
    const actualCorners: string[] = [];
    for (let i = 0; i < indices.length; ++i) {
      expectedCorners.push(corner(positions, indices[i]));
      actualCorners.push(corner(attribute.data, decoded.indices[i]));
    }
    expect(actualCorners.sort()).to.deep.equal(expectedCorners.sort());
  });

  it("encodes an unindexed mesh", function () {
    // Without an index buffer the vertices are taken as a flat triangle list, so the
    // vertex count itself has to be a multiple of three. The shared quad fixture is
    // four vertices, so use a single triangle here.
    const triangle = new Float32Array([
      0, 0, 0,
      1, 0, 0,
      0, 1, 0,
    ]);

    const encoded = _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: triangle }]);
    expect(encoded.data).to.be.an.instanceOf(Int8Array);
    expect(encoded.data.length).to.be.greaterThan(0);
  });

  it("accepts 32 bit indices", function () {
    const encoded = _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      new Uint32Array(indices));
    expect(encoded.data.length).to.be.greaterThan(0);
  });

  it("encodes typed array views with a non-zero byteOffset", function () {
    // Both the attribute and the index buffer are subviews sitting partway into a larger
    // ArrayBuffer, preceded by deliberately wrong data. Reading via ArrayBuffer().Data()
    // instead of the typed view would silently encode that padding, so the round trip
    // below is what catches it -- the decoded corners would not match.
    const padFloats = 5;
    const positionStorage = new Float32Array(padFloats + positions.length);
    positionStorage.fill(-999);
    positionStorage.set(positions, padFloats);
    const positionView = positionStorage.subarray(padFloats);

    const padIndices = 3;
    const indexStorage = new Uint16Array(padIndices + indices.length);
    indexStorage.fill(0xdead & 0xffff);
    indexStorage.set(indices, padIndices);
    const indexView = indexStorage.subarray(padIndices);

    expect(positionView.byteOffset).to.be.greaterThan(0);
    expect(indexView.byteOffset).to.be.greaterThan(0);

    const encoded = _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positionView }],
      indexView);

    const decoded = _native.DracoCodec.Decode(encoded.data, { position: encoded.attributeIds.position });
    expect(decoded.totalVertices).to.equal(positions.length / 3);
    expect(decoded.indices.length).to.equal(indices.length);

    const attribute = decoded.attributes.find((a: any) => a.kind === "position");
    expect(attribute, "decoded position attribute").to.not.equal(undefined);

    const corner = (buffer: any, i: number) =>
      [buffer[i * 3], buffer[i * 3 + 1], buffer[i * 3 + 2]]
        .map((v: number) => v.toFixed(2))
        .join(",");

    const expectedCorners: string[] = [];
    const actualCorners: string[] = [];
    for (let i = 0; i < indices.length; ++i) {
      expectedCorners.push(corner(positions, indices[i]));
      actualCorners.push(corner(attribute.data, decoded.indices[i]));
    }
    expect(actualCorners.sort()).to.deep.equal(expectedCorners.sort());
  });

  it("rejects an index buffer that is neither 16 nor 32 bit", function () {
    expect(() => _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      new Int32Array([0, 1, 2, 1, 3, 2]))).to.throw();
  });

  it("rejects an index count that is not a multiple of 3", function () {
    expect(() => _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      new Uint16Array([0, 1, 2, 1]))).to.throw();
  });

  it("rejects an index that is out of range for the vertex count", function () {
    expect(() => _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: positions }],
      new Uint16Array([0, 1, 9999]))).to.throw();
  });

  it("rejects an attribute length that is not a multiple of its size", function () {
    expect(() => _native.DracoCodec.Encode(
      [{ kind: "position", dracoName: "POSITION", size: 3, data: new Float32Array([0, 0, 0, 1]) }],
      indices)).to.throw();
  });

  it("rejects a mesh with no position attribute", function () {
    expect(() => _native.DracoCodec.Encode(
      [{ kind: "normal", dracoName: "NORMAL", size: 3, data: positions }],
      indices)).to.throw();
  });
});

(typeof _native.MeshoptCodec !== "undefined" ? describe : describe.skip)("NativeMeshopt", function () {
  this.timeout(0);

  // Produced by the reference meshoptimizer 0.22 JavaScript encoder
  // (MeshoptEncoder.encodeVertexBuffer) over 6 vertices of 16-byte stride, so this
  // pins our native decoder against the upstream bitstream rather than against itself.
  const ENCODED = hexToBytes(
    "a00000013ff000007fffa0606001380000007e0000013ff0000020ff9070480130800000800000013ff0000080ff" +
    "a0606001320000007e012aa000000000000000000000000000000000000000000000000000000000800000000000beadde");
  const EXPECTED = hexToBytes(
    "00000000000000800000000000beadde0000c03f000010c00000403f01beadde00004040000090c00000c03f02beadde" +
    "000090400000d8c00000104003beadde0000c040000010c10000404004beadde0000f040000034c10000704005beadde");
  const COUNT = 6;
  const STRIDE = 16;

  it("publishes the codec version it was built against", function () {
    expect(_native.MeshoptCodec.Version).to.be.a("string");
    expect(_native.MeshoptCodec.Version).to.match(/^\d+\.\d+$/);
  });

  it("decodes a reference stream byte for byte", function () {
    const decoded = _native.MeshoptCodec.Decode(ENCODED, COUNT, STRIDE, "ATTRIBUTES");
    expect(decoded.length).to.equal(EXPECTED.length);
    expect(Array.from(decoded)).to.deep.equal(Array.from(EXPECTED));
  });

  it("rejects malformed input", function () {
    const garbage = new Uint8Array(ENCODED.length);
    for (let i = 0; i < garbage.length; ++i) {
      garbage[i] = (i * 37) & 0xff;
    }
    expect(() => _native.MeshoptCodec.Decode(garbage, COUNT, STRIDE, "ATTRIBUTES")).to.throw();
  });

  it("rejects truncated input", function () {
    const truncated = ENCODED.slice(0, Math.floor(ENCODED.length / 2));
    expect(() => _native.MeshoptCodec.Decode(truncated, COUNT, STRIDE, "ATTRIBUTES")).to.throw();
  });

  it("rejects an unknown mode", function () {
    expect(() => _native.MeshoptCodec.Decode(ENCODED, COUNT, STRIDE, "NOT_A_MODE")).to.throw();
  });

  it("rejects a stride outside [1, 256]", function () {
    expect(() => _native.MeshoptCodec.Decode(ENCODED, COUNT, 0, "ATTRIBUTES")).to.throw();
    expect(() => _native.MeshoptCodec.Decode(ENCODED, COUNT, 257, "ATTRIBUTES")).to.throw();
  });

  it("rejects an ATTRIBUTES stride that is not a multiple of 4", function () {
    expect(() => _native.MeshoptCodec.Decode(ENCODED, COUNT, 6, "ATTRIBUTES")).to.throw();
  });

  it("rejects a negative count", function () {
    expect(() => _native.MeshoptCodec.Decode(ENCODED, -1, STRIDE, "ATTRIBUTES")).to.throw();
  });

  it("rejects a TRIANGLES count that is not a multiple of 3", function () {
    expect(() => _native.MeshoptCodec.Decode(ENCODED, 4, 2, "TRIANGLES")).to.throw();
  });

  it("rejects a non-typed-array source", function () {
    expect(() => _native.MeshoptCodec.Decode(null, COUNT, STRIDE, "ATTRIBUTES")).to.throw();
  });
});

describe("Canvas image reloads", function () {
  this.timeout(5000);
  const test = hasNativeImageLoading ? it : it.skip;
  const url = "app:///Assets/image-reload.png";
  const dataUrl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAAAAAA+i0toAAAADElEQVR42mNgqP8PAAIBAX+LG2RhAAAAAElFTkSuQmCC";

  for (const sources of [[url, url], [url, dataUrl], [dataUrl, url], [dataUrl, dataUrl]]) {
    test(`loads the same image again (${sources.map(source => source === url ? "URL" : "data").join(" to ")})`, async function () {
      const image = new _native.Image();
      for (const source of sources) {
        await new Promise<void>((resolve, reject) => {
          image.onload = resolve;
          image.onerror = reject;
          image.src = source;
        });
        expect(image.width).to.equal(source === url ? 2 : 3);
        expect(image.naturalWidth).to.equal(image.width);
        expect(image.height).to.equal(1);
        expect(image.naturalHeight).to.equal(1);
      }
    });
  }

  test("reflects the assigned src immediately", async function () {
    const image = new _native.Image();
    await new Promise<void>((resolve, reject) => {
      image.onload = resolve;
      image.onerror = reject;
      image.src = dataUrl;
      expect(image.src).to.equal(dataUrl);
    });
    expect(image.src).to.equal(dataUrl);
  });

  for (const fromUrl of [true, false]) {
    test(`only delivers the latest assignment after a pending ${fromUrl ? "URL" : "data"} load`, async function () {
      setImageReloadTestResponse(Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAADklEQVR4nGP4z8AAQv8BD/kD/YURmXYAAAAASUVORK5CYII=", "base64"));
      const image = new _native.Image();
      const barrier = new _native.Image();
      const loaded: number[] = [];
      const errors: unknown[] = [];
      await new Promise<void>((resolve, reject) => {
        image.onload = () => { loaded.push(image.width); };
        image.onerror = (error: unknown) => { errors.push(error); reject(error); };
        barrier.onload = resolve;
        barrier.onerror = reject;
        // The in-memory URL resolver queues completion synchronously. The final data load
        // is a runtime-queue barrier after both candidate callbacks, not a timing estimate.
        image.src = fromUrl ? "image-reload-test:///image.png" : dataUrl;
        image.src = dataUrl;
        barrier.src = dataUrl;
      });
      expect(image.src).to.equal(dataUrl);
      expect(loaded).to.deep.equal([3]);
      expect(errors).to.deep.equal([]);
      expect(image.width).to.equal(3);
      expect(barrier.width).to.equal(3);
    });
  }

  const pixelTest = hasNativeImageLoading && hasGpuRendering && !skipCanvasGpuTests ? it : it.skip;
  const redPng = "iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAADklEQVR42mP4z8DwH4QBEfcD/f6tu5kAAAAASUVORK5CYII=";
  const greenPng = "iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAADElEQVR42mNg+A+BAA/5A/3mxKLtAAAAAElFTkSuQmCC";
  for (const toData of [false, true]) {
    pixelTest(`draws reloaded pixels instead of the cached texture (URL to ${toData ? "data" : "URL"})`, async function () {
      const canvas = new _native.Canvas();
      canvas.width = 4;
      canvas.height = 4;
      const context = canvas.getContext("2d");
      try {
        const image = new _native.Image();
        const load = (assign: () => void) => new Promise<void>((resolve, reject) => {
          image.onload = resolve;
          image.onerror = reject;
          assign();
        });
        const sample = () => context.getImageData(1, 1, 1, 1).data;
        const expectChannel = (data: any, channel: number) => {
          expect(data[channel]).to.be.greaterThan(240);
          expect(data[1 - channel]).to.be.lessThan(20);
          expect(data[2]).to.be.lessThan(20);
          expect(data[3]).to.be.greaterThan(240);
        };

        setImageReloadTestResponse(Buffer.from(redPng, "base64"));
        await load(() => {
          image.src = "image-reload-test:///red.png";
        });
        context.drawImage(image, 0, 0, 4, 4);
        expectChannel(sample(), 0);

        if (toData) {
          await load(() => {
            image.src = "data:image/png;base64," + greenPng;
          });
        } else {
          setImageReloadTestResponse(Buffer.from(greenPng, "base64"));
          await load(() => {
            image.src = "image-reload-test:///green.png";
          });
        }
        context.clearRect(0, 0, 4, 4);
        context.drawImage(image, 0, 0, 4, 4);
        expectChannel(sample(), 1);
      } finally {
        context.dispose();
        canvas.dispose();
      }
    });
  }

  test("reports load errors and can recover with data and URL loads", async function () {
    const image = new _native.Image();
    let errorCount = 0;
    await new Promise<void>((resolve, reject) => {
      image.onload = () => reject(new Error("A missing file unexpectedly loaded"));
      image.onerror = () => { ++errorCount; resolve(); };
      image.src = "app:///Assets/nonexistent-image-reload.png";
    });
    expect(errorCount).to.equal(1);
    for (const source of [dataUrl, url]) {
      await new Promise<void>((resolve, reject) => {
        image.onload = resolve;
        image.onerror = reject;
        image.src = source;
      });
      expect(image.src).to.equal(source);
      expect(image.width).to.equal(source === url ? 2 : 3);
    }
  });
});

mocha.run((failures) => {
  // Test program will wait for code to be set before exiting
  if (failures > 0) {
    // Failure
    setExitCode(1);
  } else {
    // Success
    setExitCode(0);
  }
});