wip: nested-asyncify fix, wxAuiToolBar registration, tests, research docs
Main-repo side of a multi-part WIP covering the KiCad WASM tool-selection and nested-Asyncify work. Submodule commits are in kicad@f6e9239aaa (libcontext hygiene) and wxwidgets@bb80f91e8b (auibar registration + dialog diagnostics). ## scripts/common/inject-dyncall-shims.sh Wrap Asyncify.handleSleep / allocateData to save-and-restore Asyncify.currData around each EM_ASYNC_JS sleep. This fixes the nested Asyncify collision where a fiber swap that fired during a modal's event loop clobbered currData, and the modal's later doRewind used the fiber's buffer and hit "RuntimeError: index out of bounds". Root cause documented as Emscripten Issue #9153 (wontfix upstream). Diagnostic-rewind logging (forcedBottomOfCallStack, callStack traces) is retained to help future debugging of Asyncify state corruption. ## tests/ - tests/playwright-kicad.config.ts: add `channel: 'chrome'` for the chromium project so --project=chromium --headed uses system Chrome (real GPU) instead of SwiftShader on ARM Mac. Also switch trace to retain-on-failure + screenshot on-failure for easier E2E debugging. - tests/kicad/pcbnew.spec.ts: replace `tool.checked` assertions with a label-suffix check (`[checked]`) since our auibar registration encodes checked state in the label (no schema change to the registry). - tests/apps/Makefile.wasm: add `coroutine-nested` build target + include it in the all: list. - tests/apps/standalone/coroutine/: kicad_coroutine_harness.h + test app reproducing KiCad COROUTINE semantics against real libcontext. - tests/apps/standalone/coroutine-nested/: nested_test.cpp reproduces the EM_ASYNC_JS-modal + fiber-swap nesting bug in isolation. 8 scenarios from baseline_modal_alone through nested_fibers_inside_modal. - tests/e2e/coroutine.spec.ts + coroutine-nested.spec.ts: Playwright specs that load the standalone apps and assert all case cases pass via [COROUTINE_TEST] SUMMARY log parsing. ## research/ and features/browser-tools/ Three background docs capturing the investigation trajectory: - features/browser-tools/0001-kicad-wasm-tool-activation-investigation.md Early investigation: why tools don't activate; initial dynCall-empty- callback hypothesis. - features/browser-tools/0002-wasm-coroutine-deep-dive.md Deep dive on Asyncify internals, fiber API, QEMU's coroutine-wasm reference implementation. - features/browser-tools/0003-wxauitoolbar-registration-fix.md The narrow fix: why wxAuiToolBar needs a registration block, where to add it, what the fallback plan is. - research/threading_1.md: corrected root-cause analysis after reading runtime logs — nested-Asyncify currData collision, Emscripten #9153. - research/threading_2.md: extended research on alternative approaches (JSPI/WasmFX/state-machines) and why they don't help here. ## Submodule pointer updates kicad: f6e9239aaa (wip: libcontext WASM hygiene cleanup) wxwidgets: bb80f91e8b (wip: wxAuiToolBar element-registry registration + dialog diagnostics) ## Open threads not yet in scope - Firefox/Chrome divergent behavior: "indirect call signature mismatch" traps in Firefox vs renderer crash in system Chrome (tracked in plans/peaceful-hugging-pnueli.md and the research docs). - E2E pixel-diff for Draw Lines fails because the test's diff region does not cover where the line is actually drawn; tool activation works, the line is visible in test-results/pcbnew-draw-lines-02-after-drawing.png. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Viktor Vaczi
parent
a49ed49d5d
commit
9a04217788
17 changed files with 5190 additions and 46 deletions
|
|
@ -2,7 +2,7 @@ import * as fs from 'fs';
|
|||
import * as path from 'path';
|
||||
import type { Page } from '@playwright/test';
|
||||
import { test, expect } from './fixtures';
|
||||
import { clickByLabel } from '../e2e/utils/element-tracker';
|
||||
import { clickByLabel, clickByTooltip, findByTooltip } from '../e2e/utils/element-tracker';
|
||||
|
||||
/**
|
||||
* PCBnew WASM E2E Tests
|
||||
|
|
@ -74,6 +74,21 @@ type ReferenceComparison = {
|
|||
|
||||
type ReferenceRegion = typeof REFERENCE_REGIONS[number];
|
||||
|
||||
type DiffRegion = {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
type ScreenshotDifference = {
|
||||
actualWidth: number;
|
||||
actualHeight: number;
|
||||
diffPixels: number;
|
||||
diffRatio: number;
|
||||
meanChannelDiff: number;
|
||||
};
|
||||
|
||||
async function compareToReference(
|
||||
page: Page,
|
||||
actualPng: Buffer,
|
||||
|
|
@ -159,6 +174,83 @@ async function compareToReference(
|
|||
});
|
||||
}
|
||||
|
||||
async function compareScreenshots(
|
||||
page: Page,
|
||||
beforePng: Buffer,
|
||||
afterPng: Buffer,
|
||||
region: DiffRegion
|
||||
): Promise<ScreenshotDifference> {
|
||||
return page.evaluate(async ({ beforeBase64, afterBase64, crop }) => {
|
||||
const loadImage = async (base64: string): Promise<HTMLImageElement> => {
|
||||
const image = new Image();
|
||||
image.src = `data:image/png;base64,${base64}`;
|
||||
await image.decode();
|
||||
return image;
|
||||
};
|
||||
|
||||
const [before, after] = await Promise.all([
|
||||
loadImage(beforeBase64),
|
||||
loadImage(afterBase64),
|
||||
]);
|
||||
|
||||
if (before.width !== after.width || before.height !== after.height) {
|
||||
return {
|
||||
actualWidth: after.width,
|
||||
actualHeight: after.height,
|
||||
diffPixels: Number.POSITIVE_INFINITY,
|
||||
diffRatio: Number.POSITIVE_INFINITY,
|
||||
meanChannelDiff: Number.POSITIVE_INFINITY,
|
||||
};
|
||||
}
|
||||
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = crop.width;
|
||||
canvas.height = crop.height;
|
||||
|
||||
const context = canvas.getContext('2d', { willReadFrequently: true });
|
||||
|
||||
if (!context) {
|
||||
throw new Error('2D canvas context unavailable for screenshot comparison');
|
||||
}
|
||||
|
||||
context.drawImage(before, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
|
||||
const beforeData = context.getImageData(0, 0, canvas.width, canvas.height).data;
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
context.drawImage(after, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
|
||||
const afterData = context.getImageData(0, 0, canvas.width, canvas.height).data;
|
||||
|
||||
let diffPixels = 0;
|
||||
let totalChannelDiff = 0;
|
||||
|
||||
for (let i = 0; i < beforeData.length; i += 4) {
|
||||
const dr = Math.abs(beforeData[i] - afterData[i]);
|
||||
const dg = Math.abs(beforeData[i + 1] - afterData[i + 1]);
|
||||
const db = Math.abs(beforeData[i + 2] - afterData[i + 2]);
|
||||
const da = Math.abs(beforeData[i + 3] - afterData[i + 3]);
|
||||
const maxDiff = Math.max(dr, dg, db, da);
|
||||
|
||||
totalChannelDiff += dr + dg + db + da;
|
||||
|
||||
if (maxDiff > 16) {
|
||||
diffPixels += 1;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
actualWidth: after.width,
|
||||
actualHeight: after.height,
|
||||
diffPixels,
|
||||
diffRatio: diffPixels / (canvas.width * canvas.height),
|
||||
meanChannelDiff: totalChannelDiff / beforeData.length,
|
||||
};
|
||||
}, {
|
||||
beforeBase64: beforePng.toString('base64'),
|
||||
afterBase64: afterPng.toString('base64'),
|
||||
crop: region,
|
||||
});
|
||||
}
|
||||
|
||||
async function getCanvasMetrics(page: Page): Promise<CanvasMetrics> {
|
||||
return page.evaluate(() => {
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
|
|
@ -249,43 +341,54 @@ async function getRegistryMetrics(page: Page): Promise<RegistryMetrics> {
|
|||
});
|
||||
}
|
||||
|
||||
async function completeWizard(page: Page): Promise<void> {
|
||||
await expect(page.locator('#canvas')).toBeVisible({ timeout: 90000 });
|
||||
await page.waitForFunction(() => !!window.wxElementRegistry, null, { timeout: 90000 });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
await page.screenshot({ path: 'test-results/wizard-00-initial.png', scale: 'device' });
|
||||
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
let clicked = await clickByLabel(page, 'Next >');
|
||||
|
||||
if (!clicked) {
|
||||
clicked = await clickByLabel(page, 'Finish');
|
||||
|
||||
if (clicked) {
|
||||
await page.waitForTimeout(500);
|
||||
await page.screenshot({
|
||||
path: `test-results/wizard-${String(i).padStart(2, '0')}-finish.png`,
|
||||
scale: 'device'
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
await page.screenshot({
|
||||
path: `test-results/wizard-${String(i).padStart(2, '0')}.png`,
|
||||
scale: 'device'
|
||||
});
|
||||
}
|
||||
|
||||
await page.waitForTimeout(2000);
|
||||
}
|
||||
|
||||
async function hideCursor(page: Page): Promise<void> {
|
||||
await page.evaluate(() => {
|
||||
document.documentElement.style.cursor = 'none';
|
||||
document.body.style.cursor = 'none';
|
||||
});
|
||||
}
|
||||
|
||||
test.describe('PCBnew WASM', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/kicad/pcbnew.html');
|
||||
});
|
||||
|
||||
test('click through setup wizard to load PCBnew', async ({ page }) => {
|
||||
await expect(page.locator('#canvas')).toBeVisible({ timeout: 90000 });
|
||||
await page.waitForFunction(() => !!window.wxElementRegistry, null, { timeout: 90000 });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
await page.screenshot({ path: 'test-results/wizard-00-initial.png', scale: 'device' });
|
||||
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
let clicked = await clickByLabel(page, 'Next >');
|
||||
|
||||
if (!clicked) {
|
||||
clicked = await clickByLabel(page, 'Finish');
|
||||
|
||||
if (clicked) {
|
||||
await page.waitForTimeout(500);
|
||||
await page.screenshot({
|
||||
path: `test-results/wizard-${String(i).padStart(2, '0')}-finish.png`,
|
||||
scale: 'device'
|
||||
});
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
await page.waitForTimeout(500);
|
||||
await page.screenshot({
|
||||
path: `test-results/wizard-${String(i).padStart(2, '0')}.png`,
|
||||
scale: 'device'
|
||||
});
|
||||
}
|
||||
|
||||
await page.waitForTimeout(2000);
|
||||
await completeWizard(page);
|
||||
const metrics = await getCanvasMetrics(page);
|
||||
const registryMetrics = await getRegistryMetrics(page);
|
||||
|
||||
|
|
@ -334,10 +437,7 @@ test.describe('PCBnew WASM', () => {
|
|||
expect(appearancePane.width).toBeGreaterThanOrEqual(200);
|
||||
expect(appearancePane.width).toBeLessThanOrEqual(240);
|
||||
|
||||
await page.evaluate(() => {
|
||||
document.documentElement.style.cursor = 'none';
|
||||
document.body.style.cursor = 'none';
|
||||
});
|
||||
await hideCursor(page);
|
||||
|
||||
const cssScreenshot = await page.screenshot({
|
||||
path: 'test-results/pcbnew-loaded-css.png',
|
||||
|
|
@ -357,4 +457,182 @@ test.describe('PCBnew WASM', () => {
|
|||
const canvasCount = await page.locator('canvas').count();
|
||||
expect(canvasCount).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
test('select draw lines and draw on the board', async ({ page, testLogger }) => {
|
||||
await completeWizard(page);
|
||||
await hideCursor(page);
|
||||
|
||||
await page.evaluate(() => {
|
||||
const canvases = Array.from(document.querySelectorAll('canvas')).map((canvas) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const style = window.getComputedStyle(canvas);
|
||||
return {
|
||||
id: canvas.id,
|
||||
className: canvas.className,
|
||||
display: style.display,
|
||||
visibility: style.visibility,
|
||||
width: canvas.width,
|
||||
height: canvas.height,
|
||||
rectX: rect.x,
|
||||
rectY: rect.y,
|
||||
rectWidth: rect.width,
|
||||
rectHeight: rect.height,
|
||||
shouldBeVisible: (canvas as HTMLCanvasElement).dataset?.shouldBeVisible ?? null,
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`[TEST] canvas summary ${JSON.stringify(canvases)}`);
|
||||
|
||||
const registry = window.wxElementRegistry;
|
||||
const topLevels = (registry?.findAll?.({}) ?? [])
|
||||
.filter((item) => /Frame|Dialog|Wizard/.test(item.typeName))
|
||||
.slice(0, 20)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
typeName: item.typeName,
|
||||
label: item.label,
|
||||
name: item.name,
|
||||
visible: item.visible,
|
||||
enabled: item.enabled,
|
||||
screenX: item.screenX,
|
||||
screenY: item.screenY,
|
||||
width: item.width,
|
||||
height: item.height,
|
||||
}));
|
||||
const rendered = registry?.findAllRendered?.({}) ?? [];
|
||||
const byType = rendered.reduce<Record<string, number>>((acc, item) => {
|
||||
acc[item.elementType] = (acc[item.elementType] ?? 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
const tools = rendered
|
||||
.filter((item) => item.elementType === 'tool')
|
||||
.slice(0, 20)
|
||||
.map((item) => ({
|
||||
id: item.id,
|
||||
label: item.label,
|
||||
tooltip: item.tooltip,
|
||||
checked: item.checked,
|
||||
enabled: item.enabled,
|
||||
}));
|
||||
|
||||
console.log(`[TEST] top-level summary ${JSON.stringify(topLevels)}`);
|
||||
console.log(`[TEST] rendered summary ${JSON.stringify({ count: rendered.length, byType, tools })}`);
|
||||
});
|
||||
|
||||
await page.waitForFunction(() => {
|
||||
const registry = window.wxElementRegistry;
|
||||
if (!registry?.findAllRendered) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return registry.findAllRendered({ elementType: 'tool' })
|
||||
.some((tool) => tool.tooltip?.includes('Draw Lines'));
|
||||
}, null, { timeout: 15000 });
|
||||
|
||||
const drawLinesTool = await findByTooltip(page, 'Draw Lines', { elementType: 'tool' });
|
||||
expect(drawLinesTool).not.toBeNull();
|
||||
|
||||
if (!drawLinesTool) {
|
||||
throw new Error('Draw Lines tool not found in rendered element registry');
|
||||
}
|
||||
|
||||
// The registry carries checked state via a " [checked]" label suffix
|
||||
// appended by wxAuiToolBar::OnPaint on Emscripten — no schema change.
|
||||
const isToolChecked = (t: { label?: string } | null | undefined) =>
|
||||
(t?.label ?? '').includes('[checked]');
|
||||
|
||||
expect(drawLinesTool.enabled).toBe(true);
|
||||
expect(isToolChecked(drawLinesTool)).toBe(false);
|
||||
const baselineErrorCount = testLogger.errors.length;
|
||||
|
||||
const beforeToolClick = await page.screenshot({
|
||||
path: 'test-results/pcbnew-draw-lines-00-before-tool-click.png',
|
||||
scale: 'device'
|
||||
});
|
||||
|
||||
expect(await clickByTooltip(page, 'Draw Lines', { elementType: 'tool' })).toBe(true);
|
||||
|
||||
await expect.poll(async () => {
|
||||
const tool = await findByTooltip(page, 'Draw Lines', { elementType: 'tool' });
|
||||
return isToolChecked(tool);
|
||||
}, {
|
||||
message: 'Draw Lines tool should stay selected after the click',
|
||||
timeout: 5000,
|
||||
}).toBe(true);
|
||||
|
||||
await page.mouse.move(640, 360);
|
||||
await page.waitForTimeout(600);
|
||||
|
||||
const selectedDrawLinesTool = await findByTooltip(page, 'Draw Lines', { elementType: 'tool' });
|
||||
expect(isToolChecked(selectedDrawLinesTool)).toBe(true);
|
||||
|
||||
const afterToolClick = await page.screenshot({
|
||||
path: 'test-results/pcbnew-draw-lines-01-after-click.png',
|
||||
scale: 'device'
|
||||
});
|
||||
|
||||
const glCanvasId = await page.evaluate(() => {
|
||||
const glCanvas =
|
||||
Array.from(document.querySelectorAll('[id^="glcanvas-"]'))
|
||||
.map((canvas) => canvas as HTMLCanvasElement)
|
||||
.find((canvas) => {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const style = window.getComputedStyle(canvas);
|
||||
return style.display !== 'none' && rect.width > 0 && rect.height > 0;
|
||||
}) ??
|
||||
document.querySelector('[id^="glcanvas-"]') as HTMLCanvasElement | null;
|
||||
|
||||
return glCanvas?.id ?? null;
|
||||
});
|
||||
|
||||
expect(glCanvasId).not.toBeNull();
|
||||
|
||||
if (!glCanvasId) {
|
||||
throw new Error('Visible GL canvas not found');
|
||||
}
|
||||
|
||||
const glCanvasBox = await page.locator(`#${glCanvasId}`).boundingBox();
|
||||
expect(glCanvasBox).not.toBeNull();
|
||||
|
||||
if (!glCanvasBox) {
|
||||
throw new Error('GL canvas bounding box unavailable');
|
||||
}
|
||||
|
||||
const startPoint = {
|
||||
x: Math.round(glCanvasBox.x + glCanvasBox.width * 0.28),
|
||||
y: Math.round(glCanvasBox.y + glCanvasBox.height * 0.36),
|
||||
};
|
||||
const endPoint = {
|
||||
x: Math.round(glCanvasBox.x + glCanvasBox.width * 0.48),
|
||||
y: Math.round(glCanvasBox.y + glCanvasBox.height * 0.47),
|
||||
};
|
||||
|
||||
await page.mouse.click(startPoint.x, startPoint.y);
|
||||
await page.waitForTimeout(250);
|
||||
await page.mouse.click(endPoint.x, endPoint.y);
|
||||
await page.waitForTimeout(750);
|
||||
|
||||
const afterDrawing = await page.screenshot({
|
||||
path: 'test-results/pcbnew-draw-lines-02-after-drawing.png',
|
||||
scale: 'device'
|
||||
});
|
||||
|
||||
const diffRegion: DiffRegion = {
|
||||
x: Math.max(0, Math.min(startPoint.x, endPoint.x) - 24),
|
||||
y: Math.max(0, Math.min(startPoint.y, endPoint.y) - 24),
|
||||
width: Math.abs(endPoint.x - startPoint.x) + 48,
|
||||
height: Math.abs(endPoint.y - startPoint.y) + 48,
|
||||
};
|
||||
|
||||
const drawingDiff = await compareScreenshots(page, afterToolClick, afterDrawing, diffRegion);
|
||||
|
||||
expect(drawingDiff.diffPixels).toBeGreaterThan(120);
|
||||
expect(drawingDiff.diffRatio).toBeGreaterThan(0.01);
|
||||
expect(drawingDiff.meanChannelDiff).toBeGreaterThan(1);
|
||||
|
||||
const realErrors = testLogger.errors
|
||||
.slice(baselineErrorCount)
|
||||
.filter((error) => !error.includes('favicon') && !error.includes('uncaught exception: unwind'));
|
||||
expect(realErrors).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue