/**
* /design-motion capture -> check -> export, end to end on real Chromium and
* real ffmpeg (bin/gstack-motion-capture.ts feeding bin/gstack-motion-encode).
* The unit tests pin the argument lists and the PSNR parser on synthetic
* lines; this file proves the two bins agree on the capture directory
* (frame names from the window start, capture.json, still.png and mask.png at
* the frame scale) and that the checks judge real ffmpeg output both ways.
* The fixture page is a 0.5 s loop at 640x100 (captured 1920x300), so a run is
* 54 frames. Self-skips when the Playwright Chromium bundle, ffmpeg or ffprobe
* is missing.
*/
import { describe, expect, test } from 'bun:test';
import * as fs from 'fs';
import * as os from 'os';
import * as path from 'path';
import { chromium } from 'playwright';
import { clockMs, stepMs } from '../lib/motion-capture';
import { resolveFfmpeg, type CaptureManifest } from '../lib/motion-encode';
const ROOT = path.resolve(import.meta.dir, '..');
const CAPTURE = path.join(ROOT, 'bin', 'gstack-motion-capture.ts');
const ENCODE = path.join(ROOT, 'bin', 'gstack-motion-encode');
const CHROMIUM = process.env.GSTACK_CHROMIUM_PATH || (() => { try { return chromium.executablePath(); } catch { return ''; } })();
const FFMPEG = resolveFfmpeg(process.env, bin => Bun.which(bin), p => fs.existsSync(p));
const FFPROBE = Bun.which('ffprobe');
const READY = Boolean(CHROMIUM) && fs.existsSync(CHROMIUM) && Boolean(FFMPEG) && Boolean(FFPROBE) && process.platform !== 'win32';
const PHASES = ['--intro-end', '0.1', '--dissolve-at', '0.3', '--empty-from', '0.4', '--layout', 'cards'];
function page(o: { loops: boolean; contract?: boolean }): string {
const contract = o.contract === false ? '' : `
window.__lt = 0;
window.__start = () => { window.__lt = 0; paint(0); };
window.__tick = dt => { window.__lt = ${o.loops ? '(window.__lt + dt) % 0.5' : 'window.__lt + dt'}; paint(window.__lt); };`;
return `
`;
}
function run(argv: string[]) {
const r = Bun.spawnSync(argv, { stdout: 'pipe', stderr: 'pipe', timeout: 150_000, env: process.env });
return { code: r.exitCode, out: r.stdout.toString(), err: r.stderr.toString() };
}
function capture(dir: string, html: string, o: { mask?: string | false } = {}) {
const file = path.join(dir, 'page.html');
fs.writeFileSync(file, html);
return run([CAPTURE, file, '--size', '640x100', '--cycle', '0.5', '--out', path.join(dir, 'cap'), ...(o.mask === false ? [] : ['--mask', o.mask ?? '.card'])]);
}
describe.skipIf(!READY)('design-motion pipeline on real Chromium and ffmpeg', () => {
// Value: protects=a looping page captures 54 frames whose manifest, still and mask the encoder accepts, checks clean and exports a one-cycle MP4;
// fails_when=frame naming, start frame, tick units, still/mask scale or the export window drift between the two bins, a failed re-export
// truncates the last good file, or a GIF fps that drifts against the cycle is accepted; why_new=only the paid marathon case runs both bins;
// seam=none; no_claim=a 0.5 s synthetic loop stands in for an agent-built page; GIF quality and X upload acceptance are not checked
test('a looping page captures, checks clean and exports one cycle', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
const cap = path.join(dir, 'cap');
const c = capture(dir, page({ loops: true }));
expect(c.code, c.err).toBe(0);
expect(c.out.trim().split('\n').pop()).toBe(`CAPTURE_OK frames=54 window=14+30 scale=3.0000 dir=${cap}`);
expect(fs.readdirSync(path.join(cap, 'frames')).sort()).toEqual(Array.from({ length: 54 }, (_, i) => `${String(i).padStart(5, '0')}.png`));
expect(fs.existsSync(path.join(cap, 'still.png')) && fs.existsSync(path.join(cap, 'mask.png'))).toBe(true);
const m = JSON.parse(fs.readFileSync(path.join(cap, 'capture.json'), 'utf-8')) as CaptureManifest;
expect([m.scale, m.windowStart, m.windowFrames, m.frames, m.mask]).toEqual([3, 14, 30, 54, 'mask.png']);
expect(m.loopTime.length).toBe(54);
expect(m.loopTime.slice(0, 15).every(t => t === 0)).toBe(true);
expect(m.loopTime[15]).toBeCloseTo(stepMs(15) / 1000, 9);
for (let i = 15; i < 44; i++) expect(m.loopTime[i]!).toBeCloseTo(clockMs(i, 15) / 1000, 6);
const check = run([ENCODE, 'check', cap, ...PHASES]);
expect(check.code, check.out + check.err).toBe(0);
for (const id of ['seam', 'empty-beat', 'rest', 'overflow']) expect(check.out).toContain(`MOTION_CHECK: ${id} pass`);
expect(check.out).toContain(`CONTACT_SHEET ${path.join(cap, 'contact-sheet.png')}`);
expect(check.out.trim().split('\n').pop()).toBe('MOTION_RESULT: clean');
const exp = run([ENCODE, 'export', cap, '--name', 'pipe', '--formats', 'mp4,800', '--pad', '#f4f1ea']);
expect(exp.code, exp.out + exp.err).toBe(0);
const gifSize = fs.statSync(path.join(cap, 'pipe-800x500.gif')).size;
const broken = run([ENCODE, 'export', cap, '--name', 'pipe', '--formats', '800', '--crop', '4000:2500:0:0']);
expect(broken.code).toBe(1);
expect(broken.out).toContain('EXPORT_FAILED pipe-800x500.gif');
expect(fs.statSync(path.join(cap, 'pipe-800x500.gif')).size).toBe(gifSize);
expect(fs.readdirSync(cap).filter(f => f.startsWith('.partial-'))).toEqual([]);
const drift = run([ENCODE, 'export', cap, '--name', 'pipe', '--formats', 'loop', '--gif-fps', '7']);
expect(drift.code).toBe(2);
expect(drift.err).toContain('must be a whole fps from 1 to 50');
expect(run([ENCODE, 'export', cap, '--name', 'pipe', '--formats', '800', '--small-fps', '60']).code).toBe(2);
expect(exp.out).toContain(`EXPORT_OK ${path.join(cap, 'pipe-x.mp4')}`);
expect(exp.out).toContain(`EXPORT_OK ${path.join(cap, 'pipe-800x500.gif')}`);
const probe = run([FFPROBE!, '-v', 'error', '-select_streams', 'v:0', '-count_frames', '-show_entries', 'stream=width,height,nb_read_frames', '-of', 'csv=p=0', path.join(cap, 'pipe-x.mp4')]);
expect(probe.out.trim()).toBe('1920,300,30');
const same = run([ENCODE, 'compare', path.join(cap, 'still.png'), path.join(cap, 'still.png')]);
expect(same.code).toBe(0);
expect(same.out).toStartWith('PSNR inf dB');
const sizes = run([ENCODE, 'compare', path.join(cap, 'still.png'), path.join(cap, 'contact-sheet.png')]);
expect(sizes.code).toBe(1);
expect(sizes.err).toContain('COMPARE_FAILED');
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 240_000);
// Value: protects=a page that never returns to its empty state fails the seam and empty-beat checks on real ffmpeg output and exits 1;
// fails_when=finite psnr_avg lines stop parsing or a failed job stops counting toward MOTION_RESULT; why_new=unit verdicts use hand-written stats lines; seam=none;
// no_claim=only the seam/empty-beat failure class; a rest or overflow failure is not reproduced here
test('a page that does not loop fails the seam and the empty beat', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
const c = capture(dir, page({ loops: false }));
expect(c.code, c.err).toBe(0);
const check = run([ENCODE, 'check', path.join(dir, 'cap'), ...PHASES]);
expect(check.code).toBe(1);
expect(check.out).toMatch(/MOTION_CHECK: seam fail 1 frame\(s\) differ, worst \d+\.\d\d dB at compared frame \d+ \(frame 14 vs 44\)/);
expect(check.out).toMatch(/MOTION_CHECK: empty-beat fail \d+ frame\(s\) differ/);
expect(check.out).toContain('MOTION_CHECK: rest pass');
expect(check.out).toContain('MOTION_CHECK: overflow pass');
expect(check.out.trim().split('\n').pop()).toBe('MOTION_RESULT: 2 failed');
const relaxed = run([ENCODE, 'check', path.join(dir, 'cap'), ...PHASES, '--min-db', '0']);
expect(relaxed.code, relaxed.out + relaxed.err).toBe(0);
expect(relaxed.out).toMatch(/^MOTION_SETTINGS: .*--min-db 0; defaults otherwise$/m);
const blank = run([ENCODE, 'check', path.join(dir, 'cap'), ...PHASES, '--min-db', '']);
expect(blank.code).toBe(2);
expect(blank.err).toContain("--min-db must be a non-negative number, got ''");
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 240_000);
// Value: protects=a page without window.__start/__tick stops with MOTION_CONTRACT_MISSING and exit 1 before writing capture.json;
// fails_when=the contract probe is dropped and frames of an unanimated page are recorded as a capture; why_new=no test loads a page in the capture bin; seam=none;
// no_claim=only the missing-contract case; a contract that throws mid-capture is not exercised
test('a page without the capture contract is refused', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
const c = capture(dir, page({ loops: true, contract: false }));
expect(c.code).toBe(1);
expect(c.err).toContain('MOTION_CONTRACT_MISSING');
expect(fs.existsSync(path.join(dir, 'cap', 'capture.json'))).toBe(false);
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 120_000);
// Value: protects=a capture reuses an --out only when its own marker is there: a foreign still.png is refused and kept, the retry after a
// refused page succeeds, and a later failed capture clears the previous manifest; the no-mask run ends 'clean (overflow not checked)'
// and an unbounded --mask-grow is refused; fails_when=the marker test, the cleanup, the no-mask result or the grow bound is dropped;
// why_new=review cycles found a refused retry and a deleted foreign dir; seam=none; no_claim=a crash mid-frame-loop is not simulated
test('an --out is reused only when this tool wrote it', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
const cap = path.join(dir, 'cap');
fs.mkdirSync(cap);
fs.writeFileSync(path.join(cap, 'still.png'), 'not ours');
const foreign = capture(dir, page({ loops: true, contract: false }));
expect(foreign.code).toBe(2);
expect(foreign.err).toContain('already holds still.png but no .gstack-motion-capture marker');
expect(fs.readFileSync(path.join(cap, 'still.png'), 'utf-8')).toBe('not ours');
fs.rmSync(path.join(cap, 'still.png'));
const c = capture(dir, page({ loops: true, contract: false }));
expect(c.code).toBe(1);
expect(c.err).toContain('MOTION_CONTRACT_MISSING');
const retry = capture(dir, page({ loops: true }), { mask: false });
expect(retry.code, retry.err).toBe(0);
expect(retry.out).toContain('CAPTURE_OK frames=54');
const check = run([ENCODE, 'check', cap, ...PHASES]);
expect(check.code, check.out + check.err).toBe(0);
expect(check.out).toContain('MOTION_CHECK: overflow skipped');
expect(check.out.trim().split('\n').pop()).toBe('MOTION_RESULT: clean (overflow not checked)');
const grow = run([ENCODE, 'check', cap, ...PHASES, '--mask-grow', '33']);
expect(grow.code).toBe(2);
expect(grow.err).toContain('--mask-grow must be a whole number of pixels from 0 to 32');
expect(capture(dir, page({ loops: true, contract: false })).code).toBe(1);
expect(fs.existsSync(path.join(cap, 'capture.json')) || fs.existsSync(path.join(cap, 'still.png'))).toBe(false);
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 240_000);
// Value: protects=a mask that paints the whole frame fails overflow in a cards layout and is reported as not checked only for an app
// frame, instead of blacking out every pixel and passing; a --mask that matches nothing stops the capture before any frame;
// fails_when=the coverage guard, its app-only skip or the empty-mask check is dropped; why_new=adversarial review reproduced each;
// seam=none; no_claim=only a full-frame mask; the 90% line and a grow-driven failure are not swept
test('a mask that covers the frame fails cards and is not checked for an app frame; an empty mask stops the capture', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
expect(capture(dir, page({ loops: true }), { mask: 'html' }).code).toBe(0);
const cards = run([ENCODE, 'check', path.join(dir, 'cap'), ...PHASES]);
expect(cards.code).toBe(1);
expect(cards.out).toMatch(/MOTION_CHECK: overflow fail the mask covers \d+% of the frame; in a cards layout mark only the card containers/);
const app = run([ENCODE, 'check', path.join(dir, 'cap'), ...PHASES, '--layout', 'app']);
expect(app.code, app.out + app.err).toBe(0);
expect(app.out).toMatch(/MOTION_CHECK: overflow skipped \(the app frame's surfaces cover \d+% of the frame/);
expect(app.out.trim().split('\n').pop()).toBe('MOTION_RESULT: clean (overflow not checked)');
const empty = capture(dir, page({ loops: true }), { mask: '[data-nope]' });
expect(empty.code).toBe(1);
expect(empty.err).toContain("MOTION_MASK_EMPTY: --mask '[data-nope]' matches no element");
expect(fs.readdirSync(path.join(dir, 'cap', 'frames'))).toEqual([]);
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 240_000);
// Value: protects=a CSS transition that a story starts with a class toggle is seeked from the frame it appears, not from the last
// __mark, so it eases instead of popping; fails_when=new animations are seeded at __mark again; why_new=adversarial probe showed a
// story transition exported ~100 ms ahead while every check passed; seam=none; no_claim=one linear opacity transition
test('a story transition started by a class toggle eases from the frame it starts', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
const c = capture(dir, `
`, { mask: false });
expect(c.code, c.err).toBe(0);
const probe = run([FFMPEG!, '-hide_banner', '-loglevel', 'error', '-i', path.join(dir, 'cap', 'frames', '00026.png'), '-vf', 'format=gray,signalstats,metadata=print:key=lavfi.signalstats.YAVG:file=-', '-f', 'null', '-']);
const yavg = Number(/YAVG=([\d.]+)/.exec(probe.out)?.[1]);
expect(yavg).toBeGreaterThan(90);
expect(yavg).toBeLessThan(170);
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 120_000);
// Value: protects=a page whose __tick never returns stops with MOTION_CAPTURE_FAILED instead of hanging the capture forever;
// fails_when=the per-frame 10 s bound is dropped; why_new=adversarial probe hung at 100% renderer CPU; seam=none;
// no_claim=only a spinning __tick; a hung screenshot is not bounded
test('a __tick that never returns fails the capture', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
const c = capture(dir, '', { mask: false });
expect(c.code).toBe(1);
expect(c.err).toMatch(/MOTION_CAPTURE_FAILED: frame \d+ took longer than 10 s/);
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 120_000);
// Value: protects=an offscreen loading=lazy image no longer hangs the still render (img.decode() never settles on it), and --still writes
// one PNG at --scale (the Step 3 fidelity reference);
// fails_when=the eager switch and the 30 s bound are both dropped and --still waits forever; why_new=adversarial probe hung at 90 s; seam=none;
// no_claim=one lazy image on a local page; a slow network image is bounded only by the 30 s timer
test('a page with an offscreen lazy image renders its still', () => {
const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'motion-pipeline-'));
try {
fs.writeFileSync(path.join(dir, 'dot.png'), Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==', 'base64'));
const file = path.join(dir, 'lazy.html');
fs.writeFileSync(file, '
');
const out = path.join(dir, 'still.png');
const still = run([CAPTURE, file, '--size', '640x100', '--still', out, '--scale', '2']);
expect(still.code, still.err).toBe(0);
expect(still.out.trim()).toBe(`STILL_OK ${out}`);
expect(still.err).not.toContain('still loading');
const png = fs.readFileSync(out);
expect([png.readUInt32BE(16), png.readUInt32BE(20)]).toEqual([1280, 200]);
} finally {
fs.rmSync(dir, { recursive: true, force: true });
}
}, 200_000);
});