32 lines
1.6 KiB
JavaScript
32 lines
1.6 KiB
JavaScript
import { chromium } from 'playwright';
|
|
/* For every grid object: does the drawn geometry fit inside its viewBox, and is the drawing
|
|
centred in the space its card gives it. */
|
|
const [,, url, selector, width = '1440'] = process.argv;
|
|
const browser = await chromium.launch();
|
|
const page = await browser.newPage({ viewport: { width: Number(width), height: 1000 } });
|
|
await page.goto(url, { waitUntil: 'networkidle' });
|
|
const rows = await page.evaluate((sel) => {
|
|
return Array.from(document.querySelectorAll(sel)).map((svg, i) => {
|
|
const vb = svg.viewBox.baseVal;
|
|
const b = svg.querySelector('g').getBBox();
|
|
const overflow = {
|
|
left: +(vb.x - b.x).toFixed(1),
|
|
right: +((b.x + b.width) - (vb.x + vb.width)).toFixed(1),
|
|
top: +(vb.y - b.y).toFixed(1),
|
|
bottom: +((b.y + b.height) - (vb.y + vb.height)).toFixed(1),
|
|
};
|
|
const clipped = Object.values(overflow).some((v) => v > 0.5);
|
|
/* Vertical centring: the gap above the drawing vs the gap below it, inside the card. */
|
|
const card = svg.closest('li');
|
|
const title = card.querySelector('h2, h3');
|
|
const body = card.querySelector('p');
|
|
const r = svg.getBoundingClientRect();
|
|
const above = +(r.top - title.getBoundingClientRect().bottom).toFixed(1);
|
|
const below = +(body.getBoundingClientRect().top - r.bottom).toFixed(1);
|
|
return { i, viewBox: `${vb.x} ${vb.y} ${vb.width} ${vb.height}`, clipped, overflow, above, below, offBy: +(above - below).toFixed(1) };
|
|
});
|
|
}, selector);
|
|
console.table(rows);
|
|
console.log('any clipped:', rows.some((r) => r.clipped));
|
|
await browser.close();
|