124 lines
6.0 KiB
JavaScript
124 lines
6.0 KiB
JavaScript
#!/usr/bin/env node
|
|
/**
|
|
* Real-browser check (headless Firefox AND Chromium) for the colour picker's pixel reading:
|
|
* src/utils/image-sample.ts + palette-extract.ts. jsdom has no canvas, so this bundles them with
|
|
* esbuild, serves a generated PNG from one origin (the page's own) and from a second port
|
|
* (cross-origin), and asserts exact pixel colours, the extracted palette, and the cross-origin
|
|
* failure message.
|
|
*
|
|
* node scripts/e2e-image-sample.mjs (CHROMIUM_PATH / FIREFOX_PATH override binaries)
|
|
*/
|
|
import { chromium, firefox } from '@playwright/test';
|
|
import { build as esbuild } from 'esbuild';
|
|
import http from 'node:http';
|
|
import zlib from 'node:zlib';
|
|
import path from 'node:path';
|
|
import { fileURLToPath } from 'node:url';
|
|
|
|
const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
|
|
const W = 1024, H = 512;
|
|
const RED = [200, 30, 30], BLUE = [20, 20, 200], GREEN = [0, 160, 0];
|
|
|
|
// ---- tiny PNG encoder (RGBA, filter 0)
|
|
function crc32(buf) {
|
|
let c, crc = ~0;
|
|
for (let n = 0; n < buf.length; n++) { c = (crc ^ buf[n]) & 255; for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1; crc = (crc >>> 8) ^ c; }
|
|
return ~crc >>> 0;
|
|
}
|
|
function chunk(type, data) {
|
|
const len = Buffer.alloc(4); len.writeUInt32BE(data.length);
|
|
const td = Buffer.concat([Buffer.from(type), data]);
|
|
const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(td));
|
|
return Buffer.concat([len, td, crc]);
|
|
}
|
|
function png() {
|
|
const raw = Buffer.alloc((W * 4 + 1) * H);
|
|
for (let y = 0; y < H; y++) {
|
|
raw[y * (W * 4 + 1)] = 0;
|
|
for (let x = 0; x < W; x++) {
|
|
const c = x < W / 2 ? RED : y < H / 2 ? BLUE : GREEN;
|
|
raw.set([...c, 255], y * (W * 4 + 1) + 1 + x * 4);
|
|
}
|
|
}
|
|
const ihdr = Buffer.alloc(13); ihdr.writeUInt32BE(W, 0); ihdr.writeUInt32BE(H, 4); ihdr[8] = 8; ihdr[9] = 6;
|
|
return Buffer.concat([Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]), chunk('IHDR', ihdr), chunk('IDAT', zlib.deflateSync(raw)), chunk('IEND', Buffer.alloc(0))]);
|
|
}
|
|
const PNG = png();
|
|
|
|
// ---- bundle the units under test
|
|
const bundle = await esbuild({
|
|
stdin: {
|
|
contents: "export * from './src/utils/image-sample'; export * from './src/utils/palette-extract';",
|
|
resolveDir: root, loader: 'ts',
|
|
},
|
|
bundle: true, write: false, format: 'iife', globalName: 'T', platform: 'browser', logLevel: 'error',
|
|
});
|
|
const BUNDLE = bundle.outputFiles[0].text;
|
|
|
|
// ---- servers: page + same-origin image on A; image only on B (cross-origin)
|
|
const serve = (withPage) => http.createServer((req, res) => {
|
|
if (withPage && req.url === '/page.html') { res.setHeader('content-type', 'text/html'); return res.end('<!doctype html><title>t</title><body></body>'); }
|
|
if (withPage && req.url === '/bundle.js') { res.setHeader('content-type', 'text/javascript'); return res.end(BUNDLE); }
|
|
if (req.url.startsWith('/img.png')) { res.setHeader('content-type', 'image/png'); return res.end(PNG); }
|
|
res.statusCode = 404; res.end();
|
|
});
|
|
const A = serve(true), B = serve(false);
|
|
await Promise.all([new Promise((r) => A.listen(0, '127.0.0.1', r)), new Promise((r) => B.listen(0, '127.0.0.1', r))]);
|
|
const pa = A.address().port, pb = B.address().port;
|
|
|
|
let failures = 0;
|
|
const check = (name, ok, extra = '') => { console.log(`${ok ? 'PASS' : 'FAIL'} ${name}${extra ? ' ' + extra : ''}`); if (!ok) failures++; };
|
|
const hex = (c) => '#' + c.map((n) => n.toString(16).padStart(2, '0')).join('');
|
|
|
|
const targets = [
|
|
['chromium', chromium, process.env.CHROMIUM_PATH],
|
|
['firefox', firefox, process.env.FIREFOX_PATH],
|
|
].filter(([n]) => !process.env.ONLY || process.env.ONLY === n);
|
|
|
|
for (const [name, type, exe] of targets) {
|
|
console.log(`--- ${name}`);
|
|
const browser = await type.launch({ headless: true, ...(exe ? { executablePath: exe } : {}) });
|
|
const page = await browser.newPage();
|
|
await page.goto(`http://127.0.0.1:${pa}/page.html`);
|
|
await page.addScriptTag({ url: `/bundle.js` });
|
|
const r = await page.evaluate(async ({ pa, pb }) => {
|
|
const out = {};
|
|
const same = await T.loadImageForSampling(`/img.png`);
|
|
out.sameOk = same.ok;
|
|
if (same.ok) {
|
|
out.size = [same.width, same.height];
|
|
const d = same.imageData;
|
|
out.red = T.sampleAt(d, 10, 10);
|
|
out.blue = T.sampleAt(d, 400, 10);
|
|
out.green = T.sampleAt(d, 400, 200);
|
|
out.palette = T.extractPalette(d.data);
|
|
const c = document.createElement('canvas');
|
|
same.draw(c);
|
|
out.drawn = [c.width, c.height];
|
|
} else out.sameMsg = same.message;
|
|
const abs = await T.loadImageForSampling(`http://127.0.0.1:${pa}/img.png`);
|
|
out.absSameOk = abs.ok;
|
|
const cross = await T.loadImageForSampling(`http://127.0.0.1:${pb}/img.png`);
|
|
out.cross = cross;
|
|
const bad = await T.loadImageForSampling(`/missing.png`);
|
|
out.bad = bad;
|
|
return out;
|
|
}, { pa, pb });
|
|
check('same-origin image loads', r.sameOk, r.sameMsg || '');
|
|
check('downscaled to 512x256', JSON.stringify(r.size) === '[512,256]', JSON.stringify(r.size));
|
|
check('draw() sizes canvas', JSON.stringify(r.drawn) === '[512,256]');
|
|
check('pixel red exact', r.red === hex(RED), r.red);
|
|
check('pixel blue exact', r.blue === hex(BLUE), r.blue);
|
|
check('pixel green exact', r.green === hex(GREEN), r.green);
|
|
check('palette = red, blue, green in population order (red 50%, blue/green 25%)',
|
|
r.palette[0] === hex(RED) && r.palette.length === 3 && r.palette.includes(hex(BLUE)) && r.palette.includes(hex(GREEN)), JSON.stringify(r.palette));
|
|
check('absolute same-origin URL loads', r.absSameOk);
|
|
check('cross-origin refused', r.cross.ok === false && r.cross.reason === 'cross-origin');
|
|
check('cross-origin message exact', r.cross.message === 'That image comes from another website, so the browser will not let the builder read its colours. Upload it to this site first, then pick from the uploaded copy.');
|
|
check('missing image -> error', r.bad.ok === false && r.bad.reason === 'error', r.bad.message);
|
|
await browser.close();
|
|
}
|
|
A.close(); B.close();
|
|
console.log(failures ? `\n${failures} FAILED` : '\nall passed');
|
|
process.exit(failures ? 1 : 0);
|