Publish reviewed development agents and WUI draft with recovery evidence (#1497)
This commit is contained in:
@@ -0,0 +1,10 @@
|
||||
import '../brand.js';
|
||||
import {mkdir,writeFile} from 'node:fs/promises';
|
||||
const out=new URL('../assets/logos/',import.meta.url);
|
||||
await mkdir(out,{recursive:true});
|
||||
for(const l of Brand.logos){
|
||||
await writeFile(new URL(`${l.name.toLowerCase()}.svg`,out),`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" fill="#215fac" role="img" aria-label="Mosaic Stack ${l.name} concept">${l.paths}</svg>\n`);
|
||||
}
|
||||
const palettes=Brand.palettes.map(p=>({...p,modes:Object.fromEntries(['light','dim','dark'].map(m=>[m,Brand.tokens(p,m)]))}));
|
||||
await writeFile(new URL('../assets/palettes.json',import.meta.url),JSON.stringify({prototype:true,palettes},null,2)+'\n');
|
||||
console.log('Generated 3 original SVG assets and 30 palette/mode token sets.');
|
||||
@@ -0,0 +1,78 @@
|
||||
// Small CDP client for the installed Chromium. No application dependencies.
|
||||
import { spawn } from 'node:child_process';
|
||||
import { mkdtemp, rm, writeFile } from 'node:fs/promises';
|
||||
import { tmpdir } from 'node:os';
|
||||
import { join } from 'node:path';
|
||||
|
||||
export async function browser() {
|
||||
const profile = await mkdtemp(join(tmpdir(), 'dewey-brand-browser-'));
|
||||
const child = spawn(process.env.CHROMIUM || '/usr/bin/chromium', [
|
||||
'--headless', '--no-first-run', '--no-default-browser-check',
|
||||
'--disable-dev-shm-usage', '--remote-debugging-pipe', `--user-data-dir=${profile}`,
|
||||
], { stdio: ['ignore', 'ignore', 'ignore', 'pipe', 'pipe'] });
|
||||
let id = 0, buffer = '';
|
||||
const pending = new Map();
|
||||
child.stdio[4].on('data', chunk => {
|
||||
buffer += chunk.toString();
|
||||
let end;
|
||||
while ((end = buffer.indexOf('\0')) !== -1) {
|
||||
const message = JSON.parse(buffer.slice(0, end));
|
||||
buffer = buffer.slice(end + 1);
|
||||
if (pending.has(message.id)) {
|
||||
const { resolve, reject, timeout } = pending.get(message.id);
|
||||
clearTimeout(timeout);
|
||||
pending.delete(message.id);
|
||||
message.error ? reject(new Error(JSON.stringify(message.error))) : resolve(message.result);
|
||||
}
|
||||
}
|
||||
});
|
||||
function send(method, params = {}, sessionId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const key = ++id;
|
||||
const timeout = setTimeout(() => { pending.delete(key); reject(new Error(`CDP timeout: ${method}`)); }, 25000);
|
||||
pending.set(key, { resolve, reject, timeout });
|
||||
child.stdio[3].write(JSON.stringify({ id: key, method, params, ...(sessionId ? {sessionId} : {}) }) + '\0');
|
||||
});
|
||||
}
|
||||
const { targetId } = await send('Target.createTarget', { url: 'about:blank' });
|
||||
const { sessionId } = await send('Target.attachToTarget', { targetId, flatten: true });
|
||||
const call = (method, params) => send(method, params, sessionId);
|
||||
await call('Page.enable');
|
||||
await call('Runtime.enable');
|
||||
const evaluate = async expression => {
|
||||
const r = await call('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true });
|
||||
if (r.exceptionDetails) throw new Error(r.exceptionDetails.text + ': ' + r.result.description);
|
||||
return r.result.value;
|
||||
};
|
||||
return {
|
||||
call, evaluate,
|
||||
async viewport(width, height = 1000) {
|
||||
await call('Emulation.setDeviceMetricsOverride', { width, height, deviceScaleFactor: 1, mobile: false });
|
||||
},
|
||||
async navigate(url) {
|
||||
const result = await call('Page.navigate', { url });
|
||||
if (result.errorText) throw new Error(result.errorText);
|
||||
// Bounded page-load check, not an agent wake/watch loop.
|
||||
for (let n = 0; n < 50; n++) {
|
||||
if (await evaluate('document.readyState === "complete"')) break;
|
||||
await new Promise(r => setTimeout(r, 100));
|
||||
}
|
||||
await evaluate('document.fonts.ready.then(() => true)');
|
||||
return result;
|
||||
},
|
||||
async screenshot(path) {
|
||||
const { data } = await call('Page.captureScreenshot', { format: 'png' });
|
||||
await writeFile(path, Buffer.from(data, 'base64'));
|
||||
},
|
||||
async key(key, code = key, modifiers = 0) {
|
||||
const virtual = { Tab: 9, Enter: 13, Escape: 27, ArrowDown: 40, ArrowRight: 39, ' ': 32 }[key];
|
||||
await call('Input.dispatchKeyEvent', { type: 'keyDown', key, code, modifiers, windowsVirtualKeyCode: virtual, text: key === 'Enter' ? '\r' : key.length === 1 ? key : '' });
|
||||
await call('Input.dispatchKeyEvent', { type: 'keyUp', key, code, modifiers, windowsVirtualKeyCode: virtual });
|
||||
},
|
||||
async close() {
|
||||
await send('Browser.close').catch(() => {});
|
||||
if (child.exitCode === null) await new Promise(resolve => child.once('exit', resolve));
|
||||
await rm(profile, { recursive: true, force: true });
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import {browser} from './browser.mjs';
|
||||
import {mkdir,writeFile,readFile} from 'node:fs/promises';
|
||||
import {fileURLToPath} from 'node:url';
|
||||
import assert from 'node:assert/strict';
|
||||
const out=new URL('../evidence/',import.meta.url), downloads=new URL('downloads/',out);
|
||||
await mkdir(downloads,{recursive:true});
|
||||
const report={observedAt:new Date().toISOString(),checks:[],renderedContrast:[]};
|
||||
const b=await browser();
|
||||
const url=new URL('../index.html',import.meta.url).href;
|
||||
const change=async(id,value)=>b.evaluate(`(()=>{const e=document.getElementById(${JSON.stringify(id)});e.value=${JSON.stringify(value)};e.dispatchEvent(new Event('change',{bubbles:true}))})()`);
|
||||
const mode=async value=>b.evaluate(`document.querySelector('[name=mode][value=${value}]').click()`);
|
||||
const screenshot=async(section,name,width=1440)=>{
|
||||
await b.viewport(width,1100);
|
||||
await b.evaluate(`document.getElementById('${section}').scrollIntoView();new Promise(requestAnimationFrame)`);
|
||||
await b.screenshot(new URL(name,out));
|
||||
};
|
||||
try{
|
||||
await b.viewport(1440,1100);await b.navigate(url);
|
||||
// Computed foreground/background values on rendered text, not just token formulas.
|
||||
for(const p of await b.evaluate('Brand.palettes.map(p=>p.id)')) for(const m of ['light','dim','dark']){
|
||||
await change('palette',p);await mode(m);
|
||||
const result=await b.evaluate(`(()=>{
|
||||
const hex=c=>{const n=c.match(/[\\d.]+/g);return '#'+n.slice(0,3).map(v=>Math.round(+v).toString(16).padStart(2,'0')).join('')};
|
||||
const bg=e=>{for(let n=e;n;n=n.parentElement){const c=getComputedStyle(n).backgroundColor;if(c!=='rgba(0, 0, 0, 0)'&&c!=='transparent')return hex(c)}return '#ffffff'};
|
||||
const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT);let n, checks=[];
|
||||
while(n=walker.nextNode()){
|
||||
const e=n.parentElement;if(!n.textContent.trim()||e.closest('script,style,noscript,.sr-only,button:disabled,option'))continue;
|
||||
const rect=e.getBoundingClientRect();if(!rect.width||!rect.height)continue;
|
||||
const style=getComputedStyle(e);if(style.visibility==='hidden'||style.display==='none')continue;
|
||||
const fg=hex(style.color),back=bg(e),ratio=Brand.contrast(fg,back);
|
||||
const large=parseFloat(style.fontSize)>=24||(parseFloat(style.fontSize)>=18.67 && parseFloat(style.fontWeight)>=700);
|
||||
checks.push({text:n.textContent.trim().slice(0,65),fg,bg:back,ratio,minimum:large?3:4.5});
|
||||
}
|
||||
for(const e of document.querySelectorAll('input:not([type=radio]),textarea,select')){
|
||||
const style=getComputedStyle(e),fg=hex(style.color),back=bg(e);checks.push({text:e.id,fg,bg:back,ratio:Brand.contrast(fg,back),minimum:4.5});
|
||||
}
|
||||
return {count:checks.length,min:Math.min(...checks.map(x=>x.ratio)),failures:checks.filter(x=>x.ratio<x.minimum)};
|
||||
})()`);
|
||||
report.renderedContrast.push({palette:p,mode:m,...result});
|
||||
assert.equal(result.failures.length,0,JSON.stringify({p,m,...result}));
|
||||
}
|
||||
report.checks.push({name:'Computed rendered text contrast across 30 combinations',result:'pass'});
|
||||
await change('palette','harbor');await mode('light');
|
||||
for(const section of ['identity','typography','color','components','review'])await screenshot(section,`section-${section}-light.png`);
|
||||
await screenshot('color','section-color-ultrawide.png',3440);
|
||||
await screenshot('identity','section-identity-mobile.png',390);
|
||||
await screenshot('components','section-components-mobile.png',320);
|
||||
await mode('dark');await screenshot('color','section-color-dark.png');
|
||||
await mode('light');await b.viewport(1440,768);
|
||||
await b.evaluate('document.getElementById("reset").focus()');await b.key('Tab','Tab',8);
|
||||
const focus=await b.evaluate(`(()=>{const e=document.activeElement,r=e.getBoundingClientRect();return {text:e.textContent,top:r.top,bottom:r.bottom,viewport:innerHeight,style:getComputedStyle(e).outlineStyle}})()`);
|
||||
assert(focus.top>=0&&focus.bottom<=focus.viewport,JSON.stringify(focus));
|
||||
await b.screenshot(new URL('focus-short-desktop.png',out));
|
||||
report.checks.push({name:'Sidebar keyboard focus visible at 768 px viewport height',result:'pass',focus});
|
||||
const ax=await b.call('Accessibility.getFullAXTree');
|
||||
const missingNames=ax.nodes.filter(n=>!n.ignored&&['button','combobox','textbox','radio','link'].includes(n.role?.value)&&!n.name?.value);
|
||||
assert.equal(missingNames.length,0);
|
||||
report.checks.push({name:'Chromium accessibility tree gives interactive elements accessible names',result:'pass',namedControls:ax.nodes.filter(n=>!n.ignored&&['button','combobox','textbox','radio','link'].includes(n.role?.value)).length});
|
||||
await b.call('Browser.setDownloadBehavior',{behavior:'allow',downloadPath:fileURLToPath(downloads)});
|
||||
await b.evaluate('document.getElementById("review-notes").value="Prefer Relay. Please refine the small-size gaps.";document.getElementById("download-review").click();document.getElementById("export").click()');
|
||||
// Wait only for these two local browser downloads, bounded at five seconds.
|
||||
let saved;
|
||||
for(let n=0;n<50;n++){
|
||||
try{saved=[await readFile(new URL('mosaic-brand-review.txt',downloads),'utf8'),await readFile(new URL('mosaic-harbor-tokens.json',downloads),'utf8')];break;}catch{await new Promise(r=>setTimeout(r,100));}
|
||||
}
|
||||
assert(saved,'Local downloads did not complete');
|
||||
assert(saved[0].includes('Prefer Relay.'));
|
||||
assert.deepEqual(Object.keys(JSON.parse(saved[1]).modes),['light','dim','dark']);
|
||||
report.checks.push({name:'Review notes and all-three-mode palette JSON downloaded and content-verified',result:'pass'});
|
||||
// Double every computed text size, including authored pixel sizes.
|
||||
await b.viewport(320,1000);
|
||||
await b.evaluate(`(()=>{const sizes=[...document.querySelectorAll('body *')].map(e=>[e,parseFloat(getComputedStyle(e).fontSize)]);for(const[e,size]of sizes)e.style.fontSize=size*2+'px'})()`);
|
||||
let expanded=await b.evaluate('({width:innerWidth,scroll:document.documentElement.scrollWidth})');
|
||||
assert(expanded.scroll<=expanded.width,JSON.stringify(expanded));
|
||||
await b.screenshot(new URL('board-all-text-200-320.png',out));
|
||||
report.checks.push({name:'Every computed text size doubled at 320 px',result:'pass',measurement:expanded});
|
||||
// Font failure and storage denial are injected only into this isolated test browser.
|
||||
await b.call('Network.enable');await b.call('Network.setCacheDisabled',{cacheDisabled:true});
|
||||
await b.call('Network.setBlockedURLs',{urls:['*woff2*']});
|
||||
await b.call('Page.addScriptToEvaluateOnNewDocument',{source:'Object.defineProperty(window,"localStorage",{get(){throw new DOMException("Unavailable","SecurityError")}})'});
|
||||
await b.navigate(url);await change('palette','carmine');await mode('dim');
|
||||
assert.equal(await b.evaluate('document.documentElement.dataset.palette'),'carmine');
|
||||
expanded=await b.evaluate('({width:innerWidth,scroll:document.documentElement.scrollWidth})');
|
||||
assert(expanded.scroll<=expanded.width,JSON.stringify(expanded));
|
||||
assert(!(await b.evaluate('document.fonts.check(\'16px "DM Sans"\')')));
|
||||
await b.screenshot(new URL('board-font-storage-fallback-320.png',out));
|
||||
report.checks.push({name:'Blocked fonts and denied storage: controls still work and fallback reflows',result:'pass',measurement:expanded});
|
||||
}catch(error){report.failure=error.stack;}
|
||||
finally{await b.close();}
|
||||
await writeFile(new URL('detail-verification.json',out),JSON.stringify(report,null,2)+'\n');
|
||||
console.log(JSON.stringify(report,null,2));
|
||||
if(report.failure)process.exitCode=1;
|
||||
@@ -0,0 +1,31 @@
|
||||
"""Fetch public font assets and OFL licenses. Run only when refreshing assets."""
|
||||
from pathlib import Path
|
||||
import urllib.request
|
||||
import re
|
||||
|
||||
out = Path(__file__).resolve().parent.parent / 'assets' / 'fonts'
|
||||
out.mkdir(parents=True, exist_ok=True)
|
||||
fonts = [('DM Sans', 'dm-sans', 'dmsans'), ('IBM Plex Sans', 'ibm-plex-sans', 'ibmplexsans'), ('Manrope', 'manrope', 'manrope')]
|
||||
for family, slug, upstream in fonts:
|
||||
url = 'https://fonts.googleapis.com/css2?family=' + family.replace(' ', '+') + ':wght@400;500;600;700&display=swap'
|
||||
req = urllib.request.Request(url, headers={'User-Agent':'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36'})
|
||||
css = urllib.request.urlopen(req, timeout=25).read().decode()
|
||||
# Google returns one Latin block per requested weight. Keep all four real weights.
|
||||
sources = []
|
||||
for weight in ['400','500','600','700']:
|
||||
blocks = re.findall(r'/\* latin \*/\s*(@font-face\s*\{[^}]+\})', css)
|
||||
block = next((b for b in blocks if f'font-weight: {weight};' in b), None)
|
||||
if not block:
|
||||
raise RuntimeError(f'No Latin block for {family} {weight}')
|
||||
source = re.search(r'url\(([^)]+)\)', block).group(1)
|
||||
data = urllib.request.urlopen(source, timeout=25).read()
|
||||
assert data[:4] == b'wOF2', 'Expected WOFF2'
|
||||
name = f'{slug}-{weight}.woff2'
|
||||
(out / name).write_bytes(data)
|
||||
sources.append(f'{weight}: {source}')
|
||||
license_url = f'https://raw.githubusercontent.com/google/fonts/main/ofl/{upstream}/OFL.txt'
|
||||
license_text = urllib.request.urlopen(license_url, timeout=25).read()
|
||||
assert b'SIL OPEN FONT LICENSE' in license_text
|
||||
(out / f'{slug}-OFL.txt').write_bytes(license_text)
|
||||
(out / f'{slug}-sources.txt').write_text(f'{family}\nCSS: {url}\nLicense: {license_url}\n' + '\n'.join(sources) + '\n')
|
||||
print(f'{family}: 4 WOFF2 weights and OFL license saved')
|
||||
@@ -0,0 +1,41 @@
|
||||
import {browser} from './browser.mjs';
|
||||
import {writeFile,readFile,stat} from 'node:fs/promises';
|
||||
import assert from 'node:assert/strict';
|
||||
const b=await browser(), report={observedAt:new Date().toISOString(),checks:[]};
|
||||
const url=new URL('../index.html',import.meta.url);
|
||||
try{
|
||||
await b.viewport(1440,900);await b.navigate(url.href);
|
||||
const resources=(await b.call('Page.getResourceTree')).frameTree.resources.map(x=>x.url);
|
||||
assert(resources.length>5);assert(resources.every(u=>u.startsWith('file:')));
|
||||
report.checks.push({name:'Entry page loads only local resources',result:'pass',resourceCount:resources.length});
|
||||
const links=await b.evaluate('[...document.querySelectorAll("a[href],link[href],script[src]")].map(x=>x.getAttribute("href")||x.getAttribute("src"))');
|
||||
for(const link of links){
|
||||
if(link.startsWith('#'))assert(await b.evaluate(`!!document.getElementById(${JSON.stringify(link.slice(1))})`),link);
|
||||
else assert((await stat(new URL(link,url))).isFile(),link);
|
||||
}
|
||||
const css=await readFile(new URL('../styles.css',import.meta.url),'utf8');
|
||||
for(const match of css.matchAll(/url\('([^']+)'\)/g))assert((await stat(new URL(match[1],url))).isFile());
|
||||
report.checks.push({name:'HTML and CSS asset links and in-page anchors resolve',result:'pass'});
|
||||
await b.evaluate('document.querySelector(".skip").focus()');await b.key('Enter');
|
||||
assert.equal(await b.evaluate('document.activeElement.id'),'main');
|
||||
report.checks.push({name:'Keyboard skip link moves focus to main',result:'pass'});
|
||||
for(const width of [699,700,959,960,1199,1200,1699,1700,2399,2400]){
|
||||
await b.viewport(width,900);
|
||||
assert(await b.evaluate('document.documentElement.scrollWidth<=innerWidth'),String(width));
|
||||
}
|
||||
report.checks.push({name:'Both sides of five responsive breakpoints have no page overflow',result:'pass',widths:[699,700,959,960,1199,1200,1699,1700,2399,2400]});
|
||||
for(const width of [320,1440]){
|
||||
await b.viewport(width,900);
|
||||
const small=await b.evaluate(`([...document.querySelectorAll('button,input,select,textarea,.controls nav a,.brand-home,.review-link')].filter(e=>!e.disabled).map(e=>{const r=e.getBoundingClientRect();return {id:e.id||e.textContent.trim().slice(0,30),width:r.width,height:r.height}}).filter(r=>r.width<24||r.height<24))`);
|
||||
assert.deepEqual(small,[]);
|
||||
}
|
||||
report.checks.push({name:'Interactive control targets meet 24 px at 320 and 1440 widths',result:'pass',qualification:'Inline prose/footer links use the WCAG inline-text exception.'});
|
||||
await b.evaluate('localStorage.setItem("mosaic-brand-preview-v1", "{broken JSON");');
|
||||
await b.navigate(url.href);
|
||||
assert.equal(await b.evaluate('document.documentElement.dataset.palette'),'harbor');
|
||||
report.checks.push({name:'Malformed preference storage recovers to a usable default',result:'pass'});
|
||||
}catch(error){report.failure=error.stack;}
|
||||
finally{await b.close();}
|
||||
await writeFile(new URL('../evidence/final-verification.json',import.meta.url),JSON.stringify(report,null,2)+'\n');
|
||||
console.log(JSON.stringify(report,null,2));
|
||||
if(report.failure)process.exitCode=1;
|
||||
@@ -0,0 +1,34 @@
|
||||
import { browser } from './browser.mjs';
|
||||
import { mkdir, writeFile } from 'node:fs/promises';
|
||||
const out = new URL('../evidence/', import.meta.url);
|
||||
await mkdir(out, {recursive: true});
|
||||
const b = await browser();
|
||||
const results = [];
|
||||
try {
|
||||
for (const [name, url] of [['t3','https://t3.codes/'], ['buzz','https://buzz.xyz/']]) {
|
||||
const entry = {name, url, observedAt: new Date().toISOString()};
|
||||
try {
|
||||
await b.viewport(1440, 1100);
|
||||
await b.navigate(url);
|
||||
// Allow the reference sites' entrance animation to finish before capture.
|
||||
await new Promise(resolve => setTimeout(resolve, 4000));
|
||||
entry.desktop = await b.evaluate(`({title:document.title, url:location.href,
|
||||
headings:[...document.querySelectorAll('h1,h2,h3')].map(x=>x.textContent.trim()).slice(0,25),
|
||||
controls:[...document.querySelectorAll('button,a,input')].map(x=>({tag:x.tagName,text:(x.textContent||x.getAttribute('aria-label')||x.placeholder||'').trim().slice(0,100),href:x.getAttribute('href')})).filter(x=>x.text).slice(0,65),
|
||||
body:{font:getComputedStyle(document.body).fontFamily,bg:getComputedStyle(document.body).backgroundColor,color:getComputedStyle(document.body).color},
|
||||
text:document.body.innerText.slice(0,6500)})`);
|
||||
await b.screenshot(new URL(`${name}-desktop.png`, out));
|
||||
await b.evaluate('window.scrollTo(0, 1500)');
|
||||
await new Promise(resolve => setTimeout(resolve, 700));
|
||||
await b.screenshot(new URL(`${name}-details.png`, out));
|
||||
await b.evaluate('window.scrollTo(0, 0)');
|
||||
await b.viewport(390, 844);
|
||||
await new Promise(resolve => setTimeout(resolve, 700));
|
||||
await b.screenshot(new URL(`${name}-mobile.png`, out));
|
||||
entry.mobile = await b.evaluate('({width:innerWidth,scrollWidth:document.documentElement.scrollWidth})');
|
||||
} catch(error) {entry.error = error.message;}
|
||||
results.push(entry);
|
||||
}
|
||||
} finally {await b.close();}
|
||||
await writeFile(new URL('references.json', out), JSON.stringify(results, null, 2));
|
||||
console.log(results.map(x=>({name:x.name,title:x.desktop?.title,error:x.error,mobile:x.mobile})));
|
||||
@@ -0,0 +1,106 @@
|
||||
import '../brand.js';
|
||||
import {browser} from './browser.mjs';
|
||||
import {mkdir,writeFile} from 'node:fs/promises';
|
||||
import assert from 'node:assert/strict';
|
||||
const out=new URL('../evidence/',import.meta.url);
|
||||
await mkdir(out,{recursive:true});
|
||||
const report={observedAt:new Date().toISOString(),browser:'Installed headless Chromium through CDP',contrast:[],layouts:[],interactions:[],limits:['No Firefox, Safari, real mobile device, screen reader, or trademark clearance.']};
|
||||
for(const p of Brand.palettes)for(const mode of ['light','dim','dark']){
|
||||
const t=Brand.tokens(p,mode),checks=[];
|
||||
for(const fg of ['text','muted','action','accent','success','warning','danger'])for(const bg of ['canvas','surface','raised'])checks.push({fg,bg,minimum:4.5,ratio:Brand.contrast(t[fg],t[bg])});
|
||||
for(const fg of ['border','focus'])for(const bg of ['canvas','surface','raised'])checks.push({fg,bg,minimum:3,ratio:Brand.contrast(t[fg],t[bg])});
|
||||
checks.push({fg:'onAction',bg:'action',minimum:4.5,ratio:Brand.contrast(t.onAction,t.action)});
|
||||
assert(checks.every(c=>c.ratio>=c.minimum),`${p.id}/${mode} contrast`);
|
||||
report.contrast.push({palette:p.id,mode,checks});
|
||||
}
|
||||
const b=await browser();
|
||||
const url=new URL('../index.html',import.meta.url).href;
|
||||
const change=async(id,value)=>b.evaluate(`(()=>{const e=document.getElementById(${JSON.stringify(id)});e.value=${JSON.stringify(value)};e.dispatchEvent(new Event('change',{bubbles:true}));return e.value})()`);
|
||||
const mode=async value=>b.evaluate(`document.querySelector('[name="mode"][value="${value}"]').click()`);
|
||||
const measure=()=>b.evaluate(`({width:innerWidth,scroll:document.documentElement.scrollWidth,body:document.body.scrollWidth,overflows:[...document.querySelectorAll('main *,header *,aside *')].filter(e=>{const r=e.getBoundingClientRect();return r.width>0&&(r.right>innerWidth+1||r.left < -1)&&!e.classList.contains('sr-only')}).slice(0,10).map(e=>({tag:e.tagName,class:e.className,id:e.id}))})`);
|
||||
try{
|
||||
await b.call('Page.addScriptToEvaluateOnNewDocument',{source:'window.__errors=[];addEventListener("error",e=>window.__errors.push(e.message));addEventListener("unhandledrejection",e=>window.__errors.push(String(e.reason)));'});
|
||||
await b.viewport(1440,1100);
|
||||
await b.navigate(url);
|
||||
assert.equal(await b.evaluate('document.querySelectorAll("[data-palette-card]").length'),10);
|
||||
assert.equal(await b.evaluate('document.querySelectorAll("[data-mark-card]").length'),3);
|
||||
assert.equal(await b.evaluate('document.querySelectorAll("[data-font-card]").length'),3);
|
||||
// All theme choices are applied through the actual page controls, then laid out.
|
||||
for(const p of Brand.palettes)for(const m of ['light','dim','dark']){
|
||||
await change('palette',p.id);await mode(m);
|
||||
assert.equal(await b.evaluate('document.documentElement.dataset.palette'),p.id);
|
||||
assert.equal(await b.evaluate('document.documentElement.dataset.mode'),m);
|
||||
for(const width of [320,390,768,960,1440,1920,2560,3440]){
|
||||
await b.viewport(width,1000);
|
||||
const result=await measure();
|
||||
report.layouts.push({palette:p.id,mode:m,...result});
|
||||
assert(result.scroll<=width && result.body<=width && !result.overflows.length,JSON.stringify(report.layouts.at(-1)));
|
||||
}
|
||||
}
|
||||
await change('palette','harbor');await mode('light');
|
||||
for(const width of [320,390,768,1440,3440]){
|
||||
await b.viewport(width,width===390?844:1100);await b.evaluate('scrollTo(0,0)');
|
||||
await b.screenshot(new URL(`board-light-${width}.png`,out));
|
||||
}
|
||||
for(const m of ['dim','dark']){
|
||||
await mode(m);await b.viewport(1440,1100);await b.evaluate('scrollTo(0,0)');
|
||||
await b.screenshot(new URL(`board-${m}-1440.png`,out));
|
||||
}
|
||||
// Real keyboard: native select, radio navigation, buttons, forward/reverse tab.
|
||||
await mode('light');await b.viewport(1440,1100);
|
||||
await b.evaluate('document.getElementById("palette").focus()');
|
||||
await b.key('ArrowDown');await b.key('Enter');
|
||||
assert.equal(await b.evaluate('document.getElementById("palette").value'),'carmine');
|
||||
await b.evaluate('document.querySelector("[name=mode][value=light]").focus()');
|
||||
await b.key('ArrowRight');
|
||||
assert.equal(await b.evaluate('document.documentElement.dataset.mode'),'dim');
|
||||
const focus=await b.evaluate('({outline:getComputedStyle(document.activeElement.nextElementSibling).outlineStyle,width:getComputedStyle(document.activeElement.nextElementSibling).outlineWidth})');
|
||||
assert.equal(focus.outline,'solid');assert.equal(focus.width,'3px');
|
||||
await b.evaluate('document.querySelector("[data-choose-mark=weave]").focus()');await b.key('Enter');
|
||||
assert.equal(await b.evaluate('document.getElementById("mark").value'),'weave');
|
||||
await b.evaluate('document.querySelector("[data-choose-font=plex]").focus()');await b.key(' ' ,'Space');
|
||||
assert.equal(await b.evaluate('document.getElementById("font").value'),'plex');
|
||||
await b.evaluate('document.getElementById("sample-title").focus()');
|
||||
await b.key('Tab');assert.equal(await b.evaluate('document.activeElement.id'),'sample-state');
|
||||
await b.key('Tab','Tab',8);assert.equal(await b.evaluate('document.activeElement.id'),'sample-title');
|
||||
report.interactions.push({name:'Keyboard selection, native radio arrow, Enter/Space buttons, Tab/Shift+Tab',result:'pass',focus});
|
||||
await change('sample-state','error');
|
||||
assert.equal(await b.evaluate('document.getElementById("sample-title").value'),'Summer reading notes');
|
||||
await b.evaluate('document.getElementById("sample-action").focus()');await b.key('Enter');
|
||||
assert.equal(await b.evaluate('document.getElementById("sample-feedback").dataset.state'),'success');
|
||||
await change('sample-state','loading');assert(await b.evaluate('document.getElementById("sample-action").disabled'));
|
||||
for(const s of ['empty','ready']) {await change('sample-state',s);assert.equal(await b.evaluate('document.getElementById("sample-feedback").dataset.state'),s);}
|
||||
report.interactions.push({name:'All five component states and error recovery preserving input',result:'pass'});
|
||||
// All bundled families loaded, and long labels remain usable at mobile width.
|
||||
for(const f of Brand.fonts){
|
||||
await change('font',f.id);await b.evaluate('document.fonts.ready.then(()=>true)');
|
||||
const loaded=await b.evaluate(`document.fonts.check('16px "${f.name}"')`);
|
||||
assert(loaded,f.name+' font load');
|
||||
await b.viewport(320,1000);assert((await measure()).scroll<=320);
|
||||
}
|
||||
report.interactions.push({name:'Three local fonts loaded and reflowed at 320 px',result:'pass'});
|
||||
await b.evaluate('document.getElementById("review-notes").value="Keep this review note.";document.getElementById("review-notes").dispatchEvent(new Event("input"));document.getElementById("reset").click()');
|
||||
assert.equal(await b.evaluate('document.getElementById("review-notes").value'),'Keep this review note.');
|
||||
await b.navigate(url);
|
||||
assert.equal(await b.evaluate('document.getElementById("review-notes").value'),'Keep this review note.');
|
||||
report.interactions.push({name:'Local preference and note storage; reset preserves notes',result:'pass'});
|
||||
await b.call('Emulation.setEmulatedMedia',{features:[{name:'prefers-reduced-motion',value:'reduce'}]});
|
||||
await mode('dark');await b.key('Tab');
|
||||
assert(await b.evaluate('matchMedia("(prefers-reduced-motion: reduce)").matches'));
|
||||
report.interactions.push({name:'Reduced motion still permits theme and keyboard interaction',result:'pass'});
|
||||
await b.viewport(320,1000);
|
||||
await b.evaluate(`(()=>{const style=document.createElement('style');style.id='spacing-test';style.textContent='*{line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important}p{margin-bottom:2em!important}';document.head.append(style)})()`);
|
||||
let result=await measure();assert(result.scroll<=320,JSON.stringify(result));
|
||||
await b.screenshot(new URL('board-text-spacing-320.png',out));
|
||||
await b.evaluate('document.getElementById("spacing-test").remove();document.documentElement.style.fontSize="200%"');
|
||||
result=await measure();assert(result.scroll<=320,JSON.stringify(result));
|
||||
await b.screenshot(new URL('board-text-200-320.png',out));
|
||||
report.interactions.push({name:'320 px text-spacing overrides and root text size 200%',result:'pass',qualification:'Not browser-native zoom; pixel-sized component text also needs separate scaling checks.'});
|
||||
await b.evaluate('document.documentElement.style.fontSize=""');
|
||||
const errors=await b.evaluate('window.__errors');assert.deepEqual(errors,[]);
|
||||
report.interactions.push({name:'Uncaught page errors',result:'pass',errors});
|
||||
} catch(error){report.failure=error.stack;}
|
||||
finally{await b.close();}
|
||||
await writeFile(new URL('verification.json',out),JSON.stringify(report,null,2)+'\n');
|
||||
console.log(JSON.stringify({contrastSets:report.contrast.length,layouts:report.layouts.length,interactions:report.interactions,failure:report.failure},null,2));
|
||||
if(report.failure)process.exitCode=1;
|
||||
Reference in New Issue
Block a user