120 lines
11 KiB
JavaScript
120 lines
11 KiB
JavaScript
#!/usr/bin/env node
|
|
import assert from 'node:assert/strict';
|
|
import { createServer } from 'node:http';
|
|
import { readFile, mkdir } from 'node:fs/promises';
|
|
import { extname, resolve } from 'node:path';
|
|
import { chromium } from 'playwright';
|
|
|
|
const root = resolve('frontend');
|
|
const shots = resolve('plans/search-button-final-shots');
|
|
await mkdir(shots, { recursive: true });
|
|
const mime = { '.html':'text/html', '.js':'text/javascript', '.css':'text/css', '.json':'application/json', '.woff2':'font/woff2', '.png':'image/png', '.svg':'image/svg+xml' };
|
|
const server = createServer(async (req,res) => {
|
|
const path = resolve(root, '.' + (new URL(req.url,'http://local').pathname === '/' ? '/index.html' : new URL(req.url,'http://local').pathname));
|
|
if (!path.startsWith(root + '/')) { res.writeHead(403).end(); return; }
|
|
try { const body=await readFile(path); res.writeHead(200, {'Content-Type':mime[extname(path)] || 'application/octet-stream'}).end(body); }
|
|
catch { res.writeHead(404).end(); }
|
|
});
|
|
await new Promise(r=>server.listen(0,'127.0.0.1',r));
|
|
const origin=`http://127.0.0.1:${server.address().port}`;
|
|
const layouts=['classic','f7-swipe','glass-stage','bento-hub','sanctuary-stage','broadcaster','contemplative','liturgical','living-hymnal'];
|
|
const themes=['dark','light','contrast'];
|
|
const only=process.argv.includes('--only')?process.argv[process.argv.indexOf('--only')+1]:null;
|
|
const failures=[];
|
|
const ratio=(a,b)=>{const l=c=>{c/=255;return c<=.04045?c/12.92:((c+.055)/1.055)**2.4;};const lum=x=>.2126*l(x[0])+.7152*l(x[1])+.0722*l(x[2]);const [hi,lo]=[lum(a),lum(b)].sort((x,y)=>y-x);return(hi+.05)/(lo+.05);};
|
|
const fail=(ok,msg)=>{if(!ok)failures.push(msg);};
|
|
const browser=await chromium.launch({headless:true});
|
|
try {
|
|
const context=await browser.newContext({viewport:{width:390,height:844},deviceScaleFactor:2,serviceWorkers:'block'});
|
|
await context.route('**/*',route=>route.request().url().startsWith(origin)?route.continue():route.abort());
|
|
const page=await context.newPage();
|
|
page.on('pageerror',e=>failures.push('page error: '+e.message));
|
|
for(const layout of layouts) for(const theme of themes) {
|
|
if(only&&only!==`${layout}/${theme}`)continue;
|
|
await context.addInitScript(({layout,theme})=>localStorage.setItem('_ytpdata',JSON.stringify({playlists:[],history:[],queue:[],settings:{layout,theme}})),{layout,theme});
|
|
await page.setViewportSize({width:390,height:844});
|
|
await page.goto(origin,{waitUntil:'domcontentloaded'});
|
|
await page.waitForFunction(({layout,theme})=>document.documentElement.dataset.layout===layout&&document.documentElement.dataset.theme===theme, {layout,theme},{timeout:10000});
|
|
await page.waitForFunction(()=>document.querySelector('.search-btn')&&getComputedStyle(document.querySelector('.search-btn')).display!=='none');
|
|
const stylesheet={classic:'theme-classic.css','f7-swipe':'theme-f7.css','glass-stage':'theme-glass.css','bento-hub':'theme-bento-hub.css'}[layout];
|
|
if(stylesheet) await page.waitForFunction(name=>[...document.styleSheets].some(s=>s.href&&s.href.includes(name)),stylesheet,{timeout:10000});
|
|
if(layout==='bento-hub') await page.waitForFunction(()=>document.querySelector('.bento-search-icon')&&document.querySelector('.bento-search-label'),null,{timeout:10000});
|
|
await page.evaluate(()=>document.fonts.ready);
|
|
for(const width of [320,390,768,1280]) {
|
|
await page.setViewportSize({width,height:844});
|
|
await page.waitForTimeout(60);
|
|
await page.mouse.move(-10,-10);
|
|
await page.waitForTimeout(20);
|
|
const before=await page.locator('.search-btn').boundingBox();
|
|
const data=await page.evaluate(()=>{
|
|
const btn=document.querySelector('.search-btn'),form=document.querySelector('#searchForm'),bar=document.querySelector('.topbar');
|
|
const s=getComputedStyle(btn),formS=getComputedStyle(form),barS=getComputedStyle(bar),rootS=getComputedStyle(document.documentElement);
|
|
const canvas=document.createElement('canvas'),ctx=canvas.getContext('2d',{willReadFrequently:true});
|
|
const parseRGBA=c=>{ctx.clearRect(0,0,1,1);ctx.fillStyle='#000';ctx.fillStyle=c;ctx.fillRect(0,0,1,1);const p=ctx.getImageData(0,0,1,1).data;return{rgb:[p[0],p[1],p[2]],a:p[3]/255};};
|
|
const bg1=parseRGBA(rootS.getPropertyValue('--bg-1')).rgb,bg2=parseRGBA(rootS.getPropertyValue('--bg-2')).rgb;
|
|
const composite=(fg,bg,a)=>fg.map((v,i)=>v*a+bg[i]*(1-a));
|
|
const layers=[];for(let e=bar;e&&e!==document.documentElement;e=e.parentElement)layers.push(parseRGBA(getComputedStyle(e).backgroundColor));
|
|
let barSurface=parseRGBA(rootS.backgroundColor).rgb;for(const layer of layers.reverse())barSurface=composite(layer.rgb,barSurface,layer.a);
|
|
const buttonBg=parseRGBA(s.backgroundColor),surface=composite(buttonBg.rgb,barSurface,buttonBg.a);
|
|
const border=parseRGBA(s.borderBottomColor).rgb;
|
|
return{color:s.color,bg:s.backgroundColor,border:s.borderBottomColor,borderWidth:s.borderBottomWidth,minHeight:s.minHeight,height:btn.getBoundingClientRect().height,width:btn.getBoundingClientRect().width,
|
|
formScroll:form.scrollWidth,formClient:form.clientWidth,barScroll:bar.scrollWidth,barClient:bar.clientWidth,right:btn.getBoundingClientRect().right,
|
|
fg:parseRGBA(s.color).rgb,surface,bg1,bg2,barSurface,borderRGB:border,icon:getComputedStyle(btn,'::before').display,bentoIcon:!!btn.querySelector('.bento-search-icon'),bentoIconDisplay:btn.querySelector('.bento-search-icon')&&getComputedStyle(btn.querySelector('.bento-search-icon')).display,bentoLabel:btn.querySelector('.bento-search-label')&&getComputedStyle(btn.querySelector('.bento-search-label')).display,bentoLabelRect:btn.querySelector('.bento-search-label')&&(()=>{const r=btn.querySelector('.bento-search-label').getBoundingClientRect();return{width:r.width,height:r.height,clip:getComputedStyle(btn.querySelector('.bento-search-label')).clipPath}})(),font:s.fontFamily};
|
|
});
|
|
const key=`${layout}/${theme}/${width}`;
|
|
// Search labels are always rendered over the opaque/token-mixed bg-2 surface.
|
|
fail(ratio(data.fg,data.surface)>=4.5,`${key}: label contrast ${ratio(data.fg,data.surface).toFixed(2)}:1 ${JSON.stringify(data)}`);
|
|
if(layout!=='f7-swipe') {
|
|
const boundary=Math.max(ratio(data.borderRGB,data.surface),ratio(data.borderRGB,data.barSurface));
|
|
fail(boundary>=3,`${key}: boundary contrast ${boundary.toFixed(2)}:1 ${JSON.stringify(data)}`);
|
|
}
|
|
fail(data.height>=43.5,`${key}: target height ${data.height}`);
|
|
fail(data.formScroll<=data.formClient+1,`${key}: search row overflows ${data.formScroll}/${data.formClient}`);
|
|
fail(data.barScroll<=data.barClient+1,`${key}: topbar overflows ${data.barScroll}/${data.barClient}`);
|
|
fail(data.right<=width+1,`${key}: button clipped at viewport edge (${data.right})`);
|
|
if(layout==='bento-hub') {
|
|
fail(data.bentoIcon&&data.bentoIconDisplay!=='none',`${key}: Bento injected icon missing/hidden: ${data.bentoIconDisplay}`);
|
|
if(width<=860) fail(data.width<=48&&data.bentoLabelRect?.clip!=='none',`${key}: compact Bento label is not clipped into an icon tile ${JSON.stringify(data)}`);
|
|
else fail(data.bentoLabelRect?.width>0&&data.bentoLabelRect?.clip==='none',`${key}: desktop Bento label is not visible ${JSON.stringify(data)}`);
|
|
}
|
|
await page.mouse.move(-10,-10);
|
|
if(width===390||width===1280)await page.screenshot({path:resolve(shots,`${layout}-${theme}-${width}.png`),fullPage:false});
|
|
}
|
|
await page.setViewportSize({width:390,height:844});
|
|
await page.mouse.move(-10,-10);
|
|
const key=`${layout}/${theme}`;
|
|
const button=page.locator('.search-btn');
|
|
const beforeInteraction=await button.evaluate(e=>({width:e.offsetWidth,height:e.offsetHeight}));
|
|
const normalPaint=await button.evaluate(e=>{const s=getComputedStyle(e);return s.backgroundColor+'|'+s.borderColor+'|'+s.color;});
|
|
await button.hover();
|
|
await page.waitForTimeout(180);
|
|
const hoverPaint=await button.evaluate(e=>{const s=getComputedStyle(e);return{paint:s.backgroundColor+'|'+s.borderColor+'|'+s.color,hover:e.matches(':hover')};});
|
|
fail(hoverPaint.hover&&hoverPaint.paint!==normalPaint,`${key}: hover state is not visible (${normalPaint} -> ${JSON.stringify(hoverPaint)})`);
|
|
await page.mouse.down();
|
|
await page.waitForTimeout(180);
|
|
const active=await button.evaluate(e=>{const s=getComputedStyle(e);return{transform:s.transform,background:s.backgroundColor,color:s.color,active:e.matches(':active')}});
|
|
await page.mouse.up();
|
|
fail(active.active&&(active.transform!=='none'||`${active.background}|${active.color}`!==hoverPaint.paint),`${key}: active state is not visible ${JSON.stringify(active)}`);
|
|
const bounds=await button.evaluate(e=>({width:e.offsetWidth,height:e.offsetHeight}));
|
|
fail(Math.abs(bounds.width-beforeInteraction.width)<.1&&Math.abs(bounds.height-beforeInteraction.height)<.1,`${key}: interaction changed button dimensions`);
|
|
await page.keyboard.press('Tab');
|
|
await button.focus();
|
|
const focus=await button.evaluate(e=>({style:getComputedStyle(e).outlineStyle,width:getComputedStyle(e).outlineWidth}));
|
|
fail(focus.style!=='none'&&parseFloat(focus.width)>=2,`${key}: missing focus-visible indicator (${focus.style}/${focus.width})`);
|
|
await button.evaluate(e=>{e.blur();e.disabled=true;});
|
|
const disabled=await button.evaluate(e=>({opacity:getComputedStyle(e).opacity,cursor:getComputedStyle(e).cursor,borderStyle:getComputedStyle(e).borderStyle}));
|
|
fail(disabled.cursor==='not-allowed'&&(layout==='f7-swipe'?disabled.borderStyle==='none':layout==='bento-hub'?disabled.borderStyle==='solid':disabled.borderStyle==='dashed'),`${key}: disabled feedback missing ${JSON.stringify(disabled)}`);
|
|
await button.evaluate(e=>{e.disabled=false;});
|
|
}
|
|
await page.emulateMedia({reducedMotion:'reduce'});
|
|
for(const layout of ['classic','f7-swipe','bento-hub']) {
|
|
await context.addInitScript(layout=>localStorage.setItem('_ytpdata',JSON.stringify({playlists:[],history:[],queue:[],settings:{layout,theme:'dark'}})),layout);
|
|
await page.goto(origin,{waitUntil:'domcontentloaded'});
|
|
await page.waitForFunction(name=>[...document.styleSheets].some(s=>s.href&&s.href.includes(name)),{classic:'theme-classic.css','f7-swipe':'theme-f7.css','bento-hub':'theme-bento-hub.css'}[layout],{timeout:10000});
|
|
const duration=await page.locator('.search-btn').evaluate(e=>getComputedStyle(e).transitionDuration);
|
|
fail(duration.split(',').every(t=>parseFloat(t)<=0.001),`${layout}/reduced-motion: transition duration ${duration}`);
|
|
}
|
|
await context.close();
|
|
} finally { await browser.close(); await new Promise(r=>server.close(r)); }
|
|
if(failures.length){console.error(failures.join('\n'));process.exitCode=1;}else console.log(`Search button checks passed: ${(only?1:layouts.length*themes.length)*4} layout/theme/width combinations; screenshots saved to ${shots}`);
|