1 files changed, 26 insertions, 23 deletions
diff --git a/cnn_v3/tools/tester.js b/cnn_v3/tools/tester.js
index fd2b7bd..4286060 100644
--- a/cnn_v3/tools/tester.js
+++ b/cnn_v3/tools/tester.js
@@ -491,31 +491,34 @@ class CNNv3Tester {
     const tex = this.layerTextures[layerId];
     if (!def || !tex || !this.device) return;
     const wrap = document.getElementById('chzoomWrap');
-    const dst  = document.getElementById('chzoom');
     const lbl  = document.getElementById('chzoomLbl');
-    // Size: fit canvas to available container width (height:auto doesn't work on <canvas>)
-    const maxW  = wrap.clientWidth - 12; // subtract wrap padding
-    const scale = Math.min(1, maxW / tex.width);
-    dst.width  = Math.round(tex.width  * scale);
-    dst.height = Math.round(tex.height * scale);
-    dst.style.width  = '';
-    dst.style.height = '';
-    lbl.textContent  = label;
+    lbl.textContent    = label;
     wrap.style.display = 'flex';
-    // Re-render via WebGPU (WebGPU canvas pixels are not readable by drawImage)
-    const pl = def.t === 'f32' ? this.getVizF32() : this.getVizU32();
-    const ctx = dst.getContext('webgpu');
-    try { ctx.configure({device: this.device, format: this.format}); } catch(_) { return; }
-    const chBuf = this.device.createBuffer({size:4, usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});
-    this.device.queue.writeBuffer(chBuf, 0, new Uint32Array([ch]));
-    const bg = this.device.createBindGroup({layout: pl.getBindGroupLayout(0),
-      entries:[{binding:0, resource:tex.createView()}, {binding:1, resource:{buffer:chBuf}}]});
-    const enc = this.device.createCommandEncoder();
-    const rp  = enc.beginRenderPass({colorAttachments:[{
-      view:ctx.getCurrentTexture().createView(), loadOp:'clear', storeOp:'store'}]});
-    rp.setPipeline(pl); rp.setBindGroup(0, bg); rp.draw(6); rp.end();
-    this.device.queue.submit([enc.finish()]);
-    chBuf.destroy();
+    // Wait for layout so clientWidth/clientHeight reflect the flex-distributed size
+    requestAnimationFrame(() => {
+      const dst   = document.getElementById('chzoom');
+      const pad   = 12;
+      const lblH  = lbl.offsetHeight + 6;
+      const availW = wrap.clientWidth  - pad;
+      const availH = wrap.clientHeight - pad - lblH;
+      const scale  = Math.min(1, availW / tex.width, availH / tex.height);
+      dst.width  = Math.round(tex.width  * scale);
+      dst.height = Math.round(tex.height * scale);
+      // Re-render via WebGPU (WebGPU canvas pixels are not readable by drawImage)
+      const pl = def.t === 'f32' ? this.getVizF32() : this.getVizU32();
+      const ctx = dst.getContext('webgpu');
+      try { ctx.configure({device: this.device, format: this.format}); } catch(_) { return; }
+      const chBuf = this.device.createBuffer({size:4, usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST});
+      this.device.queue.writeBuffer(chBuf, 0, new Uint32Array([ch]));
+      const bg = this.device.createBindGroup({layout: pl.getBindGroupLayout(0),
+        entries:[{binding:0, resource:tex.createView()}, {binding:1, resource:{buffer:chBuf}}]});
+      const enc = this.device.createCommandEncoder();
+      const rp  = enc.beginRenderPass({colorAttachments:[{
+        view:ctx.getCurrentTexture().createView(), loadOp:'clear', storeOp:'store'}]});
+      rp.setPipeline(pl); rp.setBindGroup(0, bg); rp.draw(6); rp.end();
+      this.device.queue.submit([enc.finish()]);
+      chBuf.destroy();
+    });
   }
 
   // ── Save PNG ─────────────────────────────────────────────────────────────