+
{#if url}
{:else}
@@ -108,6 +133,6 @@
diff --git a/frontend/src/capture/fitDisplay.test.ts b/frontend/src/capture/fitDisplay.test.ts
new file mode 100644
index 0000000..6ecb539
--- /dev/null
+++ b/frontend/src/capture/fitDisplay.test.ts
@@ -0,0 +1,26 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { fitDisplay } from './fitDisplay.ts';
+
+test('parentW=0 → null (no size until laid out)', () => {
+ assert.equal(fitDisplay(0, 1000, 750, 420), null);
+ assert.equal(fitDisplay(-5, 1000, 750, 420), null);
+});
+
+test('280 wide, 4:3 landscape → contain, under the height cap', () => {
+ const fit = fitDisplay(280, 1600, 1200, 420);
+ assert.ok(fit);
+ assert.equal(fit.fitW, 280);
+ assert.ok(Math.abs(fit.fitH - 210) < 1e-9);
+ assert.ok(fit.fitH <= 420);
+});
+
+test('portrait under maxH never stretches: height capped, width shrinks', () => {
+ // 1000 wide source, 3000 tall. Full-width fit would be 900 tall > 420.
+ const fit = fitDisplay(400, 1000, 3000, 420);
+ assert.ok(fit);
+ assert.equal(fit.fitH, 420);
+ assert.ok(Math.abs(fit.fitW - 140) < 1e-9);
+ // aspect preserved: fitW/fitH === imgW/imgH
+ assert.ok(Math.abs(fit.fitW / fit.fitH - 1000 / 3000) < 1e-9);
+});
diff --git a/frontend/src/capture/fitDisplay.ts b/frontend/src/capture/fitDisplay.ts
new file mode 100644
index 0000000..a51ac40
--- /dev/null
+++ b/frontend/src/capture/fitDisplay.ts
@@ -0,0 +1,17 @@
+// Contain-fit of an image into a parent width with a height cap. Pure and
+// display-only; all measurement math stays on source pixels.
+// Null when the parent is not laid out yet (clientWidth 0) — the caller must
+// not finalize CSS size until it is, to avoid a wrong-aspect flash.
+export function fitDisplay(
+ parentW: number, imgW: number, imgH: number, maxH: number,
+): { fitW: number; fitH: number } | null {
+ if (parentW <= 0 || imgW <= 0 || imgH <= 0) return null;
+ const fitW = parentW;
+ let fitH = (imgH / imgW) * fitW;
+ if (fitH > maxH) {
+ // Cap height and shrink width to preserve aspect; never stretch.
+ fitH = maxH;
+ return { fitW: (fitH * imgW) / imgH, fitH };
+ }
+ return { fitW, fitH };
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 6eaf9f3..d6323da 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -12,5 +12,6 @@
"verbatimModuleSyntax": false,
"types": ["vite/client"]
},
- "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"]
+ "include": ["src/**/*.ts", "src/**/*.svelte", "vite.config.ts"],
+ "exclude": ["src/**/*.test.ts"]
}