xbintsc 0.5.51 → 0.6.8

package/dist/tests/e2e/gui-css-coverage.test.js

@@ -0,0 +1,333 @@
+/**
+ * End-to-end coverage for the CSS surface used by the Inside the Ropes
+ * stylesheets: typography, inline flex/grid, grid-area, aspect-ratio, auto
+ * margins, percentage radii, outlines, vertical text, SVG presentation
+ * properties and sized background tiles. Assertions use layout geometry,
+ * `computedStyle`, `paintList` and the `inlineSvg` diagnostic, so they are
+ * deterministic without reading GPU pixels.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — CSS coverage", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("applies letter-spacing and text-transform to layout and paint", () => {
+        const { value, stdout } = harness.compileAndRun("typography", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #a, #b, #c {
+          position: absolute; top: 0; font-size: 20px; white-space: nowrap;
+        }
+        #a { left: 0; }
+        #b { left: 200px; letter-spacing: 2px; }
+        #c { left: 350px; text-transform: uppercase; }
+      </style></head><body>
+        <div id="a">abc</div><div id="b">abc</div><div id="c">abc</div>
+      </body></html>\`;
+
+      const win = createWindow({ title: "typography", width: 500, height: 120 });
+      win.on("ready", () => {
+        const a = win.getBoundingClientRect("#a");
+        const b = win.getBoundingClientRect("#b");
+        console.log("delta=" + (b.width - a.width).toFixed(1));
+        console.log("spacing=" + win.computedStyle("#b", "letter-spacing"));
+        console.log("transform=" + win.computedStyle("#c", "text-transform"));
+        console.log(win.paintList());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // Three characters, two pixels each, including the trailing one.
+        expect(value("delta")).toBe("6.0");
+        expect(value("spacing")).toBe("2px");
+        expect(value("transform")).toBe("uppercase");
+        expect(stdout).toContain('"ABC"');
+    });
+    it("resolves currentColor and percentage border radii", () => {
+        const { value, stdout } = harness.compileAndRun("colors-radius", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #dot {
+          color: #ff0000;
+          background: currentColor;
+          width: 20px; height: 20px;
+          border-radius: 50%;
+        }
+      </style></head><body><div id="dot"></div></body></html>\`;
+
+      const win = createWindow({ title: "colors", width: 200, height: 120 });
+      win.on("ready", () => {
+        console.log("bg=" + win.computedStyle("#dot", "background-color"));
+        console.log("radius=" + win.computedStyle("#dot", "border-radius"));
+        console.log(win.paintList());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("bg")).toBe("rgb(255, 0, 0)");
+        expect(value("radius")).toBe("50%");
+        expect(stdout).toContain("r=10.0 color=#ff0000ff");
+    });
+    it("lays out inline-flex and inline-grid boxes atomically", () => {
+        const { value } = harness.compileAndRun("inline-containers", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #row { display: inline-flex; gap: 10px; }
+        #row i { display: block; width: 20px; height: 20px; background: #222; }
+        #key {
+          display: inline-grid; place-items: center;
+          width: 17px; height: 17px; vertical-align: -3px;
+          background: #333;
+        }
+      </style></head><body>
+        <div id="line"><span id="row"><i></i><i></i></span><span id="key">W</span></div>
+      </body></html>\`;
+
+      const win = createWindow({ title: "inline", width: 400, height: 120 });
+      win.on("ready", () => {
+        const row = win.getBoundingClientRect("#row");
+        const key = win.getBoundingClientRect("#key");
+        console.log("row=" + row.width.toFixed(1) + "x" + row.height.toFixed(1));
+        console.log("key=" + key.width.toFixed(1) + "x" + key.height.toFixed(1));
+        console.log("flex=" + win.computedStyle("#row", "display"));
+        console.log("grid=" + win.computedStyle("#key", "display"));
+        console.log("align=" + win.computedStyle("#key", "vertical-align"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("row")).toBe("50.0x20.0");
+        expect(value("key")).toBe("17.0x17.0");
+        expect(value("flex")).toBe("inline-flex");
+        expect(value("grid")).toBe("inline-grid");
+        expect(value("align")).toBe("-3px");
+    });
+    it("places grid-area items and derives height from aspect-ratio", () => {
+        const { value } = harness.compileAndRun("grid-aspect", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #grid {
+          display: grid;
+          grid-template-columns: repeat(3, 30px);
+          grid-template-rows: repeat(3, 30px);
+        }
+        #cell { grid-area: 2 / 3; background: #444; }
+        #ratio { width: 300px; aspect-ratio: 3 / 4; background: #555; }
+      </style></head><body>
+        <div id="grid"><div id="cell"></div></div>
+        <div id="ratio"></div>
+      </body></html>\`;
+
+      const win = createWindow({ title: "grid", width: 500, height: 500 });
+      win.on("ready", () => {
+        const cell = win.getBoundingClientRect("#cell");
+        const ratio = win.getBoundingClientRect("#ratio");
+        console.log("cell=" + cell.x.toFixed(1) + "," + cell.y.toFixed(1));
+        console.log("ratio=" + ratio.width.toFixed(1) + "x" + ratio.height.toFixed(1));
+        console.log("area=" + win.computedStyle("#cell", "grid-area"));
+        console.log("ar=" + win.computedStyle("#ratio", "aspect-ratio"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("cell")).toBe("60.0,30.0");
+        expect(value("ratio")).toBe("300.0x400.0");
+        expect(value("area")).toBe("2 / 3 / 0 / 0");
+        expect(value("ar")).toBe("0.75");
+    });
+    it("paints focus-visible outlines and applies :active transforms", () => {
+        const { value, stdout } = harness.compileAndRun("outline-active", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #btn {
+          position: absolute; left: 10px; top: 10px;
+          width: 60px; height: 30px;
+          background: #111;
+          border: 0;
+          outline: 2px solid #ff0000;
+          outline-offset: 3px;
+        }
+        #btn:focus-visible { outline-color: #00ff00; }
+        #btn:active { transform: translateY(5px); }
+      </style></head><body><button id="btn">go</button></body></html>\`;
+
+      const win = createWindow({ title: "outline", width: 200, height: 120 });
+      win.on("ready", () => {
+        const doc = win.document;
+        const btn: any = doc.querySelector("#btn");
+        btn.focus();
+        console.log("color=" + win.computedStyle("#btn", "outline-color"));
+        console.log("width=" + win.computedStyle("#btn", "outline-width"));
+        console.log("offset=" + win.computedStyle("#btn", "outline-offset"));
+        console.log(win.paintList());
+        win.sendEvent("mousedown", { x: 20, y: 20, button: 0 });
+        console.log("active=" + win.computedStyle("#btn", "transform"));
+        win.sendEvent("mouseup", { x: 20, y: 20, button: 0 });
+        console.log("released=" + win.computedStyle("#btn", "transform"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("color")).toBe("rgb(0, 255, 0)");
+        expect(value("width")).toBe("2px");
+        expect(value("offset")).toBe("3px");
+        expect(stdout).toContain("rect x=7.0 y=7.0 w=66.0 h=2.0");
+        expect(value("active")).toContain("translateY(5px)");
+        expect(value("released")).toBe("none");
+    });
+    it("lays vertical writing mode text out in a column and rotates it", () => {
+        const { value, stdout } = harness.compileAndRun("vertical", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #v {
+          position: absolute; left: 200px; top: 0;
+          writing-mode: vertical-rl;
+          font-size: 10px;
+        }
+      </style></head><body><div id="v">ABCD</div></body></html>\`;
+
+      const win = createWindow({ title: "vertical", width: 400, height: 200 });
+      win.on("ready", () => {
+        const v = win.getBoundingClientRect("#v");
+        console.log("rect=" + v.width.toFixed(1) + "," + v.height.toFixed(1));
+        console.log("mode=" + win.computedStyle("#v", "writing-mode"));
+        console.log(win.paintList());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const size = value("rect").split(",");
+        const width = Number(size[0] ?? 0);
+        const height = Number(size[1] ?? 0);
+        expect(width).toBeLessThan(20);
+        expect(height).toBeGreaterThan(width);
+        expect(value("mode")).toBe("vertical-rl");
+        expect(stdout).toContain(",1,-1,");
+    });
+    it("injects document CSS into the serialized inline SVG", () => {
+        const { value } = harness.compileAndRun("svg-css", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        .ring { fill: none; stroke: #ff0000; stroke-width: 2; }
+        .glow { fill: #00ff00; stroke: rgba(0, 0, 255, 0.5); }
+      </style></head><body>
+        <svg id="icon" viewBox="0 0 20 20">
+          <circle class="ring" cx="10" cy="10" r="8"></circle>
+          <rect class="glow" x="1" y="1" width="4" height="4"></rect>
+        </svg>
+      </body></html>\`;
+
+      const win = createWindow({ title: "svg", width: 120, height: 120 });
+      win.on("ready", () => {
+        const info: any = win.inlineSvg("#icon");
+        console.log("shapes=" + info.shapes);
+        console.log("ring=" + (info.markup.indexOf("style=\\"fill:none;stroke:#ff0000;stroke-width:2\\"") >= 0));
+        console.log("glow=" + (info.markup.indexOf("fill:#00ff00") >= 0));
+        console.log("opacity=" + (info.markup.indexOf("stroke-opacity:0.500") >= 0));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("shapes")).toBe("2");
+        expect(value("ring")).toBe("true");
+        expect(value("glow")).toBe("true");
+        expect(value("opacity")).toBe("true");
+    });
+    it("tiles an image background at background-size", () => {
+        const image = harness.imageSrc(harness.logoPath);
+        const { stdout } = harness.compileAndRun("background-size", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #bg { width: 250px; height: 120px; background-image: url("${image}"); background-size: 100px 100px; }
+      </style></head><body><div id="bg"></div></body></html>\`;
+
+      const win = createWindow({ title: "tiles", width: 500, height: 300 });
+      win.on("ready", () => {
+        console.log(win.paintList());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const tiles = stdout.split("\n").filter((line) => line.includes("w=100.0 h=100.0"));
+        expect(tiles.length).toBe(6);
+        expect(stdout).toContain("image x=0.0 y=0.0 w=100.0 h=100.0");
+    });
+    it("distributes auto margins, inherits fonts and copies clip-path", () => {
+        const { value } = harness.compileAndRun("auto-margins", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; font-size: 30px; }
+        button { font: inherit; }
+        #center { width: 100px; height: 10px; margin: 0 auto; background: #666; }
+        #flex { display: flex; width: 300px; height: 10px; }
+        #hint { width: 20px; height: 10px; margin-left: auto; background: #777; }
+        #outer {
+          width: 100px; height: 100px;
+          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+        }
+        #outer::before { content: ""; clip-path: inherit; }
+      </style></head><body>
+        <div id="center"></div>
+        <div id="flex"><div id="hint"></div></div>
+        <div id="outer"></div>
+        <button id="b">x</button>
+      </body></html>\`;
+
+      const win = createWindow({ title: "margins", width: 400, height: 300 });
+      win.on("ready", () => {
+        const center = win.getBoundingClientRect("#center");
+        const hint = win.getBoundingClientRect("#hint");
+        console.log("center=" + center.x.toFixed(1));
+        console.log("hint=" + hint.x.toFixed(1));
+        console.log("font=" + win.computedStyle("#b", "font-size"));
+        const outer: any = win.document.querySelector("#outer");
+        const inherited: any = getComputedStyle(outer, "::before").getPropertyValue("clip-path");
+        const own: any = getComputedStyle(outer).getPropertyValue("clip-path");
+        console.log("clip=" + (inherited === own) + ":" + own);
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("center")).toBe("150.0");
+        expect(value("hint")).toBe("280.0");
+        expect(value("font")).toBe("30px");
+        expect(value("clip")).toContain("true:polygon(");
+    });
+});
+//# sourceMappingURL=gui-css-coverage.test.js.map

package/dist/tests/e2e/gui-css-coverage.test.js.map

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

package/dist/tests/e2e/gui-css-features.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * End-to-end tests for the CSS features that need more than a value parser:
+ * `calc()`, `box-shadow`, Gaussian `text-shadow`, `backdrop-filter`, CSS
+ * transitions (arbitrary properties + cubic-bezier/steps) and `@keyframes`.
+ */
+export {};

package/dist/tests/e2e/gui-css-features.test.js

@@ -0,0 +1,270 @@
+/**
+ * End-to-end tests for the CSS features that need more than a value parser:
+ * `calc()`, `box-shadow`, Gaussian `text-shadow`, `backdrop-filter`, CSS
+ * transitions (arbitrary properties + cubic-bezier/steps) and `@keyframes`.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — CSS features", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("evaluates calc() arithmetic in every length property", () => {
+        const { value } = harness.compileAndRun("calc", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #a {
+          position: absolute;
+          box-sizing: border-box;
+          font-size: calc(8px + 2px);
+          left: calc(10px + 5%);
+          top: calc(1em + 4px);
+          width: calc(100px + 2 * 10px);
+          height: calc(50px - 5px);
+          padding-left: calc(1em * 2 - 4px);
+          background: #ff0000;
+        }
+        #b { width: min(calc(100px + 10px), 200px); height: clamp(10px, calc(2 * 5px), 40px); }
+      </style></head><body><div id="a"></div><div id="b"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "calc", width: 400, height: 300 });
+      win.on("ready", () => {
+        const a = win.getBoundingClientRect("#a");
+        console.log("a=" + a.x.toFixed(1) + "," + a.y.toFixed(1) + "," +
+                    a.width.toFixed(1) + "," + a.height.toFixed(1));
+        console.log("font=" + win.computedStyle("#a", "font-size"));
+        console.log("width=" + win.computedStyle("#a", "width"));
+        const b = win.getBoundingClientRect("#b");
+        console.log("b=" + b.width.toFixed(1) + "," + b.height.toFixed(1));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // 5% of the 400px viewport is 20px; 1em is the calc'd 10px font size.
+        expect(value("a")).toBe("30.0,14.0,120.0,45.0");
+        expect(value("font")).toBe("10px");
+        expect(value("width")).toBe("calc(100px + 2 * 10px)");
+        expect(value("b")).toBe("110.0,10.0");
+    });
+    it("paints box-shadow and blurred text-shadow as Gaussian masks", () => {
+        const { value, stdout } = harness.compileAndRun("shadows", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box {
+          width: 100px; height: 50px; background: #336699;
+          box-shadow: 4px 6px 12px 2px rgba(0, 0, 0, 0.5), inset 0 0 8px #ff0000;
+        }
+        #text { font-size: 20px; color: #ffffff; text-shadow: 2px 3px 6px #00ff00; }
+      </style></head><body><div id="box"></div><div id="text">Hi</div></body></html>
+      \`;
+
+      const win = createWindow({ title: "shadows", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("box=" + win.computedStyle("#box", "box-shadow"));
+        console.log("text=" + win.computedStyle("#text", "text-shadow"));
+        console.log("list-start");
+        console.log(win.paintList());
+        console.log("list-end");
+        let frames = 0;
+        const tick = (): void => {
+          frames += 1;
+          if (frames < 2) win.requestAnimationFrame(tick);
+          else win.close();
+        };
+        win.requestAnimationFrame(tick);
+      });
+      win.loadHTML(HTML);
+      run();
+      `, { autocloseMs: 10_000 });
+        const list = stdout.slice(stdout.indexOf("list-start"), stdout.indexOf("list-end"));
+        expect(value("box")).toContain("inset 0px 0px 8px");
+        expect(value("box")).toContain("4px 6px 12px 2px");
+        expect(value("text")).toBe("2px 3px 6px rgb(0, 255, 0)");
+        // A nonzero blur is one pre-blurred texture, not a stack of offset copies.
+        expect(list).toContain("bitmap=bs:o:");
+        expect(list).toContain("bitmap=bs:i:");
+        expect(list).toContain("bitmap=ts:");
+    });
+    it("runs @keyframes with direction, timing and fill modes", () => {
+        const { value } = harness.compileAndRun("keyframes", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        @keyframes fade {
+          from { opacity: 0; transform: translateX(0px); }
+          50% { opacity: 1; }
+          to { opacity: 0; transform: translateX(100px); }
+        }
+        #k { width: 20px; height: 20px; background: #000000;
+             animation: fade 1000ms linear forwards; }
+      </style></head><body><div id="k"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "keyframes", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("t0=" + win.computedStyle("#k", "opacity"));
+        win.advance(250);
+        console.log("t25=" + win.computedStyle("#k", "opacity"));
+        console.log("x25=" + win.computedStyle("#k", "transform"));
+        win.advance(250);
+        console.log("t50=" + win.computedStyle("#k", "opacity"));
+        win.advance(250);
+        console.log("t75=" + win.computedStyle("#k", "opacity"));
+        console.log("x75=" + win.computedStyle("#k", "transform"));
+        win.advance(250);
+        console.log("t100=" + win.computedStyle("#k", "opacity"));
+        win.advance(1000);
+        console.log("held=" + win.computedStyle("#k", "opacity"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("t0")).toBe("0");
+        expect(value("t25")).toBe("0.5");
+        expect(value("x25")).toBe("translateX(25px)");
+        expect(value("t50")).toBe("1");
+        expect(value("t75")).toBe("0.5");
+        expect(value("x75")).toBe("translateX(75px)");
+        expect(value("t100")).toBe("0");
+        // `forwards` holds the final keyframe instead of snapping back.
+        expect(value("held")).toBe("0");
+    });
+    it("honours animation delay, backwards fill and alternate direction", () => {
+        const { value } = harness.compileAndRun("keyframes-delay", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
+        #d { animation: fade 1000ms linear 500ms backwards; }
+        #e { animation: fade 1000ms linear infinite alternate; }
+      </style></head><body><div id="d"></div><div id="e"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "keyframes-delay", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("d0=" + win.computedStyle("#d", "opacity"));
+        console.log("e0=" + win.computedStyle("#e", "opacity"));
+        win.advance(500);
+        console.log("d500=" + win.computedStyle("#d", "opacity"));
+        win.advance(500);
+        console.log("d1000=" + win.computedStyle("#d", "opacity"));
+        console.log("e1000=" + win.computedStyle("#e", "opacity"));
+        win.advance(500);
+        console.log("e1500=" + win.computedStyle("#e", "opacity"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // `backwards` shows the first keyframe throughout the delay.
+        expect(value("d0")).toBe("0");
+        expect(value("d500")).toBe("0");
+        expect(value("d1000")).toBe("0.5");
+        // `alternate` starts the second iteration at the first one's end value
+        // and then runs it backwards.
+        expect(value("e0")).toBe("0");
+        expect(value("e1000")).toBe("1");
+        expect(value("e1500")).toBe("0.5");
+    });
+    it("interpolates transitions with arbitrary properties, cubic-bezier and steps", () => {
+        const { value } = harness.compileAndRun("transition-easing", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #t {
+          width: 100px; height: 20px; opacity: 1;
+          background: #000000;
+          transition: width 1000ms steps(4, end),
+                      opacity 1000ms cubic-bezier(0.5, 0, 0.5, 1);
+        }
+        #t:hover { width: 200px; opacity: 0.2; }
+      </style></head><body><div id="t"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "transition-easing", width: 400, height: 300 });
+      win.on("ready", () => {
+        win.sendEvent("mousemove", { x: 50, y: 10 });
+        console.log("start=" + win.getBoundingClientRect("#t").width.toFixed(1));
+        win.advance(200);
+        console.log("w20=" + win.getBoundingClientRect("#t").width.toFixed(1));
+        win.advance(300);
+        console.log("w50=" + win.getBoundingClientRect("#t").width.toFixed(1));
+        console.log("o50=" + win.computedStyle("#t", "opacity"));
+        win.advance(300);
+        console.log("w80=" + win.getBoundingClientRect("#t").width.toFixed(1));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // steps(4, end) holds 100px until 250ms, then jumps by 25px.
+        expect(value("start")).toBe("100.0");
+        expect(value("w20")).toBe("100.0");
+        expect(value("w50")).toBe("150.0");
+        // cubic-bezier(0.5, 0, 0.5, 1) is symmetric: 50% progress -> 0.6 opacity.
+        expect(value("o50")).toBe("0.6");
+        expect(value("w80")).toBe("175.0");
+    });
+    it("composites backdrop-filter from an offscreen snapshot of the scene", () => {
+        const { value, stdout, stderr } = harness.compileAndRun("backdrop", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #scene { width: 200px; height: 100px; background: #3366cc; }
+        #glass {
+          position: absolute; left: 20px; top: 20px; width: 80px; height: 40px;
+          border-radius: 8px;
+          backdrop-filter: blur(4px) brightness(0.5);
+          background: rgba(255, 255, 255, 0.2);
+        }
+      </style></head><body>
+        <div id="scene"><div id="glass"></div></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "backdrop", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("filter=" + win.computedStyle("#glass", "backdrop-filter"));
+        console.log("list-start");
+        console.log(win.paintList());
+        console.log("list-end");
+        /* Keep the loop alive for a couple of frames: the compositor compiles
+         * its shaders on the first draw, which is what exercises the backdrop
+         * pass (the assertions read its stderr). */
+        let frames = 0;
+        const tick = (): void => {
+          frames += 1;
+          if (frames < 3) win.requestAnimationFrame(tick);
+          else win.close();
+        };
+        win.requestAnimationFrame(tick);
+      });
+      win.loadHTML(HTML);
+      run();
+      `, { features: ["gpu"], autocloseMs: 10_000 });
+        const list = stdout.slice(stdout.indexOf("list-start"), stdout.indexOf("list-end"));
+        expect(value("filter")).toBe("blur(4px) brightness(0.5)");
+        expect(list).toContain("backdrop x=20.0 y=20.0 w=80.0 h=40.0 r=8.0 blur=4.0");
+        // The runtime shader must have compiled; a failure would only log.
+        expect(stderr).not.toContain("backdrop-filter shader unavailable");
+        expect(stderr).not.toContain("backdrop-filter pipeline creation failed");
+    });
+});
+//# sourceMappingURL=gui-css-features.test.js.map

package/dist/tests/e2e/gui-css-features.test.js.map

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