CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

shots: feature rotate, per-language frame fallback, layout-aware capture selectors

Browse source
This commit is contained in:
CRTkafa 2026-10-24 13:00:48 +08:00
parent 2e1c7cdc3c
commit 61b5fa0623
15 changed files with 355 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

40
tests/browser/feature-fit.browser.ts
View file

@ -63,6 +63,8 @@ describe('shots.feature config', () => {
expect(errs({ frame: 'a.png' })).toEqual([]);
expect(errs({ frame: 'a.png', fit: 'bleed', scale: 1.2 })).toEqual([]);
expect(errs({ frame: 'a.png', fit: 'cover' })).toEqual(["shots.feature.fit: 'contain' | 'bleed'"]);
expect(errs({ frame: 'a.png', rotate: -90 })).toEqual([]);
expect(errs({ frame: 'a.png', rotate: 'left' })).toEqual(['shots.feature.rotate: a number of degrees from -360 to 360']);
expect(errs({ frame: 'a.png', scale: 3 })).toEqual(['shots.feature.scale: a number from 0.5 to 1.5']);
});
});
@ -106,3 +108,41 @@ describe.skipIf(!browser)('feature graphic templates at 1024 x 500 (DOM layout b
} finally { await page.close(); }
}, scaled(30_000));
});
describe.skipIf(!browser)('shots.feature.rotate', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const route = (page: any, html: string, name: string, job: unknown) => page.route('http://t.test/**', (r: { request(): { url(): string }; fulfill(o: unknown): Promise<void> }) => {
const u = new URL(r.request().url());
if (u.pathname === `/${name}`) return r.fulfill({ contentType: 'text/html', body: html });
if (u.pathname === '/job.json') return r.fulfill({ contentType: 'application/json', body: JSON.stringify(job) });
if (u.pathname.startsWith('/frames/')) return r.fulfill({ contentType: 'image/png', body: PNG });
return r.fulfill({ contentType: 'text/css', body: '' });
});
const pal = { bg: ['#123456', '#345678', '#567890'], glow: '#ffffff', ink: '#000000', shadow: 'rgba(0,0,0,.4)' };
test('game template: a -90 phone lies on its side and still fits', async () => {
const page = await browser.newPage({ viewport: { width: 1024, height: 500 } });
try {
const device = featureLayout('game', DEFAULT_PHONE, { rotate: -90 });
expect(device.angle).toBe(-83);
await route(page, readFileSync(join(import.meta.dir, '..', '..', 'cli', 'shots', 'feature.html'), 'utf8'), 'feature.html',
{ style: 'game', phone: DEFAULT_PHONE, logo: false, appName: 'Demo', fonts: { title: 'X' }, frame: 'a.png', device, palette: pal });
await page.goto('http://t.test/feature.html?lang=en');
await page.waitForFunction("document.body.dataset.ready === '1'", null, { timeout: 15000 });
const d = (JSON.parse(await page.evaluate('document.body.dataset.devices')) as { x: number; y: number; w: number; h: number }[])[0]!;
expect(d.w).toBeGreaterThan(d.h); // landscape outline
expect(boxOutside(d, 1024, 500)).toEqual([]);
} finally { await page.close(); }
}, scaled(30_000));
test('bleed template: the frame image is turned and still covers the canvas', async () => {
const page = await browser.newPage({ viewport: { width: 1024, height: 500 } });
try {
await route(page, readFileSync(join(import.meta.dir, '..', '..', 'cli', 'shots', 'feature-bleed.html'), 'utf8'), 'feature-bleed.html',
{ fonts: { title: 'X' }, frame: 'a.png', appName: 'Demo', rotate: -90 });
await page.goto('http://t.test/feature-bleed.html?lang=en');
await page.waitForFunction("document.body.dataset.ready === '1'", null, { timeout: 15000 });
const r = await page.evaluate("(() => { const b = document.querySelector('img.frame').getBoundingClientRect(); return { x: b.x, y: b.y, w: b.width, h: b.height }; })()") as { x: number; y: number; w: number; h: number };
expect(Math.round(r.w)).toBe(1024); expect(Math.round(r.h)).toBe(500); expect(Math.round(r.x)).toBe(0); expect(Math.round(r.y)).toBe(0);
expect(await page.evaluate("document.querySelector('img.frame').style.transform")).toBe('rotate(-90deg)');
} finally { await page.close(); }
}, scaled(30_000));
});