archvillainetteandClaude Opus 5
ea36116e62
Throwaway. Tokenises the theme's literal colours so candidate palettes can be swapped in the browser, adds three candidates (Plum Noir one-metal, two-metal pewter, two-metal plus a champagne inset), a WCAG checker, a seeder and the screenshots they are judged on. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
49 lines
1.7 KiB
JavaScript
49 lines
1.7 KiB
JavaScript
// Did the candidate CSS actually reach the pixels? Computed-style probe for #53.
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
const { chromium } = require('playwright');
|
|
const BASE = process.env.BASE || 'http://localhost:4567';
|
|
const read = (f) => fs.readFileSync(path.join(__dirname, f), 'utf8');
|
|
const base = read('_base-plumnoir.css');
|
|
const CANDIDATES = { baseline: '', a: base, b: base + read('candidate-b.css') };
|
|
|
|
const PROBES = [
|
|
['body', 'backgroundColor'],
|
|
['[component="post"]', 'backgroundColor'],
|
|
['[component="post"] .post-header, [component="post"] .topic-item-header', 'color'],
|
|
['.timeago', 'color'],
|
|
['[component="post"]', 'borderTopColor'],
|
|
['.topic-title, h1', 'color'],
|
|
['a[href^="/user/"]', 'color'],
|
|
];
|
|
|
|
(async () => {
|
|
const browser = await chromium.launch();
|
|
const page = await browser.newPage({ viewport: { width: 1600, height: 1000 } });
|
|
await page.goto(BASE + '/login');
|
|
await page.fill('#username', 'admin');
|
|
await page.fill('#password', 'Admin12345!');
|
|
await page.click('#login');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
const rows = {};
|
|
for (const [name, css] of Object.entries(CANDIDATES)) {
|
|
await page.goto(BASE + '/topic/2', { waitUntil: 'networkidle' });
|
|
if (css) await page.addStyleTag({ content: css });
|
|
rows[name] = await page.evaluate(
|
|
(probes) =>
|
|
probes.map(([sel, prop]) => {
|
|
const el = document.querySelector(sel);
|
|
return el ? getComputedStyle(el)[prop] : 'MISSING';
|
|
}),
|
|
PROBES,
|
|
);
|
|
}
|
|
PROBES.forEach(([sel, prop], i) => {
|
|
console.log(
|
|
`${sel} ${prop}\n baseline ${rows.baseline[i]}\n a ${rows.a[i]}\n b ${rows.b[i]}`,
|
|
);
|
|
});
|
|
await browser.close();
|
|
})();
|