feat(04-06): A35 live-DOM inline-SVG harness check + A17.8 raw-source update + back-patch
Closes the iter-2 BLOCKER 1 resolution end-to-end: the inline-SVG
strategy now has HONEST automated coverage at two layers — source
contract (Task 1 unit tests + the narrowed A17.8 source-bundling
grep) and live-DOM cascade (the NEW host-side A35 harness assertion
that opens welcome.html as a real Puppeteer tab).
- tests/uat/extension-page-harness.ts (A17.8 NARROWED HONESTLY):
swap the data:image/svg+xml URL-grep + .svg filename-grep target
for a raw-source grep — A17.8 now asserts the welcome chunk JS
contains the raw SVG signature `stroke="currentColor"` AND the
canonical `viewBox="0 0 32 32"` (the `?raw` import's output). The
explanatory comment block now DISAVOWS the live-DOM claim and
points at the NEW A35 driver for the runtime injection + cascade
proof. A17.8 is honest source-bundling only.
- tests/uat/lib/harness-page-driver.ts (NEW host-side driveA35):
appended LAST per the iter-2 ADV-2C concern (any driver-pollution
worry is moot since nothing reads A35's return value, AND
welcomePage.close() in finally guarantees no tab leak). driveA35
opens chrome-extension://<id>/src/welcome/welcome.html in a fresh
browser.newPage() tab, waits for the `.welcome-hero__mark svg`
selector at DOMContentLoaded, then runs a single page.evaluate()
that reads four signals: A35.1 inline <svg> present, A35.2
stroke=currentColor, A35.3 getComputedStyle().stroke resolves to
a non-default colour (the real cascade proof), A35.4 no legacy
<img> in the slot. Host-side pattern mirrors driveA32/A33/A34.
- tests/uat/harness.test.ts (orchestrator wiring):
+ driveA35 added to the import block from './lib/harness-page-driver'.
+ driveA35Wrapped closure capturing handles.browser + handles.extensionId
(alongside driveA33Wrapped/driveA34Wrapped).
+ { name: 'A35', drive: driveA35Wrapped } appended as the LAST
entry of the `drivers` array. Total auto-increments via
`drivers.length + 1` (line 580) — no hardcoded count to bump.
+ Architecture banner string (line 283) refreshed with A33, A34,
A35 inline (ADV-2A cosmetic advisory — banner was already stale
pre-04-06; A33+A34 added at the same time).
- .planning/phases/01-stabilize-video-pipeline/01-07-SUMMARY.md
(back-patch, DEFECT 2 resolution):
Flipped 5 lines (22, 47, 82, 135, 205) that carried the now-stale
"deferred to Phase 5" framing for cursor visibility — the
`cursor: 'always'` constraint was opportunistically shipped in
Plan 01-09 (recorder.ts:285) and is verified by Plan 04-06 Task 1
(tests/build/cursor-visibility.test.ts). Each flip is surgical
(single line / single bullet, with explicit "back-patched in
Phase 4 Plan 04-06" citation). Historical commit-description
lines 40, 89, 109, 110 are LEFT unchanged — they describe what
the Phase-1-closure commits literally did at the time, not
forward-looking deferrals.
- .planning/phases/04-harden-clean-up-optional/deferred-items.md
(correction, BLOCKER 2 resolution):
Corrected the misdiagnosed entry from commit 6a989e8. The prior
entry named tests/build/strict-meta-json-validation.test.ts as
failing on a clean tree — that diagnosis was WRONG (the test is
8/8 GREEN in isolation). The real root cause is the pre-existing
04-CONTEXT #9 + #10 parallel-vitest / ffprobe-timeout flake
family (lands non-deterministically on whichever ffprobe / race
test loses the worker race; observed instance this session was
tests/background/webm-remux.test.ts > ffprobe -count_frames,
which is also 5/5 GREEN in isolation). True clean baseline is
184/184 GREEN; 188/188 after Plan 04-06's +4 new tests.
Gates run:
- npx tsc --noEmit exit 0.
- npm run build:test exit 0; dist-test/assets/welcome-CMygHJ_J.js
carries the raw SVG source.
- HEADLESS=1 SKIP_PROD_REBUILD=0 SKIP_LONG_UAT=1 npm run test:uat:
36/36 UAT assertions GREEN (was 35/35; +A35). A17.8 PASS:
currentColorStroke=true, canonicalViewBox=true. A35 live-DOM
probe: svgPresent=true strokeAttr=currentColor
computedStroke="rgb(250, 247, 241)" (linen-50, the
--mks-fg-inverse value flowing through the cascade — the
currentColor strategy WORKS in real Chrome) imgPresent=false.
- All Task 3 acceptance greps PASS: driveA35 count in
harness-page-driver.ts=5, in harness.test.ts=6; name:'A35'=1;
getComputedStyle=6; stroke="currentColor" in
extension-page-harness.ts=4; data:image/svg+xml=0 (grep target
and comment refs both removed).
References:
- 04-06-PLAN.md iter-2 BLOCKER 1 + BLOCKER 2 resolutions.
- .planning/phases/04-harden-clean-up-optional/04-UI-SPEC.md
§"Implementation amendment" (Option A currentColor + inline-SVG).
This commit is contained in:
@@ -2950,3 +2950,173 @@ export async function driveA34(
|
||||
error: pageResult.error,
|
||||
};
|
||||
}
|
||||
|
||||
/* ─── Plan 04-06 — driveA35 (UI-SPEC dark-logo `currentColor` LIVE-DOM proof) ─── */
|
||||
//
|
||||
// A35 is the live-DOM counterpart to the source-only A17.8 source-bundling
|
||||
// grep + the source-only tests/welcome/inline-svg.test.ts source-text pin.
|
||||
// It opens welcome.html as a real Puppeteer tab — welcome.html is a real
|
||||
// web-accessible extension page that builds to dist-test/src/welcome/
|
||||
// welcome.html (vite.test.config.ts:95), exactly the path
|
||||
// chrome.runtime.getURL('src/welcome/welcome.html') resolves to — so
|
||||
// welcome.ts init() runs populateMark() at DOMContentLoaded and the
|
||||
// inline <svg> actually lands in the page DOM. We then read
|
||||
// getComputedStyle().stroke on the injected <svg> to prove the
|
||||
// `currentColor` cascade resolves through the .welcome-hero__mark
|
||||
// wrapper's `color: var(--mks-fg-inverse)` rule.
|
||||
//
|
||||
// This is the iter-2 BLOCKER 1 resolution: the prior iter-1 re-plan
|
||||
// claimed live-DOM injection was delegated to A17.8, but A17.8 is
|
||||
// 100% string-grep on the welcome JS chunk and the harness does NOT
|
||||
// open welcome.html as a live tab (it only fetches the HTML text via
|
||||
// chrome.runtime.getURL + DOMParser.parseFromString — a DETACHED
|
||||
// parse, not a live document). driveA35 is the canonical automated
|
||||
// proof of the runtime injection + cascade. A35 is appended LAST in
|
||||
// the drivers array; nothing reads its return value, so the new tab
|
||||
// cannot pollute later drivers (welcomePage.close() in finally also
|
||||
// guarantees no tab leak).
|
||||
//
|
||||
// Pattern: HOST-SIDE driver (mirrors driveA32/driveA33/driveA34 — NOT
|
||||
// a page.evaluate(window.__mokoshHarness) wrapper). Builds a
|
||||
// CheckRecord[] directly and returns an AssertionRecord. The harness
|
||||
// `page` parameter is unused for navigation (A35 opens its OWN
|
||||
// browser.newPage() tab); kept for driver-list signature uniformity.
|
||||
//
|
||||
// References:
|
||||
// - 04-UI-SPEC.md §"Implementation amendment" (Option A currentColor)
|
||||
// - W3C SVG2 §13.3 (currentColor cascade)
|
||||
// - https://pptr.dev/api/puppeteer.browser.newpage
|
||||
// - tests/welcome/inline-svg.test.ts (the source-text counterpart)
|
||||
// - tests/uat/extension-page-harness.ts A17.8 (the source-bundling
|
||||
// counterpart — narrowed in Plan 04-06 to a raw-source grep only)
|
||||
|
||||
/** Live-DOM navigation + populateMark()-settle ceiling for the
|
||||
* driveA35 welcome-page open. ~5 seconds is generous against the
|
||||
* DOMContentLoaded -> populateMark synchronous handoff
|
||||
* (welcome.ts:194-198) which completes in well under 100ms in
|
||||
* practice; the buffer covers Puppeteer launch jitter + extension
|
||||
* page first-load CSS parse. */
|
||||
const A35_WELCOME_PAGE_TIMEOUT_MS = 5_000;
|
||||
|
||||
/**
|
||||
* driveA35 — UI-SPEC dark-logo `currentColor` strategy LIVE-DOM proof.
|
||||
*
|
||||
* Opens a fresh welcome.html tab via `browser.newPage()`, navigates to
|
||||
* `chrome-extension://<id>/src/welcome/welcome.html` (the canonical
|
||||
* web-accessible welcome page path; the same path A17 already fetches),
|
||||
* waits for `populateMark()` to inject the inline <svg> at
|
||||
* DOMContentLoaded, then runs a single `welcomePage.evaluate(...)` that
|
||||
* reads the LIVE DOM and returns the four signals A35 asserts on:
|
||||
* - svgPresent — `.welcome-hero__mark svg` exists (inline <svg>
|
||||
* injected).
|
||||
* - strokeAttr — that <svg>'s `stroke` attribute === 'currentColor'
|
||||
* (the canonical mark recolour landed correctly).
|
||||
* - computedStroke — `getComputedStyle(svgEl).stroke` is a resolved
|
||||
* non-default colour value (the `currentColor`
|
||||
* cascade resolved through
|
||||
* `.welcome-hero__mark { color: var(--mks-fg-inverse) }`).
|
||||
* Empty / 'none' would mean the cascade is broken.
|
||||
* - imgPresent — `.welcome-hero__mark img` is NULL (the legacy
|
||||
* <img> injection path is gone; we're inlining now).
|
||||
*
|
||||
* Always closes the new tab in a `finally` block so no extra Puppeteer
|
||||
* page leaks across the harness run. Mirrors the driveA33/driveA34
|
||||
* host-side error-handling pattern: on throw, returns an
|
||||
* AssertionRecord with `passed:false` + `error` set.
|
||||
*
|
||||
* @param page Harness page handle (unused for navigation; kept
|
||||
* for driver-list signature uniformity, mirroring
|
||||
* the driveA32 precedent).
|
||||
* @param browser Puppeteer Browser handle from launchHarnessBrowser.
|
||||
* @param extensionId The runtime extension ID (from `handles.extensionId`).
|
||||
*/
|
||||
export async function driveA35(
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars -- signature uniformity per driveA32 precedent; A35 opens its OWN tab via browser.newPage().
|
||||
page: Page,
|
||||
browser: Browser,
|
||||
extensionId: string,
|
||||
): Promise<AssertionRecord> {
|
||||
const checks: CheckRecord[] = [];
|
||||
const diagnostics: string[] = [];
|
||||
const welcomeUrl = `chrome-extension://${extensionId}/src/welcome/welcome.html`;
|
||||
diagnostics.push(`A35 navigating to ${welcomeUrl}`);
|
||||
|
||||
let welcomePage: Page | null = null;
|
||||
try {
|
||||
welcomePage = await browser.newPage();
|
||||
await welcomePage.goto(welcomeUrl, { waitUntil: 'domcontentloaded' });
|
||||
await welcomePage.waitForSelector('.welcome-hero__mark svg', {
|
||||
timeout: A35_WELCOME_PAGE_TIMEOUT_MS,
|
||||
});
|
||||
diagnostics.push('A35 welcome.html DOMContentLoaded + inline <svg> selector resolved');
|
||||
|
||||
const probe = await welcomePage.evaluate(() => {
|
||||
const svgEl = document.querySelector('.welcome-hero__mark svg');
|
||||
const imgEl = document.querySelector('.welcome-hero__mark img');
|
||||
const svgPresent = svgEl !== null;
|
||||
const strokeAttr = svgEl !== null ? svgEl.getAttribute('stroke') : null;
|
||||
const computedStroke =
|
||||
svgEl !== null ? getComputedStyle(svgEl).stroke : '';
|
||||
const imgPresent = imgEl !== null;
|
||||
return { svgPresent, strokeAttr, computedStroke, imgPresent };
|
||||
});
|
||||
diagnostics.push(
|
||||
`A35 live-DOM probe: svgPresent=${probe.svgPresent} strokeAttr=${probe.strokeAttr ?? '<null>'} computedStroke="${probe.computedStroke}" imgPresent=${probe.imgPresent}`,
|
||||
);
|
||||
|
||||
const computedStrokeResolved =
|
||||
probe.computedStroke.length > 0 && probe.computedStroke !== 'none';
|
||||
|
||||
checks.push({
|
||||
name: 'A35.1: inline <svg> injected into `.welcome-hero__mark` slot (populateMark ran)',
|
||||
expected: 'non-null `.welcome-hero__mark svg`',
|
||||
actual: probe.svgPresent ? 'present' : 'missing',
|
||||
passed: probe.svgPresent,
|
||||
});
|
||||
checks.push({
|
||||
name: 'A35.2: injected <svg> carries stroke="currentColor" (UI-SPEC Option A recolor)',
|
||||
expected: 'currentColor',
|
||||
actual: probe.strokeAttr,
|
||||
passed: probe.strokeAttr === 'currentColor',
|
||||
});
|
||||
checks.push({
|
||||
name: 'A35.3: getComputedStyle(<svg>).stroke resolves to a non-default colour (the currentColor cascade through `.welcome-hero__mark { color: var(--mks-fg-inverse) }` actually worked)',
|
||||
expected: 'non-empty, non-"none" resolved colour',
|
||||
actual: probe.computedStroke,
|
||||
passed: computedStrokeResolved,
|
||||
});
|
||||
checks.push({
|
||||
name: 'A35.4: no legacy <img> in `.welcome-hero__mark` slot (the pre-04-06 <img> injection path is gone)',
|
||||
expected: 'null',
|
||||
actual: probe.imgPresent ? 'present (UNEXPECTED — legacy <img> still injected)' : 'null',
|
||||
passed: !probe.imgPresent,
|
||||
});
|
||||
|
||||
const passed = checks.every((c) => c.passed);
|
||||
return {
|
||||
passed,
|
||||
name: 'A35 — welcome-page inline-SVG injected at populateMark() runtime; currentColor stroke resolves via parent CSS color cascade (UI-SPEC dark-logo strategy live-DOM proof; iter-2 BLOCKER 1 resolution)',
|
||||
checks,
|
||||
diagnostics,
|
||||
};
|
||||
} catch (err) {
|
||||
const errMsg = err instanceof Error ? err.message : String(err);
|
||||
diagnostics.push(`A35 THREW: ${errMsg}`);
|
||||
return {
|
||||
passed: false,
|
||||
name: 'A35 — welcome-page inline-SVG injected at populateMark() runtime; currentColor stroke resolves via parent CSS color cascade (UI-SPEC dark-logo strategy live-DOM proof; iter-2 BLOCKER 1 resolution)',
|
||||
checks,
|
||||
diagnostics,
|
||||
error: errMsg,
|
||||
};
|
||||
} finally {
|
||||
if (welcomePage !== null) {
|
||||
try {
|
||||
await welcomePage.close();
|
||||
} catch {
|
||||
// Ignore close errors — the welcome tab is test-only ephemera;
|
||||
// a close failure here cannot mask the A35 verdict above.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user