Initial commit 🚀

scripts/object-fit-test.mjs

@@ -0,0 +1,31 @@
+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();