@@ -27,6 +27,8 @@ const RESIZE_BY = 60;
 const ROTATE_BY = (25 * Math.PI) / 180;
 const CROP_BY = 40;
 const NUDGES = 5;
+// Where a hand drag's stray hover move landed, from the press, in composition px (the saved translate it caused).
+const STRAY_BY = [-611, 213.6];
 const ZOOM_SENSITIVITY = 0.007; // previewZoom.ts: one wheel unit scales zoom by exp(0.007)
 
 export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
@@ -570,6 +572,26 @@ export async function controlDrag(browser, gesture) {
   }
 }
 
+// A hand drag gets no-button hover moves from Chromium mid-drag after a layout change; a gesture must ignore them.
+// Sent as the PointerEvent the pressed element receives: a CDP move with no buttons ended the drag unsaved.
+async function strayMove(ctx, press, [x, y]) {
+  await ctx.page.evaluate(
+    ([px, py], init) =>
+      document.elementFromPoint(px, py)?.dispatchEvent(new PointerEvent("pointermove", init)),
+    press,
+    {
+      clientX: x,
+      clientY: y,
+      buttons: 0,
+      pointerId: 1,
+      pointerType: "mouse",
+      isPrimary: true,
+      bubbles: true,
+    },
+  );
+  await nextFrame(ctx.page, 2);
+}
+
 /** `route`, given the press point, replaces the gesture's straight path; a `{ pause }` entry holds still. */
 // fallow-ignore-next-line complexity
 export async function pointerGesture(ctx, gesture, pre, route) {
@@ -603,6 +625,8 @@ export async function pointerGesture(ctx, gesture, pre, route) {
   }
   const rec = await recording(ctx.page, false);
   const smooth = smoothness(rec);
+  if (ctx.stray)
+    await strayMove(ctx, press, pre.map.toScreen([0, 1].map((i) => pressComp[i] + STRAY_BY[i])));
   await ctx.page.mouse.up();
   const lastQuad = gesture === "crop" ? last.m.outline : last.m.visible;
   return {
@@ -645,7 +669,7 @@ async function nudgeGesture(ctx, pre) {
 export async function inStudio({ browser, spec, dir, files, url, evidence }, drive) {
   const context = await browser.createBrowserContext();
   const page = await context.newPage();
-  const ctx = { page, dir, files, handles: null };
+  const ctx = { page, dir, files, handles: null, stray: spec.stray };
   const consoleErrors = [];
   page.on("pageerror", (e) => consoleErrors.push(e.message));
   evidence.shots = {};
 
@@ -31,14 +31,30 @@ const product = (axes) =>
 const caseId = (c) =>
   [c.gesture, c.gsap, c.placement, `r${c.rotation}`, c.nesting, `z${c.zoom}`].join("-");
 
+// An <img> as Studio places a dropped picture, full-frame or smaller, at gsap none (one tween for contrast).
+// Each pointer gesture also gets the stray no-button move a hand drag meets (case.mjs strayMove).
+// The id's placement token is letters only, so `-img(contain|cover)` selects them.
+function imageCases() {
+  const fitted = product({
+    fit: ["contain", "cover"],
+    size: ["full", "small"],
+    nesting: AXES.nesting,
+    gesture: GESTURES,
+  }).map((c) => ({ ...c, gsap: "none" }));
+  return fitted
+    .concat({ fit: "contain", size: "full", nesting: "root", gesture: "move", gsap: "tween" })
+    .map((c) => ({ ...c, placement: `img${c.fit}${c.size}`, rotation: 0, zoom: 100, stray: true }))
+    .map((c) => ({ id: caseId(c), ...c }));
+}
+
 /** `pr` is a smaller slice for CI; its final size is still an open decision. */
 export function buildGrid(kind = "full") {
   return (
     product({ ...AXES, gesture: GESTURES })
       // xPercent only exists through GSAP on the target itself.
       .filter((c) => c.placement !== "xpercent" || !["none", "idle"].includes(c.gsap))
       .map((c) => ({ id: caseId(c), ...c, other: c.gsap === "idle" }))
-      .concat(dragCases())
+      .concat(dragCases(), imageCases())
       .filter((c) => kind !== "pr" || (c.zoom === 100 && c.nesting === "root"))
   );
 }
@@ -59,6 +75,32 @@ const OTHER_PLACEMENT_CSS = {
   center: "left: 75%; top: 75%; translate: -50% -50%;",
 };
 
+// A flat 4:3 picture in the target colour: contain letterboxes it in a 16:9 box and cover crops it.
+const IMAGE_SRC =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAEElEQVR42mP4cEABjhhwcgCyFhXBc/l8wQAAAABJRU5ErkJggg==";
+
+/** The target's composition frame in composition px: nothing outside it reaches the producer frame. */
+export function frameOf(spec) {
+  const h = spec.nesting === "nested" ? NESTED_HOST : { left: 0, top: 0, ...COMPOSITION };
+  return { left: h.left, top: h.top, right: h.left + h.width, bottom: h.top + h.height };
+}
+
+// fallow-ignore-next-line complexity
+function targetBox(spec) {
+  if (!spec.fit)
+    return `${PLACEMENT_CSS[spec.placement]} width: ${TARGET.width}px; height: ${TARGET.height}px;`;
+  const f = frameOf(spec);
+  const [w, h] = spec.size === "full" ? [f.right - f.left, f.bottom - f.top] : [640, 360];
+  const at = spec.size === "full" ? [0, 0] : [640, 360];
+  // The box colour fills contain's letterbox, so the producer's pixel box is the element box the bench measures.
+  return `left: ${at[0]}px; top: ${at[1]}px; width: ${w}px; height: ${h}px; object-fit: ${spec.fit};`;
+}
+
+const targetEl = (spec, attrs) =>
+  spec.fit
+    ? `<img id="target"${attrs} src="${IMAGE_SRC}" alt="" />`
+    : `<div id="target"${attrs}>${targetText(spec)}</div>`;
+
 const TEXT = "Edit accuracy bench";
 const targetText = (spec) => (spec.text ? TEXT : "");
 
@@ -69,7 +111,7 @@ function targetCss(spec) {
     : "";
   // White text reads as full coverage in the render's luminance box, so it leaves that metric alone.
   const text = spec.text ? " color: #ffffff; font: 28px/1.2 sans-serif;" : "";
-  return `#target { position: absolute; ${PLACEMENT_CSS[spec.placement]} width: ${TARGET.width}px; height: ${TARGET.height}px; background: ${TARGET.color};${rotate}${text} }${other}`;
+  return `#target { position: absolute; ${targetBox(spec)} background: ${TARGET.color};${rotate}${text} }${other}`;
 }
 
 // fallow-ignore-next-line complexity
@@ -99,7 +141,7 @@ function rootHtml(spec) {
   const nested = spec.nesting === "nested";
   const body = nested
     ? `<div id="scene-sub" data-composition-id="sub" data-composition-src="compositions/sub.html" data-start="0" data-duration="4" data-track-index="1" style="position: absolute; left: ${NESTED_HOST.left}px; top: ${NESTED_HOST.top}px; width: ${NESTED_HOST.width}px; height: ${NESTED_HOST.height}px; overflow: hidden"></div>`
-    : `<div id="target" class="clip" data-start="0" data-duration="4" data-track-index="1">${targetText(spec)}</div>${spec.other ? `\n      <div id="other" class="clip" data-start="0" data-duration="4" data-track-index="2"></div>` : ""}`;
+    : `${targetEl(spec, ' class="clip" data-start="0" data-duration="4" data-track-index="1"')}${spec.other ? `\n      <div id="other" class="clip" data-start="0" data-duration="4" data-track-index="2"></div>` : ""}`;
   const script = spec.gsap === "none" ? "" : timelineScript("main", nested ? [] : gsapLines(spec));
   return `<!doctype html>
 <html lang="en">
@@ -125,7 +167,7 @@ function subHtml(spec) {
   const script = spec.gsap === "none" ? "" : timelineScript("sub", gsapLines(spec));
   return `<template id="sub-template">
   <div id="sub" data-composition-id="sub" data-width="${NESTED_HOST.width}" data-height="${NESTED_HOST.height}">
-    <div id="target">${targetText(spec)}</div>${spec.other ? `\n    <div id="other"></div>` : ""}
+    ${targetEl(spec, "")}${spec.other ? `\n    <div id="other"></div>` : ""}
     <style>
       #sub { position: relative; width: ${NESTED_HOST.width}px; height: ${NESTED_HOST.height}px; background: ${BACKGROUND}; overflow: hidden; }
       ${targetCss(spec)}
 
@@ -11,7 +11,7 @@ import { parseArgs } from "node:util";
 import { execSync, spawn } from "node:child_process";
 import puppeteer from "puppeteer-core";
 import { resolveHeadlessShellPath } from "../../../../engine/src/index.ts";
-import { buildGrid, writeFixture } from "./grid.mjs";
+import { buildGrid, frameOf, writeFixture } from "./grid.mjs";
 import { killServers, runCase, startServer, stopServer } from "./case.mjs";
 import { runSequence } from "./sequences.mjs";
 import { METRICS, score, writeReport } from "./report.mjs";
@@ -70,9 +70,16 @@ const errorResult = (error, log) => ({
 
 const liveRoots = new Set();
 
+const clipTo = (b, f) => ({
+  left: Math.max(b.left, f.left),
+  top: Math.max(b.top, f.top),
+  right: Math.min(b.right, f.right),
+  bottom: Math.min(b.bottom, f.bottom),
+});
+
 /** Render drift: the reloaded preview's visible box against the target's pixel box in a producer frame. */
-async function withRender(dir, decoder, { reloaded, ...measured }, evidence) {
-  const expected = aabb(reloaded.visible);
+async function withRender(spec, dir, decoder, { reloaded, ...measured }, evidence) {
+  const expected = clipTo(aabb(reloaded.visible), frameOf(spec));
   const render = await renderBox(dir, decoder).catch((error) => ({ error }));
   // A producer failure fails render alone; the case's other metrics still count.
   if (render.error)
@@ -117,7 +124,7 @@ async function runOne(spec, browser, decoder, port) {
     });
     await stopServer(server);
     server = null;
-    result = await withRender(dir, decoder, measured, evidence);
+    result = await withRender(spec, dir, decoder, measured, evidence);
   } catch (error) {
     result = errorResult(error, log);
   } finally {