@next2d/builder 0.1.7 → 0.1.8

package/templates/xbox/js/selftest.js

@@ -15,7 +15,7 @@
  */
 (function () {
 
-    const results = { pass: 0, fail: 0, skip: 0 };
+    const results = { "pass": 0, "fail": 0, "skip": 0 };
     const failures = [];
 
     function tap(status, name, detail) {
@@ -27,16 +27,16 @@
         console.log("[selftest] " + line);
     }
 
-    function pass(name) { results.pass++; tap("ok", name); }
+    function pass(name) { results.pass++; tap("ok", name) }
     function fail(name, e) {
         results.fail++;
         const msg = e && e.message ? e.message : String(e);
         failures.push(name + ": " + msg);
         tap("fail", name, msg);
     }
-    function skip(name, why) { results.skip++; tap("skip", name, why); }
+    function skip(name, why) { results.skip++; tap("skip", name, why) }
 
-    function assert(cond, msg) { if (!cond) throw new Error(msg || "assertion failed"); }
+    function assert(cond, msg) { if (!cond) { throw new Error(msg || "assertion failed") } }
 
     function withTimeout(promise, ms, what) {
         return Promise.race([
@@ -109,18 +109,18 @@
             const order = [];
             await new Promise((resolve) => {
                 setTimeout(() => order.push("t10"), 10);
-                setTimeout(() => { order.push("t30"); resolve(); }, 30);
+                setTimeout(() => { order.push("t30"); resolve() }, 30);
                 Promise.resolve().then(() => order.push("micro"));
                 order.push("sync");
             });
             assert(order[0] === "sync" && order[1] === "micro",
-                   "microtask order: " + order.join(","));
+                "microtask order: " + order.join(","));
             assert(order.indexOf("t10") < order.indexOf("t30"), "timer order");
 
             let ticks = 0;
             await new Promise((resolve) => {
                 const id = setInterval(() => {
-                    if (++ticks >= 2) { clearInterval(id); resolve(); }
+                    if (++ticks >= 2) { clearInterval(id); resolve() }
                 }, 5);
             });
             assert(ticks === 2, "interval stopped after clearInterval");
@@ -135,22 +135,101 @@
 
         await test("EventTarget: addEventListener / dispatchEvent", () => {
             let got = null;
-            const handler = (e) => { got = e; };
+            const handler = (e) => { got = e };
             window.addEventListener("selftest-event", handler);
-            window.dispatchEvent({ type: "selftest-event", value: 42 });
+            window.dispatchEvent({ "type": "selftest-event", "value": 42 });
             assert(got && got.value === 42, "listener called");
             window.removeEventListener("selftest-event", handler);
             got = null;
-            window.dispatchEvent({ type: "selftest-event" });
+            window.dispatchEvent({ "type": "selftest-event" });
             assert(got === null, "listener removed");
         });
 
+        await test("DOM: player boot パス (body/parentElement/getElementById)", () => {
+            // @next2d/player の起動シーケンスが要求する DOM API を検証する
+            const div = document.createElement("div");
+            div.id = "selftest-main";
+            div.tabIndex = -1;
+            document.body.appendChild(div);
+            assert(div.parentElement === document.body, "parentElement === body");
+            assert(div.parentElement.tagName === "BODY", "body.tagName === BODY");
+            div.setAttribute("style", "display:flex;width:640px;height:480px;");
+            assert(div.clientWidth === 640 && div.clientHeight === 480,
+                "clientWidth/Height from style attr");
+            div.innerHTML = "<style></style><div id=\"loading\"></div>";
+            while (div.firstChild) { div.removeChild(div.firstChild) }
+
+            const canvas = document.createElement("canvas");
+            div.appendChild(canvas);
+            assert(div.children[0] === canvas, "children[0] === canvas");
+            assert(canvas.localName === "canvas", "canvas.localName");
+            assert(canvas.parentElement === div, "canvas.parentElement");
+
+            assert(document.getElementById("selftest-main") === div, "getElementById");
+            assert(typeof Event === "function", "Event constructor");
+            let fired = false;
+            div.addEventListener("selftest-dom", () => { fired = true });
+            div.dispatchEvent(new Event("selftest-dom"));
+            assert(fired, "element dispatchEvent");
+            div.remove();
+            assert(document.getElementById("selftest-main") === null, "removed from tree");
+        });
+
+        await test("DOM: history / location (framework gotoView パス)", () => {
+            // framework の gotoView は SPA 設定時に history.pushState を呼ぶ
+            assert(typeof history === "object" && typeof history.pushState === "function",
+                "history.pushState");
+            const beforePath = location.pathname;
+            history.pushState("", "", location.origin + "/selftest-view?q=1");
+            assert(location.pathname === "/selftest-view", "pushState -> location.pathname");
+            assert(location.search === "?q=1", "pushState -> location.search");
+            history.replaceState("", "", beforePath);
+            assert(location.pathname === beforePath, "replaceState で復元");
+            assert(typeof location.origin === "string" && location.origin.length > 0,
+                "location.origin");
+        });
+
+        await test("DOM: 未処理 Promise 拒否が握り潰されない (レポータ設置済み)", async () => {
+            // SetPromiseRejectCallback の存在自体は JS から観測できないため、
+            // 拒否→後付けハンドラの一連が例外なく動くことのみ確認する
+            const p = Promise.reject(new Error("selftest-rejection (expected log)"));
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            let caught = false;
+            await p.catch(() => { caught = true });
+            assert(caught, "late handler attached");
+        });
+
         // ==================== 画像 ====================
         let bitmap = null;
         await test("createImageBitmap: PNG デコード (WIC)", async () => {
             bitmap = await createImageBitmap(TEST_PNG.buffer);
             assert(bitmap.width === 2 && bitmap.height === 2,
-                   "2x2 png -> " + bitmap.width + "x" + bitmap.height);
+                "2x2 png -> " + bitmap.width + "x" + bitmap.height);
+        });
+
+        await test("Image 要素: new Image + src(data:) -> load -> drawImage", async () => {
+            // player の ShapeLoadSrcUseCase と同じ利用パターン
+            const img = new Image();
+            img.crossOrigin = "anonymous";
+            const loaded = new Promise((resolve, reject) => {
+                img.addEventListener("load", resolve);
+                img.addEventListener("error", () => reject(new Error("image load error")));
+                setTimeout(() => reject(new Error("image load timeout")), 3000);
+            });
+            img.src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, TEST_PNG));
+            await loaded;
+            assert(img.complete === true, "complete = true");
+            assert(img.width === 2 && img.height === 2,
+                "size: " + img.width + "x" + img.height);
+            assert(img.naturalWidth === 2, "naturalWidth");
+
+            const c = new OffscreenCanvas(2, 2);
+            const ctx = c.getContext("2d", { "willReadFrequently": true });
+            ctx.drawImage(img, 0, 0, 2, 2);
+            const d = ctx.getImageData(0, 0, 2, 2).data;
+            assert(d[0] === 255 && d[1] === 0 && d[2] === 0 && d[3] === 255,
+                "(0,0) red: " + d[0] + "," + d[1] + "," + d[2] + "," + d[3]);
+            assert(d[5] === 255, "(1,0) green");
         });
 
         // ==================== Canvas2D ====================
@@ -207,7 +286,7 @@
             ctx.fillText("A", 4, 24);
             const d = ctx.getImageData(0, 0, 64, 32).data;
             let opaque = 0;
-            for (let i = 3; i < d.length; i += 4) if (d[i] > 128) opaque++;
+            for (let i = 3; i < d.length; i += 4) { if (d[i] > 128) { opaque++ } }
             assert(opaque > 5, "glyph pixels=" + opaque);
         });
 
@@ -221,13 +300,103 @@
             assert(d[4] === 0 && d[5] === 255, "(1,0) green");
         });
 
+        // ==================== エンジン/グローバル (player の V8 機能全数調査ぶん) ====================
+        await test("engine: crypto / ImageData→ImageBitmap / Proxy", async () => {
+            // crypto.randomUUID (player の WebGLUtil が ID 生成に使用)
+            const uuid = crypto.randomUUID();
+            assert(/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/.test(uuid),
+                "uuid=" + uuid);
+            const rnd = crypto.getRandomValues(new Uint8Array(16));
+            assert(rnd.length === 16 && rnd.some((b) => b !== 0), "getRandomValues");
+
+            // createImageBitmap(ImageData) — webgpu レンダラのキャプチャ/フィルタ経路
+            const data = new Uint8ClampedArray(2 * 2 * 4);
+            data[0] = 255; data[3] = 255;   // (0,0) = 赤
+            const bmp = await createImageBitmap(new ImageData(data, 2, 2));
+            assert(bmp.width === 2 && bmp.height === 2, "ImageData bitmap " + bmp.width + "x" + bmp.height);
+            const c = new OffscreenCanvas(2, 2);
+            const ctx = c.getContext("2d");
+            ctx.drawImage(bmp, 0, 0);
+            const px = ctx.getImageData(0, 0, 1, 1).data;
+            assert(px[0] === 255, "ImageData pixel roundtrip");
+
+            // Proxy (player が4ファイルで使用。jitless V8 のコア機能)
+            const p = new Proxy({}, { "get": (_, k) => k === "x" ? 42 : undefined });
+            assert(p.x === 42, "Proxy");
+
+            // ゲームコードが使うグローバル (UserSettings=localStorage, boot=readyState, confirm)
+            localStorage.setItem("__selftest", "1");
+            assert(localStorage.getItem("__selftest") === "1", "localStorage roundtrip");
+            localStorage.removeItem("__selftest");
+            assert(localStorage.getItem("__selftest") === null, "localStorage remove");
+            assert(document.readyState === "complete", "document.readyState");
+            assert(typeof confirm("?") === "boolean", "confirm");
+        });
+
+        await test("engine: WebAssembly (DrumBrake インタープリタ実行)", async () => {
+            // (module (func $add (param i32 i32) (result i32) ...) (export "add"))
+            // prebuilt V8 r2 (wasm + DrumBrake) が必要。実行時は --wasm-jitless で解釈実行。
+            assert(typeof WebAssembly === "object", "WebAssembly global (V8 r2 required)");
+            const wasmBytes = new Uint8Array([
+                0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00,
+                0x01, 0x07, 0x01, 0x60, 0x02, 0x7f, 0x7f, 0x01, 0x7f,
+                0x03, 0x02, 0x01, 0x00,
+                0x07, 0x07, 0x01, 0x03, 0x61, 0x64, 0x64, 0x00, 0x00,
+                0x0a, 0x09, 0x01, 0x07, 0x00, 0x20, 0x00, 0x20, 0x01, 0x6a, 0x0b
+            ]);
+            const { instance } = await WebAssembly.instantiate(wasmBytes);
+            assert(instance.exports.add(19, 23) === 42, "wasm add(19,23)");
+        });
+
+        await test("engine: indexedDB / atob / btoa", async () => {
+            assert(atob(btoa("Next2D!")) === "Next2D!", "atob/btoa roundtrip");
+
+            const openReq = indexedDB.open("selftest-db", 1);
+            const db = await new Promise((resolve, reject) => {
+                openReq.onupgradeneeded = (e) => e.target.result.createObjectStore("kv");
+                openReq.onsuccess = (e) => resolve(e.target.result);
+                openReq.onerror = () => reject(new Error("open failed"));
+            });
+            const store = db.transaction(["kv"], "readwrite").objectStore("kv");
+            await new Promise((resolve, reject) => {
+                const r = store.put({ "n": 1, "bin": new Uint8Array([7, 8]) }, "k");
+                r.onsuccess = resolve;
+                r.onerror = () => reject(new Error("put failed"));
+            });
+            const v = await new Promise((resolve, reject) => {
+                const r = db.transaction(["kv"]).objectStore("kv").get("k");
+                r.onsuccess = (e) => resolve(e.target.result);
+                r.onerror = () => reject(new Error("get failed"));
+            });
+            assert(v && v.n === 1 && v.bin instanceof Uint8Array && v.bin[1] === 8,
+                "indexedDB roundtrip (binary 値含む)");
+        });
+
+        await test("engine: Worker 内の TextDecoder / location / crypto", async () => {
+            const src = "self.onmessage = function() { " +
+                "self.postMessage({ " +
+                "  td: typeof TextDecoder, loc: typeof location, cr: typeof crypto, " +
+                "  dec: new TextDecoder().decode(new TextEncoder().encode('abc')) " +
+                "}); };";
+            const url = URL.createObjectURL(new Blob([src], { "type": "text/javascript" }));
+            const worker = new Worker(url);
+            const r = await new Promise((resolve) => {
+                worker.onmessage = (e) => resolve(e.data);
+                worker.postMessage(0);
+            });
+            assert(r.td === "function" && r.loc === "object" && r.cr === "object",
+                JSON.stringify(r));
+            assert(r.dec === "abc", "worker TextDecoder roundtrip");
+            if (worker.terminate) { worker.terminate() }
+        });
+
         // ==================== ネットワーク (Blob / URL / XHR) ====================
         let blobUrl = null;
         await test("Blob / URL.createObjectURL / revokeObjectURL", () => {
-            const blob = new Blob(["self.__marker = 1;"], { type: "text/javascript" });
+            const blob = new Blob(["self.__marker = 1;"], { "type": "text/javascript" });
             blobUrl = URL.createObjectURL(blob);
             assert(typeof blobUrl === "string" && blobUrl.indexOf("blob:") === 0,
-                   "url=" + blobUrl);
+                "url=" + blobUrl);
         });
 
         await softTest("XMLHttpRequest: アセット読込 (assets/app)", async () => {
@@ -245,17 +414,49 @@
             const src = "self.onmessage = function(e) { " +
                         "  self.postMessage({ echo: e.data.value * 2, arr: e.data.arr }); " +
                         "};";
-            const url = URL.createObjectURL(new Blob([src], { type: "text/javascript" }));
+            const url = URL.createObjectURL(new Blob([src], { "type": "text/javascript" }));
             const worker = new Worker(url);
             const reply = await new Promise((resolve, reject) => {
                 worker.onmessage = (e) => resolve(e.data);
                 worker.onerror = (e) => reject(new Error("worker error: " + (e && e.message)));
-                worker.postMessage({ value: 21, arr: new Float32Array([1.5, 2.5]) });
+                worker.postMessage({ "value": 21, "arr": new Float32Array([1.5, 2.5]) });
             });
             assert(reply.echo === 42, "echo=" + reply.echo);
             assert(reply.arr instanceof Float32Array && reply.arr[1] === 2.5,
-                   "structured clone TypedArray");
-            if (worker.terminate) worker.terminate();
+                "structured clone TypedArray");
+            if (worker.terminate) { worker.terminate() }
+        });
+
+        await test("Worker: ArrayBuffer transfer + ImageBitmap clone (render 経路)", async () => {
+            // player の render キューと同じく、大きな buffer は transfer で移譲し、
+            // ImageBitmap はホストオブジェクトとして複製して往復させる
+            const src = "self.onmessage = function(e) { " +
+                        "  var view = new Float32Array(e.data.buffer); " +
+                        "  self.postMessage({ " +
+                        "    sum: view[0] + view[1], " +
+                        "    len: e.data.buffer.byteLength, " +
+                        "    bmp: e.data.bmp, " +
+                        "    buffer: e.data.buffer " +
+                        "  }, [e.data.buffer]); " +
+                        "};";
+            const url = URL.createObjectURL(new Blob([src], { "type": "text/javascript" }));
+            const worker = new Worker(url);
+            const view = new Float32Array(1024);
+            view[0] = 1.5;
+            view[1] = 2.25;
+            const reply = await new Promise((resolve, reject) => {
+                worker.onmessage = (e) => resolve(e.data);
+                worker.onerror = (e) => reject(new Error("worker error: " + (e && e.message)));
+                worker.postMessage({ "buffer": view.buffer, "bmp": bitmap }, [view.buffer]);
+                assert(view.buffer.byteLength === 0, "送信側は detach される (transferable)");
+            });
+            assert(reply.sum === 3.75, "worker 側で中身が読める: " + reply.sum);
+            assert(reply.len === 4096, "worker 側 byteLength: " + reply.len);
+            assert(reply.buffer instanceof ArrayBuffer && reply.buffer.byteLength === 4096,
+                "worker→main への transfer 返却");
+            assert(reply.bmp && reply.bmp.width === 2 && reply.bmp.height === 2,
+                "ImageBitmap クローン往復");
+            if (worker.terminate) { worker.terminate() }
         });
 
         await test("OffscreenCanvas: transferControlToOffscreen + Worker 転送", async () => {
@@ -267,20 +468,22 @@
                         "  var c = e.data.canvas; " +
                         "  self.postMessage({ w: c ? c.width : -1 }); " +
                         "};";
-            const url = URL.createObjectURL(new Blob([src], { type: "text/javascript" }));
+            const url = URL.createObjectURL(new Blob([src], { "type": "text/javascript" }));
             const worker = new Worker(url);
             const reply = await new Promise((resolve, reject) => {
                 worker.onmessage = (e) => resolve(e.data);
-                worker.onerror = (e) => reject(new Error("worker error"));
-                worker.postMessage({ canvas: off }, [off]);
+                worker.onerror = (_e) => reject(new Error("worker error"));
+                worker.postMessage({ "canvas": off }, [off]);
             });
             assert(reply.w === 8, "transferred canvas width=" + reply.w);
-            if (worker.terminate) worker.terminate();
+            if (worker.terminate) { worker.terminate() }
         });
 
         // ==================== WebGPU ====================
+        // GPU の無い環境 (CI ランナー等) では adapter が取れず skip になる (softTest)。
+        // 実機・GPU あり PC では全て実行される。
         let device = null;
-        await test("WebGPU: requestAdapter / requestDevice / limits", async () => {
+        await softTest("WebGPU: requestAdapter / requestDevice / limits", async () => {
             assert(navigator.gpu, "navigator.gpu");
             const format = navigator.gpu.getPreferredCanvasFormat();
             assert(typeof format === "string" && format.length > 0, "preferred format=" + format);
@@ -289,13 +492,13 @@
             device = await adapter.requestDevice();
             assert(device, "device");
             assert(device.limits && device.limits.maxTextureDimension2D >= 4096,
-                   "maxTextureDimension2D=" + (device.limits && device.limits.maxTextureDimension2D));
+                "maxTextureDimension2D=" + (device.limits && device.limits.maxTextureDimension2D));
         });
 
-        await test("WebGPU: writeBuffer -> copyBufferToBuffer -> mapAsync 読み戻し", async () => {
+        await softTest("WebGPU: writeBuffer -> copyBufferToBuffer -> mapAsync 読み戻し", async () => {
             assert(device, "needs device");
-            const src = device.createBuffer({ size: 16, usage: GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST });
-            const dst = device.createBuffer({ size: 16, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            const src = device.createBuffer({ "size": 16, "usage": GPUBufferUsage.COPY_SRC | GPUBufferUsage.COPY_DST });
+            const dst = device.createBuffer({ "size": 16, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
             device.queue.writeBuffer(src, 0, new Uint32Array([1, 2, 3, 4]));
             const enc = device.createCommandEncoder();
             enc.copyBufferToBuffer(src, 0, dst, 0, 16);
@@ -306,20 +509,20 @@
             assert(view[0] === 1 && view[3] === 4, "readback=" + Array.from(view).join(","));
         });
 
-        await test("WebGPU: copyExternalImageToTexture -> copyTextureToBuffer 読み戻し", async () => {
+        await softTest("WebGPU: copyExternalImageToTexture -> copyTextureToBuffer 読み戻し", async () => {
             assert(device && bitmap, "needs device+bitmap");
             const tex = device.createTexture({
-                size: { width: 2, height: 2 },
-                format: "rgba8unorm",
-                usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT
+                "size": { "width": 2, "height": 2 },
+                "format": "rgba8unorm",
+                "usage": GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT
             });
             device.queue.copyExternalImageToTexture(
-                { source: bitmap }, { texture: tex }, { width: 2, height: 2 });
+                { "source": bitmap }, { "texture": tex }, { "width": 2, "height": 2 });
             // bytesPerRow は 256 アライン必須
-            const buf = device.createBuffer({ size: 256 * 2, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            const buf = device.createBuffer({ "size": 256 * 2, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
             const enc = device.createCommandEncoder();
             enc.copyTextureToBuffer(
-                { texture: tex }, { buffer: buf, bytesPerRow: 256 }, { width: 2, height: 2 });
+                { "texture": tex }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 2, "height": 2 });
             device.queue.submit([enc.finish()]);
             await buf.mapAsync(GPUMapMode.READ);
             const px = new Uint8Array(buf.getMappedRange().slice(0));
@@ -328,9 +531,9 @@
             assert(px[4] === 0 && px[5] === 255, "(1,0) green");
         });
 
-        await test("WebGPU: dynamic offset 付き uniform で描画 (塗りの中核経路)", async () => {
+        await softTest("WebGPU: dynamic offset 付き uniform で描画 (塗りの中核経路)", async () => {
             assert(device, "needs device");
-            const shader = device.createShaderModule({ code: `
+            const shader = device.createShaderModule({ "code": `
                 struct U { color: vec4f };
                 @group(0) @binding(0) var<uniform> u: U;
                 @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
@@ -339,96 +542,251 @@
                 }
                 @fragment fn fs() -> @location(0) vec4f { return u.color; }
             ` });
-            const bgl = device.createBindGroupLayout({ entries: [{
-                binding: 0, visibility: GPUShaderStage.FRAGMENT,
-                buffer: { type: "uniform", hasDynamicOffset: true }
+            const bgl = device.createBindGroupLayout({ "entries": [{
+                "binding": 0, "visibility": GPUShaderStage.FRAGMENT,
+                "buffer": { "type": "uniform", "hasDynamicOffset": true }
             }] });
             const pipeline = device.createRenderPipeline({
-                layout: device.createPipelineLayout({ bindGroupLayouts: [bgl] }),
-                vertex: { module: shader, entryPoint: "vs" },
-                fragment: { module: shader, entryPoint: "fs",
-                            targets: [{ format: "rgba8unorm" }] },
-                primitive: { topology: "triangle-list" }
+                "layout": device.createPipelineLayout({ "bindGroupLayouts": [bgl] }),
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs",
+                    "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" }
             });
             // offset 0 = 赤 / offset 256 = 緑。dynamic offset 256 で緑が描かれるべき。
-            const ubo = device.createBuffer({ size: 512, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+            const ubo = device.createBuffer({ "size": 512, "usage": GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
             device.queue.writeBuffer(ubo, 0, new Float32Array([1, 0, 0, 1]));
             device.queue.writeBuffer(ubo, 256, new Float32Array([0, 1, 0, 1]));
-            const bindGroup = device.createBindGroup({ layout: bgl, entries: [{
-                binding: 0, resource: { buffer: ubo, offset: 0, size: 16 }
+            const bindGroup = device.createBindGroup({ "layout": bgl, "entries": [{
+                "binding": 0, "resource": { "buffer": ubo, "offset": 0, "size": 16 }
             }] });
             const target = device.createTexture({
-                size: { width: 4, height: 4 }, format: "rgba8unorm",
-                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
+                "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
             });
             const enc = device.createCommandEncoder();
-            const pass = enc.beginRenderPass({ colorAttachments: [{
-                view: target.createView(), loadOp: "clear", storeOp: "store",
-                clearValue: [0, 0, 0, 0]
+            const pass = enc.beginRenderPass({ "colorAttachments": [{
+                "view": target.createView(), "loadOp": "clear", "storeOp": "store",
+                "clearValue": [0, 0, 0, 0]
             }] });
             pass.setPipeline(pipeline);
             pass.setBindGroup(0, bindGroup, [256]);   // ← dynamic offset
             pass.draw(3);
             pass.end();
-            const buf = device.createBuffer({ size: 256 * 4, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            const buf = device.createBuffer({ "size": 256 * 4, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
             const enc2 = device.createCommandEncoder();
-            enc2.copyTextureToBuffer({ texture: target }, { buffer: buf, bytesPerRow: 256 }, { width: 4, height: 4 });
+            enc2.copyTextureToBuffer({ "texture": target }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 4, "height": 4 });
             device.queue.submit([enc.finish(), enc2.finish()]);
             await buf.mapAsync(GPUMapMode.READ);
             const px = new Uint8Array(buf.getMappedRange().slice(0));
             buf.unmap();
             assert(px[1] === 255 && px[0] === 0,
-                   "dynamic offset 256 -> green, got rgba=" + px[0] + "," + px[1] + "," + px[2] + "," + px[3]);
+                "dynamic offset 256 -> green, got rgba=" + px[0] + "," + px[1] + "," + px[2] + "," + px[3]);
         });
 
-        await test("WebGPU: stencil8 パイプライン + setStencilReference (マスク経路)", async () => {
+        await softTest("WebGPU: MSAA (sampleCount=4) + resolveTarget 解決 (player 全描画経路)", async () => {
             assert(device, "needs device");
-            const shader = device.createShaderModule({ code: `
+            // player は全描画を MSAA テクスチャへ行い resolveTarget で本体へ解決する。
+            // resolveTarget が無視されると描画結果がどこにも現れない (黒画面の実原因だった)
+            const shader = device.createShaderModule({ "code": `
                 @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
                     var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
                     return vec4f(p[i], 0, 1);
                 }
                 @fragment fn fs() -> @location(0) vec4f { return vec4f(0, 0, 1, 1); }
             ` });
-            const layout = device.createPipelineLayout({ bindGroupLayouts: [] });
+            const pipeline = device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs",
+                    "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" },
+                "multisample": { "count": 4 }
+            });
+            const msaa = device.createTexture({
+                "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "sampleCount": 4,
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT
+            });
+            const resolve = device.createTexture({
+                "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
+            });
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginRenderPass({ "colorAttachments": [{
+                "view": msaa.createView(),
+                "resolveTarget": resolve.createView(),
+                "loadOp": "clear", "storeOp": "store",
+                "clearValue": [0, 0, 0, 0]
+            }] });
+            pass.setPipeline(pipeline);
+            pass.draw(3);
+            pass.end();
+            const buf = device.createBuffer({ "size": 256 * 4, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            const enc2 = device.createCommandEncoder();
+            enc2.copyTextureToBuffer({ "texture": resolve }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 4, "height": 4 });
+            device.queue.submit([enc.finish(), enc2.finish()]);
+            await buf.mapAsync(GPUMapMode.READ);
+            const px = new Uint8Array(buf.getMappedRange().slice(0));
+            buf.unmap();
+            assert(px[2] === 255 && px[3] === 255,
+                "resolve target has blue, got rgba=" + px[0] + "," + px[1] + "," + px[2] + "," + px[3]);
+        });
+
+        await softTest("WebGPU: MSAA ステンシルマスク (player clip 経路の忠実再現)", async () => {
+            assert(device, "needs device");
+            // player の mask: (1) writeMask=0 でステンシルへ形状を書く (resolveTarget なし)
+            //                (2) stencil compare=equal で内容を描く (resolveTarget あり)
+            // これが崩れるとマスクが効かず、隠されるべきレイヤーが全面に描かれる
+            const W = 8, H = 8;
+            const shader = device.createShaderModule({ "code": `
+                @vertex fn vsLeft(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    // 左半分を覆う矩形 (2 三角形)
+                    var p = array<vec2f, 6>(
+                        vec2f(-1,-1), vec2f(0,-1), vec2f(-1,1),
+                        vec2f(-1,1), vec2f(0,-1), vec2f(0,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @vertex fn vsFull(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @fragment fn fs() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); }
+                @fragment fn fsBlue() -> @location(0) vec4f { return vec4f(0, 0, 1, 1); }
+            ` });
+            const msaaColor = device.createTexture({
+                "size": { "width": W, "height": H }, "format": "rgba8unorm",
+                "sampleCount": 4, "usage": GPUTextureUsage.RENDER_ATTACHMENT
+            });
+            const resolve = device.createTexture({
+                "size": { "width": W, "height": H }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
+            });
+            const msaaStencil = device.createTexture({
+                "size": { "width": W, "height": H }, "format": "stencil8",
+                "sampleCount": 4, "usage": GPUTextureUsage.RENDER_ATTACHMENT
+            });
+            const clipPipeline = device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vsLeft" },
+                "fragment": { "module": shader, "entryPoint": "fs",
+                    "targets": [{ "format": "rgba8unorm", "writeMask": 0 }] },
+                "primitive": { "topology": "triangle-list" },
+                "multisample": { "count": 4 },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": { "compare": "always", "passOp": "replace" },
+                    "stencilBack": { "compare": "always", "passOp": "replace" }
+                }
+            });
+            const drawPipeline = device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vsFull" },
+                "fragment": { "module": shader, "entryPoint": "fsBlue",
+                    "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" },
+                "multisample": { "count": 4 },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": { "compare": "equal", "passOp": "keep" },
+                    "stencilBack": { "compare": "equal", "passOp": "keep" }
+                }
+            });
+            const enc = device.createCommandEncoder();
+            // pass 1: マスク形状 (左半分) をステンシルに書く。色は writeMask=0 で不変
+            const p1 = enc.beginRenderPass({
+                "colorAttachments": [{
+                    "view": msaaColor.createView(),
+                    "loadOp": "clear", "storeOp": "store", "clearValue": [0, 0, 0, 0]
+                }],
+                "depthStencilAttachment": {
+                    "view": msaaStencil.createView(),
+                    "stencilLoadOp": "clear", "stencilStoreOp": "store",
+                    "stencilClearValue": 0
+                }
+            });
+            p1.setPipeline(clipPipeline);
+            p1.setStencilReference(1);
+            p1.draw(6);
+            p1.end();
+            // pass 2: 全面に青を stencil==1 の場所だけ描き、resolve へ解決
+            const p2 = enc.beginRenderPass({
+                "colorAttachments": [{
+                    "view": msaaColor.createView(),
+                    "resolveTarget": resolve.createView(),
+                    "loadOp": "load", "storeOp": "store"
+                }],
+                "depthStencilAttachment": {
+                    "view": msaaStencil.createView(),
+                    "stencilLoadOp": "load", "stencilStoreOp": "store"
+                }
+            });
+            p2.setPipeline(drawPipeline);
+            p2.setStencilReference(1);
+            p2.draw(3);
+            p2.end();
+            const buf = device.createBuffer({ "size": 256 * H, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            enc.copyTextureToBuffer({ "texture": resolve }, { "buffer": buf, "bytesPerRow": 256 }, { "width": W, "height": H });
+            device.queue.submit([enc.finish()]);
+            await buf.mapAsync(GPUMapMode.READ);
+            const px = new Uint8Array(buf.getMappedRange().slice(0));
+            buf.unmap();
+            const at = (x, y) => y * 256 + x * 4;
+            const l = at(2, 4), r = at(6, 4);
+            assert(px[l + 2] === 255 && px[l + 3] === 255,
+                "マスク内 (左) は青: rgba=" + px[l] + "," + px[l + 1] + "," + px[l + 2] + "," + px[l + 3]);
+            assert(px[r + 3] === 0,
+                "マスク外 (右) は透明のまま: rgba=" + px[r] + "," + px[r + 1] + "," + px[r + 2] + "," + px[r + 3]);
+        });
+
+        await softTest("WebGPU: stencil8 パイプライン + setStencilReference (マスク経路)", async () => {
+            assert(device, "needs device");
+            const shader = device.createShaderModule({ "code": `
+                @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @fragment fn fs() -> @location(0) vec4f { return vec4f(0, 0, 1, 1); }
+            ` });
+            const layout = device.createPipelineLayout({ "bindGroupLayouts": [] });
             // 1st: ステンシルへ replace 書き込み (色は書かない設定でも良いが簡略化)
             const writePipe = device.createRenderPipeline({
-                layout, vertex: { module: shader, entryPoint: "vs" },
-                fragment: { module: shader, entryPoint: "fs", targets: [{ format: "rgba8unorm" }] },
-                primitive: { topology: "triangle-list" },
-                depthStencil: {
-                    format: "stencil8",
-                    stencilFront: { compare: "always", failOp: "keep", depthFailOp: "keep", passOp: "replace" },
-                    stencilBack:  { compare: "always", failOp: "keep", depthFailOp: "keep", passOp: "replace" },
-                    stencilReadMask: 0xff, stencilWriteMask: 0xff
+                layout, "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs", "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": { "compare": "always", "failOp": "keep", "depthFailOp": "keep", "passOp": "replace" },
+                    "stencilBack":  { "compare": "always", "failOp": "keep", "depthFailOp": "keep", "passOp": "replace" },
+                    "stencilReadMask": 0xff, "stencilWriteMask": 0xff
                 }
             });
             // 2nd: equal 比較で描画 (マスク内のみ)
             const testPipe = device.createRenderPipeline({
-                layout, vertex: { module: shader, entryPoint: "vs" },
-                fragment: { module: shader, entryPoint: "fs", targets: [{ format: "rgba8unorm" }] },
-                primitive: { topology: "triangle-list" },
-                depthStencil: {
-                    format: "stencil8",
-                    stencilFront: { compare: "equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
-                    stencilBack:  { compare: "equal", failOp: "keep", depthFailOp: "keep", passOp: "keep" },
-                    stencilReadMask: 0xff, stencilWriteMask: 0x00
+                layout, "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs", "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" },
+                "depthStencil": {
+                    "format": "stencil8",
+                    "stencilFront": { "compare": "equal", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
+                    "stencilBack":  { "compare": "equal", "failOp": "keep", "depthFailOp": "keep", "passOp": "keep" },
+                    "stencilReadMask": 0xff, "stencilWriteMask": 0x00
                 }
             });
             const color = device.createTexture({
-                size: { width: 4, height: 4 }, format: "rgba8unorm",
-                usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
+                "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC
             });
             const stencil = device.createTexture({
-                size: { width: 4, height: 4 }, format: "stencil8",
-                usage: GPUTextureUsage.RENDER_ATTACHMENT
+                "size": { "width": 4, "height": 4 }, "format": "stencil8",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT
             });
             const enc = device.createCommandEncoder();
             const p1 = enc.beginRenderPass({
-                colorAttachments: [{ view: color.createView(), loadOp: "clear", storeOp: "store", clearValue: [0,0,0,0] }],
-                depthStencilAttachment: {
-                    view: stencil.createView(),
-                    stencilLoadOp: "clear", stencilStoreOp: "store", stencilClearValue: 0
+                "colorAttachments": [{ "view": color.createView(), "loadOp": "clear", "storeOp": "store", "clearValue": [0,0,0,0] }],
+                "depthStencilAttachment": {
+                    "view": stencil.createView(),
+                    "stencilLoadOp": "clear", "stencilStoreOp": "store", "stencilClearValue": 0
                 }
             });
             p1.setPipeline(writePipe);
@@ -436,18 +794,18 @@
             p1.draw(3);
             p1.end();
             const p2 = enc.beginRenderPass({
-                colorAttachments: [{ view: color.createView(), loadOp: "load", storeOp: "store" }],
-                depthStencilAttachment: {
-                    view: stencil.createView(),
-                    stencilLoadOp: "load", stencilStoreOp: "store"
+                "colorAttachments": [{ "view": color.createView(), "loadOp": "load", "storeOp": "store" }],
+                "depthStencilAttachment": {
+                    "view": stencil.createView(),
+                    "stencilLoadOp": "load", "stencilStoreOp": "store"
                 }
             });
             p2.setPipeline(testPipe);
             p2.setStencilReference(1);   // ref==stencil(1) -> 描画される
             p2.draw(3);
             p2.end();
-            const buf = device.createBuffer({ size: 256 * 4, usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
-            enc.copyTextureToBuffer({ texture: color }, { buffer: buf, bytesPerRow: 256 }, { width: 4, height: 4 });
+            const buf = device.createBuffer({ "size": 256 * 4, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            enc.copyTextureToBuffer({ "texture": color }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 4, "height": 4 });
             device.queue.submit([enc.finish()]);
             await buf.mapAsync(GPUMapMode.READ);
             const px = new Uint8Array(buf.getMappedRange().slice(0));
@@ -455,6 +813,284 @@
             assert(px[2] === 255, "stencil equal pass drew blue, got rgba=" + px[0] + "," + px[1] + "," + px[2]);
         });
 
+        await softTest("WebGPU: pipeline-overridable constants (override がパイプラインへ反映)", async () => {
+            assert(device, "needs device");
+            // player は override 定数 (GRADIENT_TYPE=linear/radial, SPREAD_MODE, フィルタ種別,
+            // yFlipSign) でシェーダを特殊化する。ホストが fragment/vertex.constants を読まないと
+            // 全パイプラインが WGSL 既定値でコンパイルされ、放射状グラデが線形に潰れる等になる。
+            // ここで override が実際に効くか (既定値でなく指定値でコンパイルされるか) を検証する。
+            const shader = device.createShaderModule({ "code": `
+                override SELECT : u32 = 0u;
+                override TINT : f32 = 0.25;
+                @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @fragment fn fs() -> @location(0) vec4f {
+                    if (SELECT == 1u) { return vec4f(0, TINT, 0, 1); }
+                    return vec4f(TINT, 0, 0, 1);
+                }
+            ` });
+            const mk = (constants) => device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs",
+                    "constants": constants,
+                    "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" }
+            });
+            const draw = async (pipeline) => {
+                const target = device.createTexture({
+                    "size": { "width": 2, "height": 2 }, "format": "rgba8unorm",
+                    "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC });
+                const enc = device.createCommandEncoder();
+                const pass = enc.beginRenderPass({ "colorAttachments": [{
+                    "view": target.createView(), "loadOp": "clear", "storeOp": "store",
+                    "clearValue": [0, 0, 0, 1] }] });
+                pass.setPipeline(pipeline); pass.draw(3); pass.end();
+                // 2 行分: copyTextureToBuffer は size >= bytesPerRow*(h-1)+w*4 = 264 を要求する
+                const buf = device.createBuffer({ "size": 256 * 2, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+                enc.copyTextureToBuffer({ "texture": target }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 2, "height": 2 });
+                device.queue.submit([enc.finish()]);
+                await buf.mapAsync(GPUMapMode.READ);
+                const px = new Uint8Array(buf.getMappedRange().slice(0)); buf.unmap();
+                return [px[0], px[1], px[2]];
+            };
+            // constants が無視されると両方 SELECT=0/TINT=0.25 (既定) の赤~64 になり検証に落ちる。
+            const green = await draw(mk({ "SELECT": 1, "TINT": 0.75 }));
+            const red   = await draw(mk({ "SELECT": 0, "TINT": 1.0 }));
+            assert(green[1] > 150 && green[0] < 60,
+                "override SELECT=1/TINT=0.75 -> 緑: rgb=" + green.join(","));
+            assert(red[0] > 240 && red[1] < 40,
+                "override SELECT=0/TINT=1.0 -> 赤最大: rgb=" + red.join(","));
+        });
+
+        await softTest("WebGPU: multisample.alphaToCoverageEnabled (ベクタ縁 AA)", async () => {
+            assert(device, "needs device");
+            // Next2D はベクタ図形の境界を塗り alpha に頼り、MSAA カバレッジで AA する。
+            // このフィールドが無視されると縁がジャギる。alpha=0.5 で部分被覆になるかを検証。
+            const shader = device.createShaderModule({ "code": `
+                @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @fragment fn fs() -> @location(0) vec4f { return vec4f(1, 0, 0, 0.5); }
+            ` });
+            const pipeline = device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs", "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" },
+                "multisample": { "count": 4, "alphaToCoverageEnabled": true }
+            });
+            const msaa = device.createTexture({ "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "sampleCount": 4, "usage": GPUTextureUsage.RENDER_ATTACHMENT });
+            const resolve = device.createTexture({ "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC });
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginRenderPass({ "colorAttachments": [{
+                "view": msaa.createView(), "resolveTarget": resolve.createView(),
+                "loadOp": "clear", "storeOp": "store", "clearValue": [0, 0, 0, 1] }] });
+            pass.setPipeline(pipeline); pass.draw(3); pass.end();
+            const buf = device.createBuffer({ "size": 256 * 4, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            enc.copyTextureToBuffer({ "texture": resolve }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 4, "height": 4 });
+            device.queue.submit([enc.finish()]);
+            await buf.mapAsync(GPUMapMode.READ);
+            const px = new Uint8Array(buf.getMappedRange().slice(0)); buf.unmap();
+            // alpha 0.5 + alphaToCoverage -> ~2/4 サンプル被覆 -> resolve は中間の赤。
+            // フィールドが無視されると全サンプル被覆で赤=255 になり検証に落ちる。
+            assert(px[0] > 20 && px[0] < 235,
+                "alpha-to-coverage で部分被覆 (中間の赤): rgba=" + px[0] + "," + px[1] + "," + px[2] + "," + px[3]);
+        });
+
+        await softTest("WebGPU: writeTexture 宛先 origin (アトラスのセル位置)", async () => {
+            assert(device, "needs device");
+            // player はアトラスの (node.x, node.y) へ writeTexture する。origin が無視されると
+            // 常に (0,0) に書かれてアトラスが破損する。origin(2,2) の書込みが右下に出るか検証。
+            const tex = device.createTexture({ "size": { "width": 4, "height": 4 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC });
+            const red = new Uint8Array(2 * 2 * 4);
+            for (let i = 0; i < red.length; i += 4) { red[i] = 255; red[i + 3] = 255; }
+            device.queue.writeTexture({ "texture": tex, "origin": { "x": 2, "y": 2, "z": 0 } },
+                red, { "bytesPerRow": 2 * 4, "rowsPerImage": 2 }, { "width": 2, "height": 2 });
+            const buf = device.createBuffer({ "size": 256 * 4, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            const enc = device.createCommandEncoder();
+            enc.copyTextureToBuffer({ "texture": tex }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 4, "height": 4 });
+            device.queue.submit([enc.finish()]);
+            await buf.mapAsync(GPUMapMode.READ);
+            const px = new Uint8Array(buf.getMappedRange().slice(0)); buf.unmap();
+            const at = (x, y) => y * 256 + x * 4;
+            assert(px[at(3, 3)] === 255, "origin(2,2) の赤が右下(3,3)に存在: got=" + px[at(3, 3)]);
+            assert(px[at(0, 0)] === 0, "左上(0,0)は空 (origin が (0,0) に潰れていない): got=" + px[at(0, 0)]);
+        });
+
+        await softTest("WebGPU: compute pipeline + storage buffer 書き戻し (dispatchWorkgroups)", async () => {
+            assert(device, "needs device");
+            // Next2D の 2D ラスタライザは compute を使わないが、WebGPU の機能を特定用途に
+            // 絞らず全面的に利用可能にするため compute 経路を検証する。storage buffer への
+            // 書込みと compute.constants (override) の反映を 1 テストで確認する。
+            const shader = device.createShaderModule({ "code": `
+                override MUL : u32 = 1u;
+                @group(0) @binding(0) var<storage, read_write> outBuf : array<u32>;
+                @compute @workgroup_size(4) fn main(@builtin(global_invocation_id) gid : vec3u) {
+                    outBuf[gid.x] = gid.x * MUL;
+                }
+            ` });
+            const pipeline = device.createComputePipeline({
+                "layout": "auto",
+                "compute": { "module": shader, "entryPoint": "main", "constants": { "MUL": 3 } }
+            });
+            const N = 4;
+            const storage = device.createBuffer({ "size": N * 4,
+                "usage": GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC });
+            const bindGroup = device.createBindGroup({
+                "layout": pipeline.getBindGroupLayout(0),
+                "entries": [{ "binding": 0, "resource": { "buffer": storage } }]
+            });
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginComputePass();
+            pass.setPipeline(pipeline);
+            pass.setBindGroup(0, bindGroup);
+            pass.dispatchWorkgroups(1);
+            pass.end();
+            const readback = device.createBuffer({ "size": N * 4,
+                "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            enc.copyBufferToBuffer(storage, 0, readback, 0, N * 4);
+            device.queue.submit([enc.finish()]);
+            await readback.mapAsync(GPUMapMode.READ);
+            const out = new Uint32Array(readback.getMappedRange().slice(0)); readback.unmap();
+            // MUL=3 override が効けば [0,3,6,9]。無視 (既定 1) なら [0,1,2,3] で落ちる。
+            assert(out[0] === 0 && out[1] === 3 && out[2] === 6 && out[3] === 9,
+                "compute storage 書込み + override MUL=3: got=" + Array.from(out).join(","));
+        });
+
+        await softTest("WebGPU: error scope (pushErrorScope/popErrorScope)", async () => {
+            assert(device, "needs device");
+            // 正常操作 → popErrorScope は null。不正操作 → validation error を捕捉。
+            device.pushErrorScope("validation");
+            device.createBuffer({ "size": 16, "usage": GPUBufferUsage.COPY_DST });
+            const noErr = await device.popErrorScope();
+            assert(noErr === null, "正常操作では error なし: got=" + noErr);
+            device.pushErrorScope("validation");
+            // MAP_READ | MAP_WRITE の同時指定は不正 (validation error)
+            device.createBuffer({ "size": 16, "usage": GPUBufferUsage.MAP_READ | GPUBufferUsage.MAP_WRITE });
+            const err = await device.popErrorScope();
+            assert(err !== null, "不正操作で validation error を捕捉 (null でない)");
+        });
+
+        await softTest("WebGPU: render bundle (createRenderBundleEncoder/executeBundles)", async () => {
+            assert(device, "needs device");
+            const shader = device.createShaderModule({ "code": `
+                @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @fragment fn fs() -> @location(0) vec4f { return vec4f(0, 1, 0, 1); }
+            ` });
+            const pipeline = device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs", "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" }
+            });
+            const bundleEnc = device.createRenderBundleEncoder({ "colorFormats": ["rgba8unorm"] });
+            bundleEnc.setPipeline(pipeline); bundleEnc.draw(3);
+            const bundle = bundleEnc.finish();
+            const target = device.createTexture({ "size": { "width": 2, "height": 2 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC });
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginRenderPass({ "colorAttachments": [{
+                "view": target.createView(), "loadOp": "clear", "storeOp": "store", "clearValue": [0, 0, 0, 1] }] });
+            pass.executeBundles([bundle]); pass.end();
+            const buf = device.createBuffer({ "size": 256 * 2, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            enc.copyTextureToBuffer({ "texture": target }, { "buffer": buf, "bytesPerRow": 256 }, { "width": 2, "height": 2 });
+            device.queue.submit([enc.finish()]);
+            await buf.mapAsync(GPUMapMode.READ);
+            const px = new Uint8Array(buf.getMappedRange().slice(0)); buf.unmap();
+            // bundle 経由の draw が実行されないと clearValue の黒のまま。
+            assert(px[1] > 240 && px[0] < 40, "render bundle 経由の緑描画: rgb=" + px[0] + "," + px[1] + "," + px[2]);
+        });
+
+        await softTest("WebGPU: occlusion query (createQuerySet/beginOcclusionQuery/resolveQuerySet)", async () => {
+            assert(device, "needs device");
+            const shader = device.createShaderModule({ "code": `
+                @vertex fn vs(@builtin(vertex_index) i: u32) -> @builtin(position) vec4f {
+                    var p = array<vec2f, 3>(vec2f(-1,-3), vec2f(3,1), vec2f(-1,1));
+                    return vec4f(p[i], 0, 1);
+                }
+                @fragment fn fs() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); }
+            ` });
+            const pipeline = device.createRenderPipeline({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs", "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "triangle-list" }
+            });
+            const querySet = device.createQuerySet({ "type": "occlusion", "count": 1 });
+            assert(querySet.count === 1 && querySet.type === "occlusion",
+                "querySet メタ: count=" + querySet.count + " type=" + querySet.type);
+            const target = device.createTexture({ "size": { "width": 2, "height": 2 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT });
+            const enc = device.createCommandEncoder();
+            const pass = enc.beginRenderPass({ "colorAttachments": [{
+                "view": target.createView(), "loadOp": "clear", "storeOp": "store", "clearValue": [0, 0, 0, 1] }],
+                "occlusionQuerySet": querySet });
+            pass.setPipeline(pipeline);
+            pass.beginOcclusionQuery(0); pass.draw(3); pass.endOcclusionQuery();
+            pass.end();
+            const resolveBuf = device.createBuffer({ "size": 8, "usage": GPUBufferUsage.QUERY_RESOLVE | GPUBufferUsage.COPY_SRC });
+            enc.resolveQuerySet(querySet, 0, 1, resolveBuf, 0);
+            const readBuf = device.createBuffer({ "size": 8, "usage": GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ });
+            enc.copyBufferToBuffer(resolveBuf, 0, readBuf, 0, 8);
+            device.queue.submit([enc.finish()]);
+            await readBuf.mapAsync(GPUMapMode.READ);
+            const counts = new Uint32Array(readBuf.getMappedRange().slice(0)); readBuf.unmap();
+            // 全画面三角形を描いたので被覆サンプル数 > 0 (query 未対応なら 0 のまま)。
+            assert(counts[0] > 0, "occlusion query 被覆サンプル数 > 0: got=" + counts[0]);
+        });
+
+        await softTest("WebGPU: async pipeline + onSubmittedWorkDone", async () => {
+            assert(device, "needs device");
+            const shader = device.createShaderModule({ "code": `
+                @vertex fn vs() -> @builtin(position) vec4f { return vec4f(0, 0, 0, 1); }
+                @fragment fn fs() -> @location(0) vec4f { return vec4f(1, 0, 0, 1); }
+            ` });
+            const rp = await device.createRenderPipelineAsync({
+                "layout": "auto",
+                "vertex": { "module": shader, "entryPoint": "vs" },
+                "fragment": { "module": shader, "entryPoint": "fs", "targets": [{ "format": "rgba8unorm" }] },
+                "primitive": { "topology": "point-list" }
+            });
+            assert(rp && typeof rp.getBindGroupLayout === "function", "createRenderPipelineAsync が pipeline を返す");
+            const cs = device.createShaderModule({ "code": `
+                @group(0) @binding(0) var<storage, read_write> o : array<u32>;
+                @compute @workgroup_size(1) fn main() { o[0] = 1u; }
+            ` });
+            const cp = await device.createComputePipelineAsync({
+                "layout": "auto", "compute": { "module": cs, "entryPoint": "main" } });
+            assert(cp && typeof cp.getBindGroupLayout === "function", "createComputePipelineAsync が pipeline を返す");
+            device.queue.submit([]);
+            await device.queue.onSubmittedWorkDone();  // resolve すれば成功
+            assert(true, "onSubmittedWorkDone が resolve");
+        });
+
+        await softTest("WebGPU: debug marker / device.lost / device.destroy", async () => {
+            assert(device, "needs device");
+            // debug marker は結果に影響しないが呼べること (no-throw) を確認する。
+            const enc = device.createCommandEncoder();
+            enc.pushDebugGroup("group"); enc.insertDebugMarker("marker"); enc.popDebugGroup();
+            const target = device.createTexture({ "size": { "width": 2, "height": 2 }, "format": "rgba8unorm",
+                "usage": GPUTextureUsage.RENDER_ATTACHMENT });
+            const pass = enc.beginRenderPass({ "colorAttachments": [{
+                "view": target.createView(), "loadOp": "clear", "storeOp": "store", "clearValue": [0, 0, 0, 1] }] });
+            pass.pushDebugGroup("pass"); pass.insertDebugMarker("pm"); pass.popDebugGroup();
+            pass.end();
+            device.queue.submit([enc.finish()]);
+            // device.lost は Promise、destroy は関数として存在すること (device 共有中なので実際には呼ばない)。
+            assert(device.lost && typeof device.lost.then === "function", "device.lost は Promise");
+            assert(typeof device.destroy === "function", "device.destroy が存在");
+        });
+
         // ==================== Audio ====================
         let audioCtx = null;
         await test("AudioContext: decodeAudioData (Media Foundation)", async () => {
@@ -465,6 +1101,20 @@
             globalThis.__selftestAudioBuffer = buffer;
         });
 
+        await test("Audio 要素 (new Audio / play / pause)", async () => {
+            // ゲームコードが効果音再生に使う HTMLAudioElement 最小実装
+            const a = new Audio();      // URL なし (ボイス無しでも API は成立する)
+            a.volume = 0;
+            a.loop = false;
+            a.preload = "auto";
+            a.currentTime = 0;
+            assert(a.paused === true, "initial paused");
+            await a.play();
+            assert(a.paused === false, "playing");
+            a.pause();
+            assert(a.paused === true, "paused after pause()");
+        });
+
         await softTest("Audio: gain 接続 + 再生 + ended 発火", async () => {
             assert(audioCtx && globalThis.__selftestAudioBuffer, "needs decoded buffer");
             const gainNode = audioCtx.createGain();
@@ -481,8 +1131,8 @@
         // ==================== 入力 / その他 ====================
         await test("Gamepad: navigator.getGamepads()", () => {
             const pads = navigator.getGamepads();
-            assert(Array.isArray(pads) || (pads && typeof pads.length === "number"),
-                   "returns array-like");
+            assert(Array.isArray(pads) || pads && typeof pads.length === "number",
+                "returns array-like");
         });
 
         await softTest("clipboard: writeText / readText 往復", async () => {