Visual Regression Testing

Two render paths must produce identical pixels. The native canvas path (renderToImageNative via drawElementImage) renders the live DOM directly through Blink and is the ground truth. The foreignObject path (captureTimelineToDataUri) serializes the DOM to XHTML inside an SVG <foreignObject>. Any difference between them is a serializer bug.

Utility

elements/packages/elements/test/visualRegressionUtils.ts provides the testing API. Key functions:

// Compare two canvases directly — returns diffPercentage, no baseline file needed
compareTwoCanvases(canvas1, canvas2, testName, comparisonName, options)
expectCanvasesToMatch(canvas1, canvas2, testName, comparisonName, options)

// Compare a canvas against a stored baseline PNG
assertCanvasSnapshot(canvas, testName, snapshotName, options)
expectCanvasToMatchSnapshot(source, testName, snapshotName, options)

options.acceptableDiffPercentage (default 1.0) controls pass/fail. Use 0 to 0.5 for tight parity checks.