xbintsc 0.5.38 → 0.5.42

package/dist/tests/e2e/gui-canvas-state.test.js

@@ -0,0 +1,297 @@
+/**
+ * End-to-end tests for the Canvas2D features added after the first canvas
+ * slice: clipping, compositing, shadows, hit testing, smoothing, data-URL
+ * backgrounds and `OffscreenCanvas`.
+ *
+ * They run the real rasteriser and read pixels back with `getImageData`, so a
+ * regression in coverage/alpha math shows up as a concrete colour.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+const PAGE = `
+<html><head><style>body { margin: 0; }</style></head><body>
+  <canvas id="c" width="120" height="120"></canvas>
+  <canvas id="src" width="20" height="20"></canvas>
+  <canvas id="transferred" width="20" height="20"></canvas>
+  <div id="bg" style="width:40px;height:40px"></div>
+</body></html>`;
+describe.skipIf(!guiAvailable)("gui extension — canvas state, clip and offscreen", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("clips drawing and composites with the Porter-Duff operators", () => {
+        const { value } = harness.compileAndRun("canvas-clip-composite", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "clip", width: 400, height: 300 });
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const ctx: any = canvas.getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, 120, 120);
+
+        // A rectangular clip keeps a red fill inside (0,0)-(50,50).
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, 0, 50, 50);
+        ctx.clip();
+        ctx.fillStyle = "#ff0000";
+        ctx.fillRect(0, 0, 120, 120);
+        ctx.restore();
+        console.log("clip-in=" + px(25, 25));
+        console.log("clip-out=" + px(75, 25));
+        // restore() brings the unclipped region back.
+        ctx.fillStyle = "#00ff00";
+        ctx.fillRect(75, 75, 20, 20);
+        console.log("after-restore=" + px(80, 80));
+
+        // A Path2D clip.
+        const path: any = new Path2D();
+        path.rect(60, 0, 20, 20);
+        ctx.save();
+        ctx.clip(path);
+        ctx.fillStyle = "#0000ff";
+        ctx.fillRect(60, 0, 20, 20);
+        ctx.restore();
+        console.log("path-clip=" + px(65, 5));
+
+        // destination-out clears the covered pixels to transparent.
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.fillStyle = "#000000";
+        ctx.fillRect(0, 0, 20, 20);
+        console.log("composite=" + ctx.globalCompositeOperation);
+        console.log("dest-out=" + px(10, 10));
+        ctx.globalCompositeOperation = "source-over";
+
+        // isPointInPath / isPointInStroke use the current path and transform.
+        ctx.beginPath();
+        ctx.rect(10, 10, 20, 20);
+        console.log("point-in=" + ctx.isPointInPath(15, 15));
+        console.log("point-out=" + ctx.isPointInPath(50, 50));
+        ctx.lineWidth = 6;
+        ctx.beginPath();
+        ctx.moveTo(80, 80);
+        ctx.lineTo(110, 80);
+        console.log("stroke-in=" + ctx.isPointInStroke(95, 81));
+        console.log("stroke-out=" + ctx.isPointInStroke(95, 95));
+        win.close();
+      });
+      win.loadHTML(\`${PAGE}\`);
+      run();
+      `);
+        expect(value("clip-in")).toBe("255,0,0,255");
+        expect(value("clip-out")).toBe("255,255,255,255");
+        expect(value("after-restore")).toBe("0,255,0,255");
+        expect(value("path-clip")).toBe("0,0,255,255");
+        expect(value("composite")).toBe("destination-out");
+        // destination-out on an opaque white pixel leaves transparent black.
+        expect(value("dest-out")).toBe("0,0,0,0");
+        expect(value("point-in")).toBe("true");
+        expect(value("point-out")).toBe("false");
+        expect(value("stroke-in")).toBe("true");
+        expect(value("stroke-out")).toBe("false");
+    });
+    it("paints offset shadows under the shape", () => {
+        const { value } = harness.compileAndRun("canvas-shadow", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "shadow", width: 400, height: 300 });
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const ctx: any = canvas.getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+
+        ctx.shadowColor = "#000000";
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetX = 10;
+        ctx.shadowOffsetY = 10;
+        ctx.fillStyle = "#ff0000";
+        ctx.fillRect(10, 10, 20, 20);
+        console.log("color=" + ctx.shadowColor);
+        console.log("offsets=" + ctx.shadowOffsetX + "," + ctx.shadowOffsetY);
+        console.log("shape=" + px(20, 20));
+        console.log("shadow=" + px(35, 35));
+        console.log("outside=" + px(5, 5));
+
+        // The shadow is not part of clearRect, and a transparent shadow
+        // colour disables it again.
+        ctx.shadowColor = "rgba(0,0,0,0)";
+        ctx.fillStyle = "#0000ff";
+        ctx.fillRect(60, 10, 10, 10);
+        console.log("no-shadow=" + px(75, 15));
+        win.close();
+      });
+      win.loadHTML(\`${PAGE}\`);
+      run();
+      `);
+        expect(value("color")).toBe("#000000");
+        expect(value("offsets")).toBe("10,10");
+        expect(value("shape")).toBe("255,0,0,255");
+        expect(value("shadow")).toBe("0,0,0,255");
+        expect(value("outside")).toBe("0,0,0,0");
+        expect(value("no-shadow")).toBe("0,0,0,0");
+    });
+    it("honours image smoothing and the inner radial circle", () => {
+        const { value } = harness.compileAndRun("canvas-smoothing-radial", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "smoothing", width: 400, height: 300 });
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const ctx: any = canvas.getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+
+        // A 2x2 source (red left, blue right), blown up to 40x40.
+        const source: any = new OffscreenCanvas(2, 2);
+        const sctx: any = source.getContext("2d");
+        sctx.putImageData({ width: 2, height: 2, data: [
+          255, 0, 0, 255, 0, 0, 255, 255,
+          255, 0, 0, 255, 0, 0, 255, 255] }, 0, 0);
+
+        console.log("smoothing-default=" + ctx.imageSmoothingEnabled);
+        ctx.drawImage(source, 0, 0, 40, 40);
+        console.log("smooth=" + px(20, 20));
+        ctx.clearRect(0, 0, 120, 120);
+        ctx.imageSmoothingEnabled = false;
+        console.log("smoothing-off=" + ctx.imageSmoothingEnabled);
+        ctx.drawImage(source, 0, 0, 40, 40);
+        console.log("blocky=" + px(20, 20));
+        ctx.imageSmoothingQuality = "high";
+        console.log("quality=" + ctx.imageSmoothingQuality);
+
+        // A radial gradient whose inner circle is off-centre: the point at the
+        // inner centre is white, the outer circle black. (A concentric
+        // implementation would make both black.)
+        const radial = ctx.createRadialGradient(20, 50, 0, 50, 50, 30);
+        radial.addColorStop(0, "#ffffff");
+        radial.addColorStop(1, "#000000");
+        ctx.fillStyle = radial;
+        ctx.fillRect(0, 30, 100, 40);
+        console.log("radial-inner=" + px(20, 50));
+        console.log("radial-outer=" + px(80, 50));
+        win.close();
+      });
+      win.loadHTML(\`${PAGE}\`);
+      run();
+      `);
+        expect(value("smoothing-default")).toBe("true");
+        // Bilinear samples between the red and blue texels.
+        const smooth = value("smooth").split(",").map(Number);
+        expect(smooth[0]).toBeGreaterThan(20);
+        expect(smooth[2]).toBeGreaterThan(20);
+        expect(value("smoothing-off")).toBe("false");
+        expect(value("blocky")).toBe("0,0,255,255");
+        expect(value("quality")).toBe("high");
+        const radialInner = value("radial-inner").split(",").map(Number);
+        expect(radialInner[0]).toBeGreaterThan(245);
+        expect(value("radial-outer")).toBe("0,0,0,255");
+    });
+    it("supports OffscreenCanvas and transferControlToOffscreen", () => {
+        const { value } = harness.compileAndRun("canvas-offscreen", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "offscreen", width: 400, height: 300 });
+      win.on("ready", () => {
+        const canvas: any = document.getElementById("c");
+        const ctx: any = canvas.getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+
+        const off: any = new OffscreenCanvas(20, 10);
+        console.log("size=" + off.width + "x" + off.height);
+        console.log("instanceof=" + (off instanceof OffscreenCanvas));
+        const octx: any = off.getContext("2d");
+        console.log("ctx=" + (octx != null) + "," + (off.getContext("2d") === octx) + "," +
+          (octx.canvas === off));
+        octx.fillStyle = "#00ff00";
+        octx.fillRect(0, 0, 20, 10);
+        ctx.drawImage(off, 0, 0);
+        console.log("drawn=" + px(10, 5));
+
+        const bitmap: any = off.transferToImageBitmap();
+        console.log("bitmap=" + bitmap.width + "x" + bitmap.height);
+
+        // alpha:false starts as opaque black, like a DOM canvas.
+        const opaque: any = new OffscreenCanvas(4, 4);
+        const opaqueCtx: any = opaque.getContext("2d", { alpha: false });
+        const opaquePixel = opaqueCtx.getImageData(0, 0, 1, 1).data;
+        console.log("opaque=" + opaqueCtx.getContextAttributes().alpha + "," +
+          opaquePixel[0] + "," + opaquePixel[1] + "," + opaquePixel[2] + "," + opaquePixel[3]);
+
+        // Transfer a live element: the element loses its context, the returned
+        // OffscreenCanvas keeps drawing into the same bitmap.
+        const element: any = document.getElementById("transferred");
+        const transferred: any = element.transferControlToOffscreen();
+        console.log("transferred=" + (transferred != null));
+        console.log("element-ctx=" + (element.getContext("2d") == null));
+        const tctx: any = transferred.getContext("2d");
+        tctx.fillStyle = "#ff00ff";
+        tctx.fillRect(0, 0, 20, 20);
+        ctx.drawImage(transferred, 50, 50);
+        console.log("transfer-draw=" + px(60, 60));
+
+        // convertToBlob resolves to a PNG blob.
+        off.convertToBlob().then((blob: any): void => {
+          console.log("blob=" + blob.type + "," + (blob.size > 0));
+          win.close();
+        });
+      });
+      win.loadHTML(\`${PAGE}\`);
+      run();
+      `, { autocloseMs: 2000 });
+        expect(value("size")).toBe("20x10");
+        expect(value("instanceof")).toBe("true");
+        expect(value("ctx")).toBe("true,true,true");
+        expect(value("drawn")).toBe("0,255,0,255");
+        expect(value("bitmap")).toBe("20x10");
+        expect(value("opaque")).toBe("false,0,0,0,255");
+        expect(value("transferred")).toBe("true");
+        expect(value("element-ctx")).toBe("true");
+        expect(value("transfer-draw")).toBe("255,0,255,255");
+        expect(value("blob")).toBe("image/png,true");
+    });
+    it("paints a canvas data URL as a CSS background-image", () => {
+        const { value } = harness.compileAndRun("canvas-background-image", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "bg", width: 400, height: 300 });
+      win.on("ready", () => {
+        const source: any = document.getElementById("src");
+        const sctx: any = source.getContext("2d");
+        sctx.fillStyle = "#ff00ff";
+        sctx.fillRect(0, 0, 20, 20);
+        const url: string = source.toDataURL();
+        const bg: any = document.getElementById("bg");
+        bg.style.backgroundImage = "url(" + url + ")";
+        const list: string = win.paintList();
+        console.log("has-image=" + (list.indexOf("src=data:image/png;base64,") >= 0));
+        const computed: string = getComputedStyle(bg).backgroundImage;
+        console.log("inline=" + (bg.style.backgroundImage.indexOf("url(") === 0));
+        console.log("computed-width=" + getComputedStyle(bg).width);
+        console.log("computed-head=" + computed.substring(0, 24));
+        console.log("computed=" + (computed.indexOf("url(data:image/png") === 0));
+        win.close();
+      });
+      win.loadHTML(\`${PAGE}\`);
+      run();
+      `);
+        expect(value("has-image")).toBe("true");
+        expect(value("inline")).toBe("true");
+        expect(value("computed-width")).toBe("40px");
+        expect(value("computed")).toBe("true");
+    });
+});
+//# sourceMappingURL=gui-canvas-state.test.js.map

package/dist/tests/e2e/gui-canvas-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-canvas-state.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-canvas-state.test.ts"],"names":[],"mappings":"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"}

package/dist/tests/e2e/gui-data-url.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * End-to-end tests for `data:` image URLs: raster and SVG, base64 and
+ * percent-encoded payloads, in `<img>`, `canvas.drawImage(String, …)` and CSS
+ * `background-image`.
+ *
+ * The SVG below deliberately exercises the decoder, not NanoSVG's feature set:
+ * the engine rasterises NanoSVG's subset, so an SVG that uses filters still
+ * decodes but renders the shapes without the filter effect.
+ */
+export {};

package/dist/tests/e2e/gui-data-url.test.js

@@ -0,0 +1,127 @@
+/**
+ * End-to-end tests for `data:` image URLs: raster and SVG, base64 and
+ * percent-encoded payloads, in `<img>`, `canvas.drawImage(String, …)` and CSS
+ * `background-image`.
+ *
+ * The SVG below deliberately exercises the decoder, not NanoSVG's feature set:
+ * the engine rasterises NanoSVG's subset, so an SVG that uses filters still
+ * decodes but renders the shapes without the filter effect.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+/* 4x4 PNG: left half red, right half blue. */
+const PNG = "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR42mP4z8DwH4Sh1H8G0gUALFAf4eNWqTEAAAAASUVORK5CYII=";
+const SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="8" height="6"><rect width="8" height="6" fill="#ff0000"/></svg>';
+const SVG_B64 = Buffer.from(SVG).toString("base64");
+const SVG_ENC = encodeURIComponent(SVG);
+/** The `feTurbulence` example from the request: `<filter>` is not in NanoSVG's
+ * subset, but the document still decodes (the rect renders, unfiltered). */
+const NOISE = "data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E";
+const PAGE = `
+<html><head><style>body { margin: 0; }</style></head><body>
+<img id="vec" src="data:image/svg+xml,${SVG_ENC}">
+<img id="vec64" src="data:image/svg+xml;base64,${SVG_B64}">
+<img id="noise" src="${NOISE}">
+<div id="bg" style="width:20px;height:20px"></div>
+<canvas id="c" width="240" height="240"></canvas>
+</body></html>`;
+describe.skipIf(!guiAvailable)("gui extension — data URL images", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("decodes SVG data URLs in <img>, drawImage and CSS backgrounds", () => {
+        const { value, stderr } = harness.compileAndRun("data-url-svg", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "data-url", width: 500, height: 400 });
+      win.on("ready", () => {
+        const doc: any = document;
+        const ctx: any = doc.getElementById("c").getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+        const clear = (): void => { ctx.clearRect(0, 0, 240, 240); };
+        const box = (id: string): string => {
+          const r: any = doc.getElementById(id).getBoundingClientRect();
+          return r.width + "x" + r.height;
+        };
+
+        const png = "data:image/png;base64,${PNG}";
+        const svgEnc = "data:image/svg+xml,${SVG_ENC}";
+        const svg64 = "data:image/svg+xml;base64,${SVG_B64}";
+        const noise = "${NOISE}";
+
+        console.log("vec-box=" + box("vec"));
+        console.log("vec64-box=" + box("vec64"));
+        console.log("noise-box=" + box("noise"));
+
+        // A raster data URL drawn from its string, without an <img>.
+        clear();
+        ctx.drawImage(png, 0, 0);
+        console.log("png-string=" + px(0, 0) + ":" + px(3, 0));
+
+        // SVG data URLs in both encodings, as a string and as an <img>.
+        clear();
+        ctx.drawImage(svgEnc, 0, 0);
+        console.log("svg-enc-string=" + px(0, 0) + ":" + px(7, 5));
+
+        clear();
+        ctx.drawImage(svg64, 0, 0);
+        console.log("svg64-string=" + px(0, 0));
+
+        clear();
+        ctx.drawImage(svgEnc, 0, 0, 16, 12);
+        console.log("svg-scaled=" + px(0, 0) + ":" + px(15, 11));
+
+        clear();
+        ctx.drawImage(doc.getElementById("vec"), 0, 0);
+        console.log("svg-img=" + px(0, 0));
+
+        clear();
+        ctx.drawImage(doc.getElementById("vec64"), 0, 0);
+        console.log("svg64-img=" + px(0, 0));
+
+        // The request's feTurbulence document: it decodes (opaque rect), while
+        // the filter itself remains outside NanoSVG's subset.
+        clear();
+        ctx.drawImage(noise, 0, 0, 32, 32);
+        console.log("noise-alpha=" + ctx.getImageData(0, 0, 1, 1).data[3]);
+
+        // SVG data URL as a CSS background.
+        const bg: any = doc.getElementById("bg");
+        bg.style.backgroundImage = 'url("' + svgEnc + '")';
+        console.log("bg-css=" + getComputedStyle(bg).backgroundImage.substring(0, 26));
+        let hits = 0;
+        for (const line of win.paintList().split("\\n")) {
+          if (line.indexOf("src=data:image/svg+xml") >= 0) hits++;
+        }
+        console.log("paint-svg=" + hits);
+
+        // Let one rendered frame decode the background texture (stderr reports
+        // a failure), then close.
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            win.close();
+          });
+        });
+      });
+      win.loadHTML(\`${PAGE}\`);
+      run();
+      `, { autocloseMs: 3000 });
+        expect(value("vec-box")).toBe("8x6");
+        expect(value("vec64-box")).toBe("8x6");
+        expect(value("noise-box")).toBe("180x180");
+        expect(value("png-string")).toBe("255,0,0,255:0,0,255,255");
+        expect(value("svg-enc-string")).toBe("255,0,0,255:255,0,0,255");
+        expect(value("svg64-string")).toBe("255,0,0,255");
+        expect(value("svg-scaled")).toBe("255,0,0,255:255,0,0,255");
+        expect(value("svg-img")).toBe("255,0,0,255");
+        expect(value("svg64-img")).toBe("255,0,0,255");
+        expect(Number(value("noise-alpha"))).toBeGreaterThan(0);
+        expect(value("bg-css")).toMatch(/^url\(data:image\/svg\+xml/);
+        expect(value("paint-svg")).toBe("4");
+        expect(stderr).not.toContain("could not decode image");
+    });
+});
+//# sourceMappingURL=gui-data-url.test.js.map

package/dist/tests/e2e/gui-data-url.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-data-url.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-data-url.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;AAEnC,8CAA8C;AAC9C,MAAM,GAAG,GACP,0GAA0G,CAAC;AAC7G,MAAM,GAAG,GACP,gHAAgH,CAAC;AACnH,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACpD,MAAM,OAAO,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;AAExC;4EAC4E;AAC5E,MAAM,KAAK,GACT,4SAA4S,CAAC;AAE/S,MAAM,IAAI,GAAG;;wCAE2B,OAAO;iDACE,OAAO;uBACjC,KAAK;;;eAGb,CAAC;AAEhB,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,iCAAiC,EAAE,GAAG,EAAE;IACrE,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAElC,EAAE,CAAC,+DAA+D,EAAE,GAAG,EAAE;QACvE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,cAAc,EACd;;;;;;;;;;;;;;;;;6CAiBuC,GAAG;6CACH,OAAO;mDACD,OAAO;yBACjC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAwDP,IAAI;;OAEpB,EACD,EAAE,WAAW,EAAE,IAAI,EAAE,CACtB,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC5D,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAChE,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAClD,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QAC5D,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/C,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,4BAA4B,CAAC,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACrC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/tests/e2e/gui-draw-perf.test.d.ts

@@ -0,0 +1,22 @@
+/**
+ * End-to-end benchmark for the two immediate-mode drawing surfaces.
+ *
+ * The `gui-perf` suite measures the retained DOM pipeline (restyle/layout/paint
+ * runs). This one measures the two APIs a multi-element scene actually calls
+ * thousands of times per frame:
+ *
+ *   - `<canvas>` 2D: solid `fillRect`, multi-segment `stroke`, repeated
+ *     `fillText` and 1:1 `drawImage`, drawn into a 1280x720 bitmap;
+ *   - WebGL: 2000 `drawElements` calls with a per-draw matrix, plus a 64 KB
+ *     `bufferSubData` into a 4 MB buffer.
+ *
+ * The programs print wall-clock milliseconds per scene (informational: CI may
+ * run on a software GPU) and the engine counters that a regression would move:
+ * `canvasDraws`/`canvasUploads`/`canvasUploadBytes` and
+ * `webglDraws`/`webglPasses`/`webglPipelineMisses`/`webglBufferUploadBytes`
+ * from `win.stats()` (see `runtime/ext_gui/perf.h`).
+ *
+ * The counters are asserted (deterministic). Timings are printed and, on a
+ * developer machine, can be bounded with `XBINTSC_GUI_DRAW_PERF_STRICT_MS`.
+ */
+export {};