diff options
Diffstat (limited to 'tests/gallery-probes')
| -rw-r--r-- | tests/gallery-probes/README.md | 26 | ||||
| -rw-r--r-- | tests/gallery-probes/probe-fams.mjs | 101 | ||||
| -rw-r--r-- | tests/gallery-probes/probe-vstatus.mjs | 209 | ||||
| -rw-r--r-- | tests/gallery-probes/probe.mjs | 753 |
4 files changed, 1089 insertions, 0 deletions
diff --git a/tests/gallery-probes/README.md b/tests/gallery-probes/README.md new file mode 100644 index 0000000..9b5ce7d --- /dev/null +++ b/tests/gallery-probes/README.md @@ -0,0 +1,26 @@ +# Gallery CDP probes + +Behavioral verification for docs/prototypes/panel-widget-gallery.html — headless Chrome +driven over the DevTools protocol (Node global WebSocket/fetch, no playwright). + +- probe.mjs — full regression: card count, size toggle, drag + click behavior under zoom, + zero-exception gate. Run: `node probe.mjs [--shot out.png]`. Update the card-count + assertion when cards are added. +- probe-fams.mjs — screen-color families: default fallbacks pixel-identical, chip clicks + recolor ink/face/trace, dynamic fills stay var-based. + +Both exit nonzero on failure. The gallery's componentization work (widgets.js extraction) +uses a green run of these as its no-regression gate per batch. + +## Traps when writing new checks + +- Dispatch clicks on the element that owns the listener, not an ancestor; drive drags + with in-page synthetic PointerEvents (setPointerCapture stubbed). +- A `find()` by textContent that matches nothing returns undefined, and the dispatch + no-ops silently — the check then fails looking like a widget bug. Match glyphs + exactly against the builder source (e.g. the transport stop button is '⏹' U+23F9, + not '■' U+25A0), and prefer asserting the find() hit before dispatching. +- Reduced-motion emulation must be set before Page.navigate (launch on about:blank, + Emulation.setEmulatedMedia, then navigate) or the page's matchMedia snapshot misses it. +- Kill stale headless Chromes after a crashed run; bracket the pkill pattern + (`pkill -f 'remote-debugging-port=934[5]'`) so it can't match its own command line. diff --git a/tests/gallery-probes/probe-fams.mjs b/tests/gallery-probes/probe-fams.mjs new file mode 100644 index 0000000..7aa2c4b --- /dev/null +++ b/tests/gallery-probes/probe-fams.mjs @@ -0,0 +1,101 @@ +// Verify screen-family chips: presence, default fallbacks intact, live recolor on click. +import { spawn } from 'node:child_process'; +import { writeFileSync } from 'node:fs'; +const PORT = 9335; +const URL = 'file:///home/cjennings/code/archsetup/docs/prototypes/panel-widget-gallery.html'; +const chrome = spawn('google-chrome-stable', ['--headless=new', `--remote-debugging-port=${PORT}`, '--no-first-run', '--window-size=1600,1200', URL], { stdio: 'ignore' }); +const sleep = ms => new Promise(r => setTimeout(r, ms)); +let ws, id = 0; const pending = new Map(); const events = []; +for (let i = 0; i < 40; i++) { try { const l = await (await fetch(`http://127.0.0.1:${PORT}/json`)).json(); const p = l.find(t => t.type === 'page' && t.url.startsWith('file')); if (p) { ws = new WebSocket(p.webSocketDebuggerUrl); break; } } catch {} await sleep(250); } +await new Promise(r => ws.onopen = r); +ws.onmessage = m => { const d = JSON.parse(m.data); if (d.id && pending.has(d.id)) { pending.get(d.id)(d); pending.delete(d.id); } else if (d.method) events.push(d); }; +const send = (method, params = {}) => new Promise(res => { const i = ++id; pending.set(i, res); ws.send(JSON.stringify({ id: i, method, params })); }); +const evl = async e => { const r = await send('Runtime.evaluate', { expression: e, returnByValue: true }); if (r.result.exceptionDetails) throw new Error(JSON.stringify(r.result.exceptionDetails)); return r.result.result.value; }; +const fails = []; +const ok = (n, c, d = '') => { console.log(`${c ? 'PASS' : 'FAIL'} ${n}${d ? ' — ' + d : ''}`); if (!c) fails.push(n); }; +await send('Runtime.enable'); await sleep(1500); + +/* Everything below runs inside try/finally so a failing check cannot orphan the + browser. It could before, and the consequence was worse than a leak: the next + run connected to the survivor on this same port and reported results from a + STALE page — old widgets.js, chips already clicked. A probe that answers from + the previous run is worse than one that crashes. */ +try { + ok('no exceptions on load', events.filter(e => e.method === 'Runtime.exceptionThrown').length === 0); + // count screen-family rows only — card option groups (e.g. card 01) reuse .famchips + const famRows = await evl(`[...document.querySelectorAll('.famchips .lab')].filter(l=>l.textContent==='screen').length`); + ok('6 screen chip rows', famRows === 6, `got ${famRows}`); + + // default fallback: dmx ink computes to gold-hi rgb(255,190,84) + const dmxFill0 = await evl(`getComputedStyle(document.querySelector('#card-R10 svg text')).fill`); + ok('R10 default ink = gold-hi', dmxFill0 === 'rgb(255, 190, 84)', dmxFill0); + + // click green chip on R10 -> ink becomes phos rgb(127,224,160) + await evl(`document.querySelector('#card-R10').querySelector('.fc[title="green"]').click()`); + const dmxFill1 = await evl(`getComputedStyle(document.querySelector('#card-R10 svg text')).fill`); + ok('R10 green chip recolors ink', dmxFill1 === 'rgb(127, 224, 160)', dmxFill1); + + // radar: default sweep line = gold-hi; click green -> phos + const swSel = `document.querySelector('#card-R31')`; + const line0 = await evl(`getComputedStyle(document.querySelectorAll('#card-R31 svg line')[0]).stroke`); + await evl(`${swSel}.querySelector('.fc[title="green"]').click()`); + const line1 = await evl(`getComputedStyle(document.querySelectorAll('#card-R31 svg line')[0]).stroke`); + ok('R31 green chip recolors furniture', line0 !== line1 && line1 === 'rgb(88, 184, 126)', `${line0} -> ${line1}`); + + // scope (CSS widget): trace stroke changes on amber chip + const tr0 = await evl(`getComputedStyle(document.querySelector('.scope polyline')).stroke`); + await evl(`document.querySelector('.scope').closest('.card').querySelector('.fc[title="amber"]').click()`); + const tr1 = await evl(`getComputedStyle(document.querySelector('.scope polyline')).stroke`); + ok('N11 amber chip recolors trace', tr0 !== tr1 && tr1 === 'rgb(255, 190, 84)', `${tr0} -> ${tr1}`); + + // R19: drag still works after family switch (click vfd, then check the handle's set() writes var-based fills) + await evl(`document.querySelector('#card-R19 .fc[title="vfd"]').click()`); + await evl(`document.getElementById('card-R19').gw.set(30,70)`); + const barFill = await evl(`(()=>{const b=document.querySelectorAll('#card-R19 svg rect')[10];return b.getAttribute('fill');})()`); + ok('R19 dynamic fills use vars', barFill.startsWith('var(--scr-'), barFill); + + // R17: face gradient stop resolves to amber face after chip + await evl(`document.querySelector('#card-R17 .fc[title="amber"]').click()`); + const face = await evl(`getComputedStyle(document.querySelector('#card-R17 svg radialGradient stop')).stopColor`); + ok('R17 amber chip retints face', face === 'rgb(216, 203, 166)', face); + + // R57's window is a screen like any other, and it offers ALL six families + // rather than the five its siblings carry — including vfd, the marquee cyan. + const kpFams = await evl(`(()=>{ + const chips = [...document.querySelectorAll('#card-R57 .fc')].map(c => c.title); + const want = ['amber','green','red','blue','vfd','white']; + return want.every(f => chips.includes(f)) ? 'ok' : 'got ' + JSON.stringify(chips); + })()`); + ok('R57 offers all six screen families', kpFams === 'ok', kpFams); + + // Default is the shipped gold, unchanged until a chip is clicked. It reads the + // same as the amber family's --scr-hi because --gold-hi IS #ffbe54 — which is + // what makes the amber default pixel-identical rather than a near-miss. + const kpInk0 = await evl(`getComputedStyle(document.querySelector('#card-R57 .kp-pad text')).fill`); + ok('R57 default ink = gold-hi', kpInk0 === 'rgb(255, 190, 84)', kpInk0); + + // vfd recolors both the ink and the window behind it — a screen is not just its text + await evl(`document.querySelector('#card-R57 .fc[title="vfd"]').click()`); + const kpInk1 = await evl(`getComputedStyle(document.querySelector('#card-R57 .kp-pad text')).fill`); + ok('R57 vfd chip recolors the ink to marquee cyan', kpInk1 === 'rgb(99, 230, 200)', kpInk1); + /* .kp-win, not the first rect on the pad — that one is the faceplate, and + reading it made this check report the plate's colour and fail for the wrong + reason. */ + const kpBg = await evl(`getComputedStyle(document.querySelector('#card-R57 .kp-win')).fill`); + ok('R57 vfd chip recolors the window too', kpBg === 'rgb(6, 16, 13)', kpBg); + + ok('no exceptions after chip clicks', events.filter(e => e.method === 'Runtime.exceptionThrown').length === 0); + + // screenshot the recolored screens region (scroll R31 into view) + await evl(`document.querySelector('#card-R31 svg').scrollIntoView({block:'center'})`); + await sleep(400); + const shot = await send('Page.captureScreenshot', { format: 'png' }); + writeFileSync('fams.png', Buffer.from(shot.result.data, 'base64')); + console.log('shot: fams.png'); +} catch (e) { + console.error('PROBE ERROR: ' + e.message); + fails.push('probe-error'); +} finally { + chrome.kill(); +} +process.exit(fails.length ? 1 : 0); diff --git a/tests/gallery-probes/probe-vstatus.mjs b/tests/gallery-probes/probe-vstatus.mjs new file mode 100644 index 0000000..aefe43b --- /dev/null +++ b/tests/gallery-probes/probe-vstatus.mjs @@ -0,0 +1,209 @@ +// CDP probe for the gallery's baked validation statuses (VSTATUS) — no playwright. +// Usage: node probe-vstatus.mjs +// +// Runs against a throwaway --user-data-dir so localStorage starts empty every run: +// the whole point of VSTATUS is what renders when there is no local state, so a +// probe that inherited a profile's leftover gv-* keys would test nothing. +import { spawn } from 'node:child_process'; +import { mkdtempSync, rmSync, readFileSync } from 'node:fs'; +import { tmpdir } from 'node:os'; +import { join } from 'node:path'; + +const PORT = 9334; +const URL_FILE = '/home/cjennings/code/archsetup/docs/prototypes/panel-widget-gallery.html'; +const URL = 'file://' + URL_FILE; +const PROFILE = mkdtempSync(join(tmpdir(), 'gallery-vstatus-')); + +const chrome = spawn('google-chrome-stable', [ + '--headless=new', `--remote-debugging-port=${PORT}`, + `--user-data-dir=${PROFILE}`, + '--no-first-run', '--no-default-browser-check', + '--window-size=1600,1200', URL, +], { stdio: 'ignore' }); + +const sleep = ms => new Promise(r => setTimeout(r, ms)); +let ws, id = 0; +const pending = new Map(); +const events = []; + +async function connect() { + for (let i = 0; i < 40; i++) { + try { + const list = await (await fetch(`http://127.0.0.1:${PORT}/json`)).json(); + const page = list.find(t => t.type === 'page' && t.url.startsWith('file')); + if (page) { ws = new WebSocket(page.webSocketDebuggerUrl); break; } + } catch { /* retry */ } + await sleep(250); + } + if (!ws) throw new Error('no page target'); + await new Promise(r => ws.onopen = r); + ws.onmessage = m => { + const d = JSON.parse(m.data); + if (d.id && pending.has(d.id)) { pending.get(d.id)(d); pending.delete(d.id); } + else if (d.method) events.push(d); + }; +} +function send(method, params = {}) { + return new Promise(res => { const i = ++id; pending.set(i, res); ws.send(JSON.stringify({ id: i, method, params })); }); +} +async function evl(expr) { + const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true }); + if (r.result.exceptionDetails) throw new Error('eval failed: ' + JSON.stringify(r.result.exceptionDetails.exception?.description || r.result.exceptionDetails.text)); + return r.result.result.value; +} +async function reload() { + await send('Page.reload'); + await sleep(1200); +} +const lampOf = no => `document.querySelector('#card-${no} .vlamp').dataset.v`; + +const fails = []; +const ok = (name, cond, detail = '') => { console.log(`${cond ? 'PASS' : 'FAIL'} ${name}${detail ? ' — ' + detail : ''}`); if (!cond) fails.push(name); }; + +try { + await connect(); + await send('Runtime.enable'); + await send('Page.enable'); + await sleep(1500); + + const errs = events.filter(e => e.method === 'Runtime.exceptionThrown'); + ok('no exceptions on load', errs.length === 0, errs.map(e => e.params.exceptionDetails?.exception?.description).join('; ').slice(0, 200)); + + // 1. VSTATUS exists and is a plain record of no -> state + const shape = await evl(`(()=>{ + if (typeof VSTATUS === 'undefined') return 'undefined'; + if (typeof VSTATUS !== 'object' || VSTATUS === null || Array.isArray(VSTATUS)) return 'not-an-object'; + const bad = Object.entries(VSTATUS).filter(([,v]) => !['amber','green'].includes(v)); + return bad.length ? 'bad-values:' + JSON.stringify(bad.slice(0,3)) : 'ok'; + })()`); + ok('VSTATUS is a no->state record of amber/green only', shape === 'ok', shape); + + // 2. every baked entry names a real card + const orphans = await evl(`Object.keys(VSTATUS).filter(no => !document.getElementById('card-'+no))`); + ok('no baked entry names a missing card', orphans.length === 0, orphans.join(', ')); + + // 2b. the baked block's SOURCE TEXT is in DOM order — it is hand-pasted from + // GVexport, and a block written in some other order reshuffles wholesale on + // the next bake. This reads the file rather than the live object on purpose: + // JS hoists canonical integer keys ('12' before '01') on any object, so + // Object.keys can never report DOM order and asserting it would be + // unsatisfiable. Only the text on disk carries the property that matters. + const src = readFileSync(URL_FILE, 'utf8'); + const block = src.match(/const VSTATUS=\{([\s\S]*?)\n\};/); + if (!block) { + ok('VSTATUS source block is findable', false, 'regex did not match'); + } else { + const textKeys = [...block[1].matchAll(/"([^"]+)"\s*:/g)].map(m => m[1]); + const domOrder = await evl(`[...document.querySelectorAll('.vlamp')].map(l => l.closest('.card').id.slice(5))`); + const want = domOrder.filter(no => textKeys.includes(no)); + ok('VSTATUS source text is in DOM order', + JSON.stringify(textKeys) === JSON.stringify(want), + `baked=${JSON.stringify(textKeys)} want=${JSON.stringify(want)}`); + } + + // 3. with empty localStorage, baked entries render as their baked state + const mismatched = await evl(`Object.entries(VSTATUS) + .filter(([no,v]) => document.querySelector('#card-'+no+' .vlamp').dataset.v !== v) + .map(([no,v]) => no+':want='+v+',got='+document.querySelector('#card-'+no+' .vlamp').dataset.v)`); + ok('baked entries render on a fresh profile', mismatched.length === 0, mismatched.slice(0, 5).join(' ')); + + // 4. a card with no baked entry renders off + const unbaked = await evl(`(()=>{ + const l = [...document.querySelectorAll('.vlamp')].find(l => !(l.closest('.card').id.slice(5) in VSTATUS)); + return l ? l.closest('.card').id.slice(5) + '=' + l.dataset.v : 'none'; + })()`); + ok('an unbaked card defaults to off', unbaked === 'none' || unbaked.endsWith('=off'), unbaked); + + // 5. the tally's done count equals the green lamps on screen + const tally = await evl(`(()=>{ + const green = document.querySelectorAll('.vlamp[data-v="green"]').length; + const row = document.querySelector('.vtally .vrow[data-v="green"] .vn'); + return [green, row ? +row.textContent : -1]; + })()`); + ok('tally done count matches green lamps', tally[0] === tally[1], `lamps=${tally[0]} tally=${tally[1]}`); + + // 6. localStorage wins over the default. Holds with an empty VSTATUS, so this + // check is live from the first commit rather than waiting on a baked block. + const any = await evl(`(()=>{ + const l = [...document.querySelectorAll('.vlamp')].find(l => !(l.closest('.card').id.slice(5) in VSTATUS)); + return l ? l.closest('.card').id.slice(5) : null; + })()`); + if (any) { + await evl(`localStorage.setItem('gv-${any}','green'); ''`); + await reload(); + const set = await evl(lampOf(any)); + ok('localStorage sets an unbaked lamp', set === 'green', `card ${any} -> ${set}`); + await evl(`localStorage.removeItem('gv-${any}'); ''`); + await reload(); + const cleared = await evl(lampOf(any)); + ok('clearing an unbaked lamp returns it to off', cleared === 'off', `card ${any} -> ${cleared}`); + } + + // 6b. localStorage beats baked, both ways — a deliberate un-check must survive a + // baked green, and clearing must fall back rather than stick at off. + const target = await evl(`Object.keys(VSTATUS)[0] || null`); + if (target) { + await evl(`localStorage.setItem('gv-${target}','off'); ''`); + await reload(); + const got = await evl(lampOf(target)); + ok('localStorage off overrides a baked entry', got === 'off', `card ${target} -> ${got}`); + await evl(`localStorage.removeItem('gv-${target}'); ''`); + await reload(); + const back = await evl(lampOf(target)); + const want = await evl(`VSTATUS['${target}']`); + ok('clearing localStorage falls back to baked', back === want, `card ${target} -> ${back}, want ${want}`); + } else { + console.log('SKIP baked-override checks — VSTATUS is empty (nothing baked yet)'); + } + + // 7. the export affordance reproduces what is on screen, in VSTATUS shape + const round = await evl(`(()=>{ + if (typeof GVexport !== 'function') return 'no-GVexport'; + let parsed; + try { parsed = JSON.parse(GVexport()); } catch (e) { return 'not-json: ' + e.message; } + const live = {}; + document.querySelectorAll('.vlamp').forEach(l => { + const v = l.dataset.v; if (v !== 'off') live[l.closest('.card').id.slice(5)] = v; + }); + return JSON.stringify(parsed) === JSON.stringify(live) ? 'ok' + : 'export=' + JSON.stringify(parsed).slice(0,120) + ' live=' + JSON.stringify(live).slice(0,120); + })()`); + ok('GVexport reproduces the live lamp state', round === 'ok', round); + + // 7b. exported keys follow card order. JSON.stringify would hoist canonical + // integer keys ('12') above the rest ('01', 'R05'), reshuffling the baked + // block on every bake; the export builds its text by hand to avoid it. + const order = await evl(`(()=>{ + const keys = [...GVexport().matchAll(/"([^"]+)":/g)].map(m => m[1]); + const dom = [...document.querySelectorAll('.vlamp')] + .filter(l => l.dataset.v !== 'off').map(l => l.closest('.card').id.slice(5)); + return JSON.stringify(keys) === JSON.stringify(dom) ? 'ok' + : 'export=' + JSON.stringify(keys) + ' dom=' + JSON.stringify(dom); + })()`); + ok('exported keys follow card order', order === 'ok', order); + + // 8. export tracks a click, so a mid-walk copy is current + const clicked = await evl(`(()=>{ + const l = document.querySelector('.vlamp'); + const no = l.closest('.card').id.slice(5); + l.click(); + const v = l.dataset.v; + const parsed = JSON.parse(GVexport()); + return (v === 'off' ? !(no in parsed) : parsed[no] === v) ? 'ok' : 'stale: lamp=' + v + ' export=' + JSON.stringify(parsed[no]); + })()`); + ok('GVexport tracks a lamp click', clicked === 'ok', clicked); + + const errs2 = events.filter(e => e.method === 'Runtime.exceptionThrown'); + ok('no exceptions after interaction', errs2.length === 0); +} catch (e) { + console.error('PROBE ERROR: ' + e.message); + fails.push('probe-error'); +} finally { + // Wait for Chrome to actually exit before removing its profile — kill() only + // signals, and a browser still flushing its profile dir makes rmSync throw + // ENOTEMPTY, which would fail an otherwise-green run. + chrome.kill(); + await Promise.race([new Promise(r => chrome.once('exit', r)), sleep(3000)]); + rmSync(PROFILE, { recursive: true, force: true, maxRetries: 5, retryDelay: 200 }); +} +process.exit(fails.length ? 1 : 0); diff --git a/tests/gallery-probes/probe.mjs b/tests/gallery-probes/probe.mjs new file mode 100644 index 0000000..5e95096 --- /dev/null +++ b/tests/gallery-probes/probe.mjs @@ -0,0 +1,753 @@ +// CDP probe for the widget gallery — no playwright, Node global WebSocket/fetch. +// Usage: node probe.mjs [--shot out.png] [--size N] +import { spawn } from 'node:child_process'; +import { writeFileSync } from 'node:fs'; + +const PORT = 9333; +const URL = 'file:///home/cjennings/code/archsetup/docs/prototypes/panel-widget-gallery.html'; +const shotIdx = process.argv.indexOf('--shot'); +const shotPath = shotIdx > -1 ? process.argv[shotIdx + 1] : null; + +const chrome = spawn('google-chrome-stable', [ + '--headless=new', `--remote-debugging-port=${PORT}`, + '--no-first-run', '--no-default-browser-check', + '--window-size=1600,1200', URL, +], { stdio: 'ignore' }); + +const sleep = ms => new Promise(r => setTimeout(r, ms)); +let ws, id = 0; +const pending = new Map(); +const events = []; + +async function connect() { + for (let i = 0; i < 40; i++) { + try { + const list = await (await fetch(`http://127.0.0.1:${PORT}/json`)).json(); + const page = list.find(t => t.type === 'page' && t.url.startsWith('file')); + if (page) { ws = new WebSocket(page.webSocketDebuggerUrl); break; } + } catch { /* retry */ } + await sleep(250); + } + if (!ws) throw new Error('no page target'); + await new Promise(r => ws.onopen = r); + ws.onmessage = m => { + const d = JSON.parse(m.data); + if (d.id && pending.has(d.id)) { pending.get(d.id)(d); pending.delete(d.id); } + else if (d.method) events.push(d); + }; +} +function send(method, params = {}) { + return new Promise(res => { const i = ++id; pending.set(i, res); ws.send(JSON.stringify({ id: i, method, params })); }); +} +async function evl(expr) { + const r = await send('Runtime.evaluate', { expression: expr, returnByValue: true }); + if (r.result.exceptionDetails) throw new Error('eval failed: ' + JSON.stringify(r.result.exceptionDetails.exception?.description || r.result.exceptionDetails.text)); + return r.result.result.value; +} +async function drag(x1, y1, x2, y2) { + await send('Input.dispatchMouseEvent', { type: 'mousePressed', x: x1, y: y1, button: 'left', clickCount: 1 }); + const steps = 8; + for (let i = 1; i <= steps; i++) + await send('Input.dispatchMouseEvent', { type: 'mouseMoved', x: x1 + (x2 - x1) * i / steps, y: y1 + (y2 - y1) * i / steps, button: 'left' }); + await send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: x2, y: y2, button: 'left', clickCount: 1 }); +} + +const fails = []; +const ok = (name, cond, detail = '') => { console.log(`${cond ? 'PASS' : 'FAIL'} ${name}${detail ? ' — ' + detail : ''}`); if (!cond) fails.push(name); }; + +try { + await connect(); + await send('Runtime.enable'); + await send('Page.enable'); + await sleep(1500); + + // 0. console errors / exceptions + const errs = events.filter(e => e.method === 'Runtime.exceptionThrown'); + ok('no exceptions on load', errs.length === 0, errs.map(e => e.params.exceptionDetails?.exception?.description).join('; ').slice(0, 200)); + + // 1. defaults: size=2 (M), card count + ok('default size 2', await evl(`document.body.dataset.size`) === '2'); + const cards = await evl(`document.querySelectorAll('.card').length`); + ok('111 cards', cards === 111, `got ${cards}`); + + // 2. zoom actually scales: card visual width at 3x vs 1x + await evl(`document.querySelector('.szbar .key[data-sz="3"]').click()`); + const w3 = await evl(`document.querySelector('.card').getBoundingClientRect().width`); + await evl(`document.querySelector('.szbar .key[data-sz="1"]').click()`); + const w1 = await evl(`document.querySelector('.card').getBoundingClientRect().width`); + ok('3x wider than 1x', w3 > w1 * 1.8, `w3=${Math.round(w3)} w1=${Math.round(w1)}`); + ok('size chip flips state', await evl(`document.body.dataset.size`) === '1'); + + // 3. behavioral at 3x: fader drag on card 03 (horizontal fader) changes readout + await evl(`document.querySelector('.szbar .key[data-sz="3"]').click()`); + await evl(`document.querySelectorAll('.card')[2].scrollIntoView({block:'center'}); ''`); + await sleep(200); + const fr = await evl(`(()=>{const c=document.querySelectorAll('.card')[2];const f=c.querySelector('.fader');const r=f.getBoundingClientRect();return [r.left,r.top,r.width,r.height];})()`); + const before = await evl(`document.getElementById('rd-03').textContent`); + await drag(fr[0] + fr[2] * 0.2, fr[1] + fr[3] / 2, fr[0] + fr[2] * 0.9, fr[1] + fr[3] / 2); + await sleep(150); + const after = await evl(`document.getElementById('rd-03').textContent`); + ok('fader drag tracks at 3x', before !== after && after !== '—', `'${before}' -> '${after}'`); + + // 4. behavioral at 3x: toggle click on card 01 + await evl(`document.querySelectorAll('.card')[0].scrollIntoView({block:'center'}); ''`); + await sleep(200); + const sw = await evl(`(()=>{const c=document.querySelectorAll('.card')[0];const s=c.querySelector('.switch')||c.querySelector('.stagew > *');const r=s.getBoundingClientRect();return [r.left+r.width/2,r.top+r.height/2];})()`); + const t0 = await evl(`document.getElementById('rd-01').textContent`); + await send('Input.dispatchMouseEvent', { type: 'mousePressed', x: sw[0], y: sw[1], button: 'left', clickCount: 1 }); + await send('Input.dispatchMouseEvent', { type: 'mouseReleased', x: sw[0], y: sw[1], button: 'left', clickCount: 1 }); + await sleep(150); + const t1 = await evl(`document.getElementById('rd-01').textContent`); + ok('toggle click responds at 3x', t0 !== t1, `'${t0}' -> '${t1}'`); + + // 5. card 02 console keys: reading order and per-key tone. LIVE is green + // because --pass is what the kit means by live everywhere else; gold stays + // the generic engaged look. Craig's call, 2026-07-16. + const order = await evl(`[...document.querySelectorAll('#card-02 .key')].map(b => b.textContent)`); + ok('card 02 keys read SCAN, LIVE, MUTED', + JSON.stringify(order) === JSON.stringify(['SCAN', 'LIVE', 'MUTED']), JSON.stringify(order)); + + const engaged = await evl(`(()=>{ + const lit = [...document.querySelectorAll('#card-02 .key')].filter(b => /\\b(on|green|red)\\b/.test(b.className)); + return lit.length === 1 ? lit[0].textContent + ':' + lit[0].className.replace('key ','') : 'lit=' + lit.length; + })()`); + ok('card 02 engages LIVE in green by default', engaged === 'LIVE:green', engaged); + + const muted = await evl(`(()=>{ + const keys = [...document.querySelectorAll('#card-02 .key')]; + keys.find(b => b.textContent === 'MUTED').click(); + const lit = keys.filter(b => /\\b(on|green|red)\\b/.test(b.className)); + return lit.length === 1 ? lit[0].textContent + ':' + lit[0].className.replace('key ','') : 'lit=' + lit.length; + })()`); + ok('card 02 MUTED engages red and releases LIVE', muted === 'MUTED:red', muted); + + const rd02 = await evl(`document.getElementById('rd-02').textContent`); + ok('card 02 readout tracks the engaged key', rd02 === 'MUTED', rd02); + + // 6. card 01 slide toggle: the new tone atoms exist. red/warn on the `on` axis + // let the ENGAGED state be the notable one (mute, record, airplane) — before + // these, red was only reachable via the `off` axis, which colours the + // disengaged state instead. dim offText lets an off toggle recede in a dense + // panel. Craig's call, 2026-07-16. + const atoms = await evl(`(()=>{ + const S = GW.slideToggle.STYLES; + const want = { on: ['amber','green','dark','red','warn'], onText: ['panel','cream','green'], + off: ['dark','red'], offText: ['white','red','black','dim'], + thumb: ['light','dark','chrome','brass'] }; + const missing = []; + for (const [axis, names] of Object.entries(want)) + for (const n of names) if (!S[axis] || !S[axis][n]) missing.push(axis + '.' + n); + return missing.length ? 'missing: ' + missing.join(', ') : 'ok'; + })()`); + ok('slide toggle style atoms present', atoms === 'ok', atoms); + + // 7. presets name intent (a combination), not paint. Every axis a preset names + // must resolve in STYLES — a typo here would silently fall through to the + // stylesheet default and look "nearly right", which is the worst outcome. + const presets = await evl(`(()=>{ + const P = GW.slideToggle.PRESETS, S = GW.slideToggle.STYLES; + if (!P) return 'no PRESETS'; + const AX = GW.slideToggle.AXIS_ORDER; + const bad = []; + for (const [name, p] of Object.entries(P)) { + for (const ax of AX) { + if (!p[ax]) bad.push(name + ' missing ' + ax); + else if (!S[ax][p[ax]]) bad.push(name + '.' + ax + '="' + p[ax] + '" not in STYLES'); + } + } + return bad.length ? bad.join('; ') : Object.keys(P).join(','); + })()`); + ok('every preset names a resolvable style on every axis', + presets === 'panel,run,armed,caution,dark', presets); + + // 7a. the dark preset: neither state lights the pill, so the legend colour is + // the only thing carrying state. Both backgrounds must stay dark while the + // inks diverge — if either pill lights, the preset has lost its point. + const dark = await evl(`(()=>{ + const P = GW.slideToggle.PRESETS.dark, S = GW.slideToggle.STYLES; + const onBg = S.on[P.on].vars['--sw-on-bg'], offBg = S.off[P.off].vars['--sw-off-bg']; + const onInk = S.onText[P.onText].vars['--sw-on-ink'], offInk = S.offText[P.offText].vars['--sw-off-ink']; + if (onBg !== offBg) return 'pills differ: on=' + onBg + ' off=' + offBg; + if (onInk === offInk) return 'inks identical, state unreadable: ' + onInk; + return 'ok'; + })()`); + ok('dark preset keeps both pills dark and the inks distinct', dark === 'ok', dark); + + // 7b. the card claims the preset it is actually in. The widget defaults to + // `panel`, so a preset group with nothing lit would assert "no preset + // active" — false, and exactly the kind of quiet mislabel this walk exists + // to catch. Nothing above this point touches card 01's chips (checks 2-4 + // only toggle its switch, which does not restyle), so the default still + // stands here — but this must stay ABOVE checks 8/8b/9, which do mutate + // the chips. Insert preset-touching checks after them, not before. + const defaultPreset = await evl(`(()=>{ + const pg = [...document.querySelectorAll('#card-01 .fgroup')] + .find(g => g.querySelector('.lab')?.textContent === 'preset'); + if (!pg) return 'no preset group'; + const lit = [...pg.querySelectorAll('.fc')].filter(c => c.classList.contains('on')); + return lit.length === 1 ? lit[0].title : 'lit=' + lit.length; + })()`); + ok('card 01 defaults to the panel preset', defaultPreset === 'panel', defaultPreset); + + // 8. a preset chip drives the widget AND re-syncs the axis chips, so the card + // never shows a combination the widget isn't in. + const applied = await evl(`(()=>{ + const card = document.getElementById('card-01'); + const groups = [...card.querySelectorAll('.fgroup')]; + const pg = groups.find(g => g.querySelector('.lab')?.textContent === 'preset'); + if (!pg) return 'no preset group'; + const armed = [...pg.querySelectorAll('.fc')].find(c => c.title === 'armed'); + if (!armed) return 'no armed chip'; + armed.click(); + const onGroup = groups.find(g => g.querySelector('.lab')?.textContent === 'on'); + const lit = [...onGroup.querySelectorAll('.fc')].filter(c => c.classList.contains('on')); + const brd = card.querySelector('.switch').style.getPropertyValue('--sw-on-brd'); + return (lit.length === 1 ? lit[0].title : 'lit=' + lit.length) + '|' + brd; + })()`); + ok('armed preset drives widget and syncs the on chip', applied === 'red|var(--fail)', applied); + + // 8b. axes are not independent: onText overrides the ink `on` sets, so changing + // `on` after picking an onText must not silently revert the legend while its + // chip still shows lit. Drive it in the hazardous order and check the ink. + const orderSafe = await evl(`(()=>{ + const card = document.getElementById('card-01'); + const groups = [...card.querySelectorAll('.fgroup')]; + const grp = l => groups.find(g => g.querySelector('.lab')?.textContent === l); + const chip = (l, t) => [...grp(l).querySelectorAll('.fc')].find(c => c.title === t); + chip('on text', 'green').click(); // legend green + chip('on', 'dark').click(); // then change the pill — must keep it + const ink = card.querySelector('.switch').style.getPropertyValue('--sw-on-ink'); + const lit = [...grp('on text').querySelectorAll('.fc')].filter(c => c.classList.contains('on')); + return ink + '|' + (lit.length === 1 ? lit[0].title : 'lit=' + lit.length); + })()`); + ok('changing on keeps the chosen onText (chips cannot lie)', + orderSafe === 'var(--sevgrn)|green', orderSafe); + + // 9. diverging on one axis clears the preset — the card stops claiming a preset + // it is no longer in. Re-establishes its own precondition (preset lit) rather + // than inheriting it: the checks above already clicked axis chips, each of + // which clears the preset, so asserting lit===0 without re-lighting first + // would pass against an already-cleared group and prove nothing — including + // against a regression where clearing fired for onText but not for `on`. + const diverged = await evl(`(()=>{ + const groups = [...document.querySelectorAll('#card-01 .fgroup')]; + const grp = l => groups.find(g => g.querySelector('.lab')?.textContent === l); + const litPresets = () => [...grp('preset').querySelectorAll('.fc')].filter(c => c.classList.contains('on')).length; + [...grp('preset').querySelectorAll('.fc')].find(c => c.title === 'run').click(); + const before = litPresets(); + [...grp('on').querySelectorAll('.fc')].find(c => c.title === 'green').click(); + return before + '->' + litPresets(); + })()`); + ok('changing an axis clears the preset selection', diverged === '1->0', diverged); + + // 10. R57 ABC keypad — fills the taxonomy's text x alphanumeric empty cell. + // ABC order is the whole point: it is what industrial keypads do wherever + // the operator can't be assumed to touch-type, and it is what Craig's + // reference photos show. A QWERTY drift here would silently lose the idiom. + const abcOrder = await evl(`(()=>{ + const letters = [...document.querySelectorAll('#card-R57 .kp-key')] + .map(k => k.dataset.k).filter(k => /^[A-Z]$/.test(k)); + const want = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ']; + return JSON.stringify(letters) === JSON.stringify(want) + ? 'ok' : 'got ' + letters.length + ': ' + letters.join(''); + })()`); + ok('R57 carries A-Z in alphabetical order', abcOrder === 'ok', abcOrder); + + const abcDigits = await evl(`(()=>{ + const d = [...document.querySelectorAll('#card-R57 .kp-key')] + .map(k => k.dataset.k).filter(k => /^[0-9]$/.test(k)); + return d.length === 10 ? 'ok' : 'got ' + d.length + ': ' + d.join(''); + })()`); + ok('R57 carries a full 0-9 block', abcDigits === 'ok', abcDigits); + + // 10b. LAYOUT, geometrically. The A-Z check above reads DOM order, which the + // builder controls by push order — it would pass with every key rendered + // in the wrong place. This reads actual x positions instead: letters own + // the left columns, digits the right, and the alphabet column-aligns with + // itself all the way down (the discontinuity Craig caught: A-L used to + // start at column 3 while M-X started at column 0). + const layout = await evl(`(()=>{ + const x = k => { + const g = [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + return g ? Math.round(g.querySelector('rect').getBBox().x) : null; + }; + const colStarts = ['A','D','G','J','M','S','Y'].map(x); + if (new Set(colStarts).size !== 1) return 'alphabet not column-aligned: ' + JSON.stringify(colStarts); + if (!(x('A') < x('1'))) return 'letters not left of digits: A=' + x('A') + ' 1=' + x('1'); + if (!(x('DEL') > x('J'))) return 'DEL not in the block beside the digits: DEL=' + x('DEL') + ' J=' + x('J'); + return 'ok'; + })()`); + ok('R57 letters left, digits right, alphabet column-aligned', layout === 'ok', layout); + + // 10c. DEL sits where the hand already is and CLR is exiled to the corner. + // Frequency and blast radius pull the same way: DEL is constant and costs + // one character, CLR is rare and costs the entry. Pinned because it is a + // deliberate inversion of where they started, easy to "tidy" back. + const reach = await evl(`(()=>{ + const box = k => { + const g = [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + return g ? g.querySelector('rect').getBBox() : null; + }; + const del = box('DEL'), clr = box('CLR'), ent = box('ENT'); + if (!del || !clr || !ent) return 'missing key'; + if (!(del.y < clr.y)) return 'DEL should sit above CLR: DEL.y=' + del.y + ' CLR.y=' + clr.y; + if (!(Math.abs(del.y - ent.y) < 1)) return 'DEL should share the ENT row'; + return 'ok'; + })()`); + ok('R57 DEL is in reach, CLR is in the corner', reach === 'ok', reach); + + // 10d. The three function keys are a cost ladder — DEL takes one character + // back, CLR throws the entry away, ENT commits — so each must read as a + // different key before the legend is read. Checks they are mutually + // distinct and all differ from a plain cap, rather than naming a gradient: + // the palette may be retuned, the distinction may not collapse. + const ladder = await evl(`(()=>{ + const fill = k => { + const g = [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + return g ? g.querySelector('rect').getAttribute('fill') : null; + }; + const f = { DEL: fill('DEL'), CLR: fill('CLR'), ENT: fill('ENT'), plain: fill('A'), digit: fill('1') }; + const fn = [f.DEL, f.CLR, f.ENT]; + if (new Set(fn).size !== 3) return 'function keys not mutually distinct: ' + JSON.stringify(f); + if (fn.includes(f.plain) || fn.includes(f.digit)) return 'a function key wears a plain cap: ' + JSON.stringify(f); + return 'ok'; + })()`); + ok('R57 DEL/CLR/ENT each read as their own key', ladder === 'ok', ladder); + + // 11. typing accumulates, in order. A keypad that registers presses but drops + // or reorders them is the failure that matters for a password field. + const typed = await evl(`(()=>{ + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + for (const c of ['W','I','F','I','7']) key(c).dispatchEvent(new MouseEvent('click', {bubbles:true})); + return document.getElementById('rd-R57').textContent; + })()`); + ok('R57 accumulates typed characters in order', typed.includes('WIFI7'), typed); + + // 11b. DEL takes back ONE character. Without it the only way out of a typo is + // wiping the whole entry, which on a 20-character passphrase means + // starting over — so the check that matters is that DEL is not CLR. + const del = await evl(`(()=>{ + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + const click = k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true})); + click('CLR'); + for (const c of ['C','A','B','S']) click(c); + click('DEL'); + const back = document.getElementById('rd-R57').textContent; + for (let i = 0; i < 6; i++) click('DEL'); // past empty: must not throw or wrap + const floor = document.getElementById('rd-R57').textContent; + return back + ' | ' + floor; + })()`); + // Both halves are asserted: the earlier version computed the past-empty + // state and then never looked at it, so "stops at empty" was a promise in + // the name only — a DEL that wrapped the buffer would have passed. + ok('R57 DEL takes back one character, and stops at empty', + del.split(' | ')[0] === 'CAB' && del.split(' | ')[1] === 'empty', del); + + // 11c. A space must be VISIBLE in the window. The buffer is honest either way, + // but SVG collapses trailing whitespace, so a space rendered as a space is + // a keypress with no feedback: the operator presses SPACE, sees nothing, + // presses again, and now carries two spaces they cannot see in a + // passphrase they can't read back. Checked past the 13-char truncation + // boundary, where there are no pad dots left for a space to displace. + const space = await evl(`(()=>{ + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + const click = k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true})); + const win = () => document.querySelector('#card-R57 text[font-size="14"]').textContent; + click('CLR'); + for (let i = 0; i < 13; i++) click('A'); + const before = win(); + click('SPC'); + const after = win(); + if (before === after) return 'space produced no visible change: ' + JSON.stringify(after); + if (/ $/.test(after)) return 'space rendered as a raw trailing space (invisible): ' + JSON.stringify(after); + click('CLR'); + return 'ok'; + })()`); + ok('R57 a typed space is visible in the window', space === 'ok', space); + + // 12. the two committing keys do different things: ENTER commits the buffer, + // CLEAR empties it. Types its own buffer rather than inheriting one from + // the checks above — they mutate it, so a check that assumed their leftovers + // would pass or fail on their behaviour instead of its own. + const committed = await evl(`(()=>{ + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + const click = k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true})); + click('CLR'); + for (const c of ['N','E','T','5']) click(c); + click('ENT'); + const after = document.getElementById('rd-R57').textContent; + click('CLR'); + return after + ' | ' + document.getElementById('rd-R57').textContent; + })()`); + // Asserts the COMMIT SIGNAL ('ENTER · ' + buf), not merely that the buffer + // is still readable: typing the last character already put NET5 in the + // readout, so /NET5/ was true before ENT was ever pressed. That check + // passed with the ENT branch deleted (the key falls through to buf += 'ENT' + // and NET5 still matches) — it could not fail. + ok('R57 ENTER commits and CLEAR empties', + /^ENTER · NET5$/.test(committed.split(' | ')[0]) && !/NET5/.test(committed.split(' | ')[1]), committed); + + // 13. KEYS is a declarative TABLE, not a function over a DOM event. The Emacs + // port installs this same table into a keymap — it never sees a keydown — + // so a function here would force it to re-derive the widget's intent and + // the two bindings would drift. (README, keyboard contract.) + const keysTable = await evl(`(()=>{ + const K = GW.abcKeypad.KEYS; + if (!K) return 'no KEYS'; + if (typeof K !== 'object' || Array.isArray(K)) return 'KEYS is not a plain table: ' + typeof K; + const missing = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'].filter(c => K[c] !== c); + if (missing.length) return 'unmapped or mis-mapped: ' + missing.join(''); + const want = { Space: 'SPC', Backspace: 'DEL', Enter: 'ENT' }; + for (const [k, v] of Object.entries(want)) if (K[k] !== v) return k + ' -> ' + K[k] + ', want ' + v; + return 'ok'; + })()`); + ok('R57 KEYS is a declarative table covering the plate', keysTable === 'ok', keysTable); + + // 13b. THE contract's first rule: no document-level listener. A widget that + // binds globally types into itself from anywhere on a 110-card page. + // Typing at the body with the card unfocused must do nothing at all. + const unfocused = await evl(`(()=>{ + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + document.activeElement.blur(); + for (const c of ['A','B','C']) document.body.dispatchEvent( + new KeyboardEvent('keydown', { key: c, bubbles: true, cancelable: true })); + return document.getElementById('rd-R57').textContent; + })()`); + ok('R57 ignores keys when it does not have focus', unfocused === 'cleared', unfocused); + + // 13c. Focused, the same keys land — and land through press(), so click and key + // cannot drift apart. + const typedByKey = await evl(`(()=>{ + const pad = document.querySelector('#card-R57 .kp-pad'); + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + pad.focus(); + const send = k => pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true })); + ['n','e','t',' ','5'].forEach(send); // lowercase must normalise; space must map to SPC + const typed = document.getElementById('rd-R57').textContent; + send('Backspace'); + const bs = document.getElementById('rd-R57').textContent; + send('Enter'); + return typed + ' | ' + bs + ' | ' + document.getElementById('rd-R57').textContent; + })()`); + ok('R57 types from the keyboard when focused', typedByKey === 'NET 5 | NET | ENTER · NET ', typedByKey); + + // 13c-2. Click and key must not drift. Both routes are supposed to land in the + // same press(), so the same sequence entered each way must produce an + // identical buffer and readout. Duplicated logic in the handler would + // pass every check above this one and fail here. + const drift = await evl(`(()=>{ + const pad = document.querySelector('#card-R57 .kp-pad'); + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + const rd = () => document.getElementById('rd-R57').textContent; + const seq = ['A','B','SPC','7']; + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + seq.forEach(k => key(k).dispatchEvent(new MouseEvent('click', {bubbles:true}))); + const byClick = rd() + '/' + document.getElementById('card-R57').gw.get(); + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + pad.focus(); + ['A','B',' ','7'].forEach(k => + pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }))); + const byKey = rd() + '/' + document.getElementById('card-R57').gw.get(); + return byClick === byKey ? 'ok' : 'drift: click=' + byClick + ' key=' + byKey; + })()`); + ok('R57 click and key land in the same place', drift === 'ok', drift); + + // 13c-3. press() is the allowlist, not the keydown handler. The handler guards + // the web; the Emacs port installs KEYS into a keymap and calls press + // directly, with no handler in the stack — so a press that trusts its + // caller is a hole in exactly the target the table exists for. + const pressGuard = await evl(`(()=>{ + const card = document.getElementById('card-R57'); + const h = card.gw; + if (!h || !h.press) return 'no handle'; + const key = k => [...card.querySelectorAll('.kp-key')].find(e => e.dataset.k === k); + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + h.press('F1'); h.press('ArrowLeft'); h.press(''); + const junk = h.get(); + h.press('A'); + return junk === '' && h.get() === 'A' ? 'ok' : 'junk=' + JSON.stringify(junk) + ' then=' + JSON.stringify(h.get()); + })()`); + ok('R57 press() filters junk from any caller, not just the keyboard', pressGuard === 'ok', pressGuard); + + // 13c-4. Every key the table maps must be a real plate action, or the Emacs + // port installs a binding that silently does nothing. + const keysSubset = await evl(`(()=>{ + const bad = Object.entries(GW.abcKeypad.KEYS).filter(([,v]) => !GW.abcKeypad.ACTIONS.has(v)); + return bad.length ? 'KEYS maps to non-actions: ' + JSON.stringify(bad) : 'ok'; + })()`); + ok('R57 every KEYS value is a real plate action', keysSubset === 'ok', keysSubset); + + // 13d. preventDefault is spent only where there is a default worth killing. + // Space scrolls and Backspace navigates back, so those are claimed; Tab is + // how the page is navigable and Escape belongs to the audit stepper, so a + // widget that swallows either breaks something it cannot see. + const defaults = await evl(`(()=>{ + const pad = document.querySelector('#card-R57 .kp-pad'); + pad.focus(); + const fired = k => { + const e = new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }); + pad.dispatchEvent(e); + return e.defaultPrevented; + }; + const claimed = { Space: fired(' '), Backspace: fired('Backspace') }; + /* 'A' and 'Enter' are MAPPED keys that must still not be claimed — they reach + the same code path as Space, so they are what catches a preventDefault + moved after the lookup. Tab/Escape/F1 return before it and would stay green + through that regression on their own. */ + const free = { A: fired('A'), Enter: fired('Enter'), Tab: fired('Tab'), Escape: fired('Escape'), F1: fired('F1') }; + if (!claimed.Space || !claimed.Backspace) return 'not claimed: ' + JSON.stringify(claimed); + if (Object.values(free).some(Boolean)) return 'swallowed: ' + JSON.stringify(free); + return 'ok'; + })()`); + ok('R57 claims Space and Backspace, lets Tab/Escape through', defaults === 'ok', defaults); + + // 13e. press() is an allowlist, not a mailbox: an unmapped key must not append. + const unmapped = await evl(`(()=>{ + const pad = document.querySelector('#card-R57 .kp-pad'); + const key = k => [...document.querySelectorAll('#card-R57 .kp-key')].find(e => e.dataset.k === k); + key('CLR').dispatchEvent(new MouseEvent('click', {bubbles:true})); + pad.focus(); + ['F1','ArrowLeft','Home','é','!'].forEach(k => + pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }))); + return document.getElementById('rd-R57').textContent; + })()`); + ok('R57 drops keys that are not on the plate', unmapped === 'cleared', unmapped); + + // 14. R58 index typewriter. THE check: selecting is not committing. Walking the + // stylus over the plate must print nothing at all — that separation IS the + // grammar, and it's the whole reason this card exists next to R57. If a cell + // click ever prints, the card has silently become a keypad with extra steps. + // Reads the BUFFER, not the card readout: the readout is supposed to change + // while hunting ("stylus over g"), and asserting on it would fail a correct + // widget for showing the operator where the pointer is. + const grammar = await evl(`(()=>{ + const cell = c => document.querySelector('#card-R58 .ix-cell[data-c="' + c + '"]'); + const lever = document.querySelector('#card-R58 .ix-lever'); + const buf = () => document.getElementById('card-R58').gw.get(); + document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true})); + const empty = buf(); + ['M','i','g'].forEach(c => cell(c).dispatchEvent(new MouseEvent('click', {bubbles:true}))); + const afterSelecting = buf(); + lever.dispatchEvent(new MouseEvent('click', {bubbles:true})); + return JSON.stringify([empty, afterSelecting, buf()]); + })()`); + ok('R58 selecting prints nothing; only the lever commits', grammar === '["","","g"]', grammar); + + // 14b. The lever prints whatever the stylus is resting on, once per pull — the + // operator's two hands are two separate acts. + const spelled = await evl(`(()=>{ + const cell = c => document.querySelector('#card-R58 .ix-cell[data-c="' + c + '"]'); + const lever = document.querySelector('#card-R58 .ix-lever'); + document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true})); + for (const c of ['M','i','g','n','o','n']) { + cell(c).dispatchEvent(new MouseEvent('click', {bubbles:true})); + lever.dispatchEvent(new MouseEvent('click', {bubbles:true})); + } + return document.getElementById('rd-R58').textContent; + })()`); + ok('R58 stylus + lever spells a word', spelled.includes('Mignon'), spelled); + + // 14c. Pulling the lever twice prints the character twice: the selection stays + // put, which is what lets you type 'ss' without re-aiming. + const repeat = await evl(`(()=>{ + const cell = c => document.querySelector('#card-R58 .ix-cell[data-c="' + c + '"]'); + const lever = document.querySelector('#card-R58 .ix-lever'); + document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true})); + cell('s').dispatchEvent(new MouseEvent('click', {bubbles:true})); + lever.dispatchEvent(new MouseEvent('click', {bubbles:true})); + lever.dispatchEvent(new MouseEvent('click', {bubbles:true})); + return document.getElementById('card-R58').gw.get(); + })()`); + /* Exact, on the buffer. /ss$/ on the readout also matched 'sss', so it passed + even if selecting printed — unable to fail on the one bug this card is about. */ + ok('R58 the lever repeats without re-aiming', repeat === 'ss', JSON.stringify(repeat)); + + // 14d. The plate's whole point, per Craig: it considered the characters a + // keyboard skips. Both cases with no shift key, plus accents, fractions and + // the section mark — that coverage is the idea being preserved from the + // Mignon, where the key ORDER deliberately is not. + const charset = await evl(`(()=>{ + const have = new Set([...document.querySelectorAll('#card-R58 .ix-cell')].map(c => c.dataset.c)); + const need = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZ', ...'abcdefghijklmnopqrstuvwxyz', + ...'0123456789', 'ä','ö','ü','Ä','Ö','Ü','ß','§','½','¼']; + const missing = need.filter(c => !have.has(c)); + return missing.length ? 'missing: ' + missing.join(' ') : 'ok'; + })()`); + ok('R58 plate carries both cases, digits and the extended set', charset === 'ok', charset); + + // 14e. The layout is DATA, so revising the order is a table edit rather than a + // redraw. Craig has already said the keys will change; a layout welded into + // the drawing is one that never does. + const layoutData = await evl(`(()=>{ + const L = GW.indexPlate && GW.indexPlate.LAYOUT; + if (!L) return 'no LAYOUT'; + if (!Array.isArray(L) || !L.every(Array.isArray)) return 'LAYOUT is not a grid'; + const cells = document.querySelectorAll('#card-R58 .ix-cell').length; + const declared = L.flat().filter(Boolean).length; + return cells === declared ? 'ok' : 'drawn ' + cells + ' but declared ' + declared; + })()`); + ok('R58 layout is a declared table the plate renders', layoutData === 'ok', layoutData); + + // 14f. Nothing sits on top of the plate. The lever and CLR started life over the + // last column, burying characters and the PRINT legend, and every check + // above stayed green through it — geometry is invisible to behaviour. The + // gutter is sized off the layout table, so a wider plate must not slide the + // controls back onto the characters. + const clear = await evl(`(()=>{ + const box = sel => { const e = document.querySelector('#card-R58 ' + sel); return e ? e.getBBox() : null; }; + const cells = [...document.querySelectorAll('#card-R58 .ix-cell')].map(c => c.getBBox()); + const right = Math.max(...cells.map(b => b.x + b.width)); + const hits = []; + for (const sel of ['.ix-lever', '.ix-clear']) { + const b = box(sel); + if (!b) { hits.push(sel + ' missing'); continue; } + if (b.x < right) hits.push(sel + ' starts at ' + Math.round(b.x) + ', left of the plate edge ' + Math.round(right)); + } + return hits.length ? hits.join('; ') : 'ok'; + })()`); + ok('R58 lever and CLR clear the plate', clear === 'ok', clear); + + // 14g. The gutter stack doesn't collide with itself. The x-only check above + // can't see this: the lever and legend are anchored to the plate's top and + // CLR to the viewBox, so a SHORTER layout table (five rows is a plausible + // edit) used to ride CLR up over the PRINT legend. Growth was always safe; + // shrink was the trap, which is why VH now takes a floor. + const stack = await evl(`(()=>{ + const bb = sel => { const e = document.querySelector('#card-R58 ' + sel); return e ? e.getBBox() : null; }; + const lever = bb('.ix-lever'), clr = bb('.ix-clear'); + const legend = [...document.querySelectorAll('#card-R58 text')].find(t => t.textContent === 'PRINT'); + if (!lever || !clr || !legend) return 'missing gutter part'; + const lg = legend.getBBox(); + const overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && + a.y < b.y + b.height && b.y < a.y + a.height; + if (overlaps(lever, clr)) return 'lever overlaps CLR'; + if (overlaps(lg, clr)) return 'PRINT legend overlaps CLR'; + if (overlaps(lg, lever)) return 'PRINT legend overlaps the lever'; + const vb = document.querySelector('#card-R58 .ix-pad').viewBox.baseVal; + if (clr.y + clr.height > vb.height) return 'CLR falls outside the viewBox'; + return 'ok'; + })()`); + ok('R58 gutter stack does not collide or overflow', stack === 'ok', stack); + + // 14h. The layout table has no duplicate characters. cells{} and KEYS{} are both + // keyed by character, so a repeat would silently keep only the last: two + // cells would render and both be clickable, but clicking the first would + // jump the stylus across the plate to the second. 14e can't see it — a + // duplicate inflates the drawn count and the declared count equally. + const dupes = await evl(`(()=>{ + const flat = GW.indexPlate.LAYOUT.flat().filter(Boolean); + const seen = new Set(), dup = new Set(); + for (const c of flat) (seen.has(c) ? dup : seen).add(c); + return dup.size ? 'duplicated on the plate: ' + [...dup].join(' ') : 'ok'; + })()`); + ok('R58 layout has no duplicate characters', dupes === 'ok', dupes); + + // 14i. press() is the allowlist for R58 too. R57 has this check; without it, + // press('F1') reaching select() unfiltered would ship green. + const ixPress = await evl(`(()=>{ + const h = document.getElementById('card-R58').gw; + h.press('CLR'); + ['F1', 'PRINT ', '', 'constructor', 'ZZ'].forEach(k => h.press(k)); + return JSON.stringify([h.get(), h.selected()]); + })()`); + ok('R58 press() filters junk from any caller', ixPress.startsWith('[""'), ixPress); + + // 15. R58's keymap comes OUT of the layout table rather than beside it, so + // relaying the plate can't leave a keybinding pointing at a character the + // plate no longer carries. Enter is the lever. + const ixKeys = await evl(`(()=>{ + const K = GW.indexPlate.KEYS, L = GW.indexPlate.LAYOUT; + if (!K) return 'no KEYS'; + const chars = L.flat().filter(Boolean); + const missing = chars.filter(c => K[c] !== c); + if (missing.length) return 'plate chars not mapped: ' + missing.join(' '); + if (K.Enter !== 'PRINT') return 'Enter -> ' + K.Enter + ', want PRINT'; + const extra = Object.keys(K).filter(k => k !== 'Enter' && !chars.includes(k)); + return extra.length ? 'maps keys not on the plate: ' + extra.join(' ') : 'ok'; + })()`); + ok('R58 keymap is derived from the layout, Enter is the lever', ixKeys === 'ok', ixKeys); + + // 15b. THE grammar again, now through the keyboard. Typing a letter must move + // the stylus and print NOTHING. If a keypress ever prints, the card has + // quietly become R57 with a nicer plate, and the one thing it exists to + // demonstrate is gone. + const ixType = await evl(`(()=>{ + const pad = document.querySelector('#card-R58 .ix-pad'); + const h = document.getElementById('card-R58').gw; + const send = k => pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true })); + document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true})); + pad.focus(); + ['M','i','g'].forEach(send); + const afterTyping = h.get(); + const resting = h.selected(); + send('Enter'); + return JSON.stringify([afterTyping, resting, h.get()]); + })()`); + ok('R58 typing selects, Enter prints', ixType === '["","g","g"]', ixType); + + // 15c. The plate holds both cases, so nothing is uppercased on the way in: + // Shift picks the case because 'a' and 'A' are different cells. R57 has to + // uppercase; this one must not, and that difference is the plate's whole + // argument for having no shift key. + const ixCase = await evl(`(()=>{ + const pad = document.querySelector('#card-R58 .ix-pad'); + const h = document.getElementById('card-R58').gw; + const send = k => pad.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true })); + document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true})); + pad.focus(); + send('a'); send('Enter'); + send('A'); send('Enter'); + return h.get(); + })()`); + ok('R58 keeps case: a and A are different cells', ixCase === 'aA', ixCase); + + // 15d. Space isn't on the plate, so it isn't ours: it must scroll the page like + // always. (The missing space cell is a known gap — the real Mignon has a + // separate space key.) + const ixSpace = await evl(`(()=>{ + const pad = document.querySelector('#card-R58 .ix-pad'); + pad.focus(); + const e = new KeyboardEvent('keydown', { key: ' ', bubbles: true, cancelable: true }); + pad.dispatchEvent(e); + return e.defaultPrevented ? 'swallowed space' : 'ok'; + })()`); + ok('R58 leaves Space alone (not on the plate)', ixSpace === 'ok', ixSpace); + + // 15e. Unfocused, it hears nothing — the contract's first rule, on the second + // widget to take keys. + // Asserts nothing CHANGED, rather than expecting a cleared selection: CLR + // is fresh paper, and fresh paper doesn't move the operator's hand, so the + // stylus legitimately stays where the previous check left it. + const ixBlur = await evl(`(()=>{ + const h = document.getElementById('card-R58').gw; + document.querySelector('#card-R58 .ix-clear').dispatchEvent(new MouseEvent('click', {bubbles:true})); + document.activeElement.blur(); + const before = JSON.stringify([h.get(), h.selected()]); + ['Q','Z'].forEach(k => document.body.dispatchEvent( + new KeyboardEvent('keydown', { key: k, bubbles: true, cancelable: true }))); + const after = JSON.stringify([h.get(), h.selected()]); + return before === after ? 'ok' : before + ' -> ' + after; + })()`); + ok('R58 ignores keys when unfocused', ixBlur === 'ok', ixBlur); + + // late exceptions from interactions + const errs2 = events.filter(e => e.method === 'Runtime.exceptionThrown'); + ok('no exceptions after interaction', errs2.length === 0); + + if (shotPath) { + await evl(`window.scrollTo(0,0)`); + await sleep(300); + const shot = await send('Page.captureScreenshot', { format: 'png' }); + writeFileSync(shotPath, Buffer.from(shot.result.data, 'base64')); + console.log('shot: ' + shotPath); + } +} catch (e) { + console.error('PROBE ERROR: ' + e.message); + fails.push('probe-error'); +} finally { + chrome.kill(); +} +process.exit(fails.length ? 1 : 0); |