uplot-webgpu 0.1.0

package/scripts/webgpu/browserSmokeHarness.js

@@ -0,0 +1,105 @@
+import { GPUPath } from './GPUPath.js';
+import WebGPURenderer from './WebGPURenderer.js';
+import { runWebGPURendererSmokeTests } from './smokeTest.js';
+
+export async function runWebGPUBrowserSmokeHarness(options = {}) {
+	runWebGPURendererSmokeTests();
+
+	if (typeof document == 'undefined')
+		throw new Error('The WebGPU browser smoke harness requires a DOM.');
+
+	let width = options.width || 480;
+	let height = options.height || 260;
+	let canvas = options.canvas || document.createElement('canvas');
+	let ratio = globalThis.devicePixelRatio || 1;
+	canvas.width = Math.max(1, Math.round(width * ratio));
+	canvas.height = Math.max(1, Math.round(height * ratio));
+	canvas.style.width = width + 'px';
+	canvas.style.height = height + 'px';
+
+	let host = options.appendTo || document.body;
+	let wrap = document.createElement('div');
+	wrap.style.position = 'relative';
+	wrap.style.width = width + 'px';
+	wrap.style.height = height + 'px';
+
+	if (canvas.parentNode != null) {
+		canvas.parentNode.insertBefore(wrap, canvas);
+		wrap.appendChild(canvas);
+	}
+	else {
+		host.appendChild(wrap);
+		wrap.appendChild(canvas);
+	}
+
+	let ctx = new WebGPURenderer(canvas);
+	ctx.mount(wrap, canvas);
+	await ctx.initPromise;
+
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+	let swatch = ctx.createImageData(18, 18);
+	for (let y = 0; y < swatch.height; y++) {
+		for (let x = 0; x < swatch.width; x++) {
+			let i = (y * swatch.width + x) * 4;
+			swatch.data[i + 0] = x * 14;
+			swatch.data[i + 1] = y * 14;
+			swatch.data[i + 2] = 255;
+			swatch.data[i + 3] = 255;
+		}
+	}
+
+	ctx.scale(ratio, ratio);
+
+	let bg = ctx.createLinearGradient(0, 0, width, height);
+	bg.addColorStop(0, '#172033');
+	bg.addColorStop(1, '#283c5f');
+	ctx.fillStyle = bg;
+	ctx.fillRect(0, 0, width, height);
+	ctx.putImageData(swatch, Math.round((width - 34) * ratio), Math.round(18 * ratio));
+
+	let circle = new GPUPath();
+	circle.arc(90, 95, 54, 0, Math.PI * 2);
+	ctx.fillStyle = 'rgba(255,255,255,0.14)';
+	ctx.shadowColor = 'rgba(0,0,0,0.35)';
+	ctx.shadowBlur = 10;
+	ctx.shadowOffsetX = 3;
+	ctx.shadowOffsetY = 4;
+	ctx.fill(circle);
+
+	ctx.shadowColor = 'rgba(0,0,0,0)';
+	ctx.lineWidth = 5;
+	ctx.lineJoin = 'round';
+	ctx.lineCap = 'round';
+	ctx.setLineDash([14, 8, 3]);
+	ctx.strokeStyle = '#d8e8ff';
+	let wave = new GPUPath();
+	wave.moveTo(165, 140);
+	wave.bezierCurveTo(215, 35, 285, 230, 340, 90);
+	wave.bezierCurveTo(370, 25, 420, 115, 450, 60);
+	ctx.stroke(wave);
+
+	ctx.setLineDash([]);
+	ctx.globalCompositeOperation = 'lighter';
+	ctx.fillStyle = 'rgba(130,200,255,0.25)';
+	ctx.fillRect(230, 92, 140, 66);
+	ctx.globalCompositeOperation = 'source-over';
+
+	ctx.font = '600 24px system-ui, sans-serif';
+	ctx.fillStyle = '#ffffff';
+	ctx.fillText('WebGPU uPlot smoke', 24, 220, 310);
+	ctx.font = '13px system-ui, sans-serif';
+	ctx.letterSpacing = '0.04em';
+	ctx.fillStyle = 'rgba(255,255,255,0.72)';
+	ctx.fillText('paths, text, clips, dashes, shadows, gradients', 24, 240, 420);
+
+	ctx.present();
+
+	let readback = null;
+	if (typeof ctx.getImageDataAsync == 'function')
+		readback = await ctx.getImageDataAsync(0, 0, Math.min(8, canvas.width), Math.min(8, canvas.height));
+
+	return {ok: true, canvas, renderer: ctx, wrap, readback};
+}
+
+export default runWebGPUBrowserSmokeHarness;

package/scripts/webgpu/exporters.d.ts

@@ -0,0 +1,8 @@
+export function normalizeExportType(type?: string): string;
+export function rgbaImageDataToBmpBytes(imageData: ImageData | {width: number; height: number; data: Uint8ClampedArray | Uint8Array}): Uint8Array;
+export function rgbaImageDataToPngBytes(imageData: ImageData | {width: number; height: number; data: Uint8ClampedArray | Uint8Array}): Uint8Array;
+export function bytesToBase64(bytes: Uint8Array): string;
+export function bytesToBlob(bytes: Uint8Array, type: string): Blob | {type: string; size: number; arrayBuffer(): Promise<ArrayBuffer>};
+export function textToBlob(text: string, type: string): Blob | {type: string; size: number; arrayBuffer(): Promise<ArrayBuffer>};
+export function escapeXmlAttr(value: unknown): string;
+export function encodeTextBase64(text: string): string;

package/scripts/webgpu/exporters.js

@@ -0,0 +1,212 @@
+export function rgbaImageDataToBmpBytes(imageData) {
+	let width = Math.max(0, Math.floor(Number(imageData?.width) || 0));
+	let height = Math.max(0, Math.floor(Number(imageData?.height) || 0));
+	let data = imageData?.data || new Uint8ClampedArray(0);
+	let rowStride = Math.ceil((width * 4) / 4) * 4;
+	let pixelBytes = rowStride * height;
+	let bytes = new Uint8Array(14 + 40 + pixelBytes);
+	let view = new DataView(bytes.buffer);
+
+	bytes[0] = 0x42;
+	bytes[1] = 0x4d;
+	view.setUint32(2, bytes.length, true);
+	view.setUint32(10, 54, true);
+	view.setUint32(14, 40, true);
+	view.setInt32(18, width, true);
+	view.setInt32(22, -height, true);
+	view.setUint16(26, 1, true);
+	view.setUint16(28, 32, true);
+	view.setUint32(34, pixelBytes, true);
+
+	let out = 54;
+	for (let y = 0; y < height; y++) {
+		let src = y * width * 4;
+		for (let x = 0; x < width; x++) {
+			let si = src + x * 4;
+			let di = out + x * 4;
+			bytes[di + 0] = data[si + 2] || 0;
+			bytes[di + 1] = data[si + 1] || 0;
+			bytes[di + 2] = data[si + 0] || 0;
+			bytes[di + 3] = data[si + 3] == null ? 255 : data[si + 3];
+		}
+		out += rowStride;
+	}
+
+	return bytes;
+}
+
+
+function makeCrc32Table() {
+	let table = new Uint32Array(256);
+	for (let i = 0; i < 256; i++) {
+		let c = i;
+		for (let j = 0; j < 8; j++)
+			c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+		table[i] = c >>> 0;
+	}
+	return table;
+}
+
+const CRC32_TABLE = makeCrc32Table();
+
+function crc32(bytes) {
+	let c = 0xffffffff;
+	for (let i = 0; i < bytes.length; i++)
+		c = CRC32_TABLE[(c ^ bytes[i]) & 255] ^ (c >>> 8);
+	return (c ^ 0xffffffff) >>> 0;
+}
+
+function adler32(bytes) {
+	let a = 1;
+	let b = 0;
+	for (let i = 0; i < bytes.length; i++) {
+		a = (a + bytes[i]) % 65521;
+		b = (b + a) % 65521;
+	}
+	return ((b << 16) | a) >>> 0;
+}
+
+function writeU32(bytes, offset, value) {
+	bytes[offset + 0] = (value >>> 24) & 255;
+	bytes[offset + 1] = (value >>> 16) & 255;
+	bytes[offset + 2] = (value >>> 8) & 255;
+	bytes[offset + 3] = value & 255;
+}
+
+function asciiBytes(text) {
+	let out = new Uint8Array(text.length);
+	for (let i = 0; i < text.length; i++)
+		out[i] = text.charCodeAt(i) & 255;
+	return out;
+}
+
+function pngChunk(type, data) {
+	let name = asciiBytes(type);
+	let out = new Uint8Array(12 + data.length);
+	writeU32(out, 0, data.length);
+	out.set(name, 4);
+	out.set(data, 8);
+	let crcInput = new Uint8Array(name.length + data.length);
+	crcInput.set(name, 0);
+	crcInput.set(data, name.length);
+	writeU32(out, out.length - 4, crc32(crcInput));
+	return out;
+}
+
+function zlibStore(bytes) {
+	let blocks = [];
+	let total = 2 + 4;
+	for (let pos = 0; pos < bytes.length; pos += 65535) {
+		let len = Math.min(65535, bytes.length - pos);
+		let block = new Uint8Array(5 + len);
+		block[0] = pos + len >= bytes.length ? 1 : 0;
+		block[1] = len & 255;
+		block[2] = (len >>> 8) & 255;
+		let nlen = (~len) & 65535;
+		block[3] = nlen & 255;
+		block[4] = (nlen >>> 8) & 255;
+		block.set(bytes.subarray(pos, pos + len), 5);
+		blocks.push(block);
+		total += block.length;
+	}
+
+	let out = new Uint8Array(total);
+	out[0] = 0x78;
+	out[1] = 0x01;
+	let o = 2;
+	for (let block of blocks) {
+		out.set(block, o);
+		o += block.length;
+	}
+	writeU32(out, o, adler32(bytes));
+	return out;
+}
+
+export function rgbaImageDataToPngBytes(imageData) {
+	let width = Math.max(0, Math.floor(Number(imageData?.width) || 0));
+	let height = Math.max(0, Math.floor(Number(imageData?.height) || 0));
+	let data = imageData?.data || new Uint8ClampedArray(0);
+	let raw = new Uint8Array((width * 4 + 1) * height);
+	let dst = 0;
+	let src = 0;
+	for (let y = 0; y < height; y++) {
+		raw[dst++] = 0;
+		for (let x = 0; x < width; x++) {
+			raw[dst++] = data[src++] || 0;
+			raw[dst++] = data[src++] || 0;
+			raw[dst++] = data[src++] || 0;
+			let a = data[src++];
+			raw[dst++] = a == null ? 255 : a;
+		}
+	}
+
+	let ihdr = new Uint8Array(13);
+	writeU32(ihdr, 0, width);
+	writeU32(ihdr, 4, height);
+	ihdr[8] = 8;
+	ihdr[9] = 6;
+	ihdr[10] = 0;
+	ihdr[11] = 0;
+	ihdr[12] = 0;
+
+	let signature = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
+	let chunks = [signature, pngChunk('IHDR', ihdr), pngChunk('IDAT', zlibStore(raw)), pngChunk('IEND', new Uint8Array(0))];
+	let total = chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+	let out = new Uint8Array(total);
+	let offset = 0;
+	for (let chunk of chunks) {
+		out.set(chunk, offset);
+		offset += chunk.length;
+	}
+	return out;
+}
+
+export function normalizeExportType(type) {
+	type = String(type || 'image/png').toLowerCase();
+	return type == 'image/bmp' || type == 'image/x-ms-bmp' ? 'image/bmp' : 'image/png';
+}
+
+export function bytesToBase64(bytes) {
+	if (typeof Buffer != 'undefined')
+		return Buffer.from(bytes).toString('base64');
+
+	let s = '';
+	let chunk = 0x8000;
+	for (let i = 0; i < bytes.length; i += chunk)
+		s += String.fromCharCode(...bytes.subarray(i, i + chunk));
+	return btoa(s);
+}
+
+export function bytesToBlob(bytes, type) {
+	if (typeof Blob != 'undefined')
+		return new Blob([bytes], {type});
+
+	return {
+		type,
+		size: bytes.byteLength,
+		async arrayBuffer() {
+			return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+		},
+	};
+}
+
+export function textToBlob(text, type) {
+	if (typeof Blob != 'undefined')
+		return new Blob([text], {type});
+
+	let bytes = new TextEncoder().encode(text);
+	return bytesToBlob(bytes, type);
+}
+
+export function escapeXmlAttr(value) {
+	return String(value).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+export function encodeTextBase64(text) {
+	if (typeof Buffer != 'undefined')
+		return Buffer.from(text, 'utf8').toString('base64');
+
+	let bytes = new TextEncoder().encode(text);
+	return bytesToBase64(bytes);
+}
+

package/scripts/webgpu/shaders.d.ts

@@ -0,0 +1,2 @@
+export const CHART_WGSL: string;
+export const IMAGE_WGSL: string;

package/scripts/webgpu/shaders.js

@@ -0,0 +1,76 @@
+export const CHART_WGSL = `
+struct Uniforms {
+	resolution: vec2<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+struct VertexIn {
+	@location(0) pos: vec2<f32>,
+	@location(1) color: vec4<f32>,
+};
+
+struct VertexOut {
+	@builtin(position) position: vec4<f32>,
+	@location(0) color: vec4<f32>,
+};
+
+@vertex
+fn vsMain(input: VertexIn) -> VertexOut {
+	var out: VertexOut;
+	let clip = vec2<f32>(
+		(input.pos.x / uniforms.resolution.x) * 2.0 - 1.0,
+		1.0 - (input.pos.y / uniforms.resolution.y) * 2.0,
+	);
+	out.position = vec4<f32>(clip, 0.0, 1.0);
+	out.color = input.color;
+	return out;
+}
+
+@fragment
+fn fsMain(input: VertexOut) -> @location(0) vec4<f32> {
+	return input.color;
+}
+`;
+
+export const IMAGE_WGSL = `
+struct Uniforms {
+	resolution: vec2<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(1) @binding(0) var imageSampler: sampler;
+@group(1) @binding(1) var imageTexture: texture_2d<f32>;
+
+struct VertexIn {
+	@location(0) pos: vec2<f32>,
+	@location(1) uv: vec2<f32>,
+	@location(2) alpha: f32,
+};
+
+struct VertexOut {
+	@builtin(position) position: vec4<f32>,
+	@location(0) uv: vec2<f32>,
+	@location(1) alpha: f32,
+};
+
+@vertex
+fn vsImage(input: VertexIn) -> VertexOut {
+	var out: VertexOut;
+	let clip = vec2<f32>(
+		(input.pos.x / uniforms.resolution.x) * 2.0 - 1.0,
+		1.0 - (input.pos.y / uniforms.resolution.y) * 2.0,
+	);
+	out.position = vec4<f32>(clip, 0.0, 1.0);
+	out.uv = input.uv;
+	out.alpha = input.alpha;
+	return out;
+}
+
+@fragment
+fn fsImage(input: VertexOut) -> @location(0) vec4<f32> {
+	let tex = textureSample(imageTexture, imageSampler, input.uv);
+	let a = tex.a * input.alpha;
+	return vec4<f32>(tex.rgb * a, a);
+}
+`;

package/scripts/webgpu/shaders.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck
+export const CHART_WGSL = `
+struct Uniforms {
+	resolution: vec2<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+
+struct VertexIn {
+	@location(0) pos: vec2<f32>,
+	@location(1) color: vec4<f32>,
+};
+
+struct VertexOut {
+	@builtin(position) position: vec4<f32>,
+	@location(0) color: vec4<f32>,
+};
+
+@vertex
+fn vsMain(input: VertexIn) -> VertexOut {
+	var out: VertexOut;
+	let clip = vec2<f32>(
+		(input.pos.x / uniforms.resolution.x) * 2.0 - 1.0,
+		1.0 - (input.pos.y / uniforms.resolution.y) * 2.0,
+	);
+	out.position = vec4<f32>(clip, 0.0, 1.0);
+	out.color = input.color;
+	return out;
+}
+
+@fragment
+fn fsMain(input: VertexOut) -> @location(0) vec4<f32> {
+	return input.color;
+}
+`;
+
+export const IMAGE_WGSL = `
+struct Uniforms {
+	resolution: vec2<f32>,
+};
+
+@group(0) @binding(0) var<uniform> uniforms: Uniforms;
+@group(1) @binding(0) var imageSampler: sampler;
+@group(1) @binding(1) var imageTexture: texture_2d<f32>;
+
+struct VertexIn {
+	@location(0) pos: vec2<f32>,
+	@location(1) uv: vec2<f32>,
+	@location(2) alpha: f32,
+};
+
+struct VertexOut {
+	@builtin(position) position: vec4<f32>,
+	@location(0) uv: vec2<f32>,
+	@location(1) alpha: f32,
+};
+
+@vertex
+fn vsImage(input: VertexIn) -> VertexOut {
+	var out: VertexOut;
+	let clip = vec2<f32>(
+		(input.pos.x / uniforms.resolution.x) * 2.0 - 1.0,
+		1.0 - (input.pos.y / uniforms.resolution.y) * 2.0,
+	);
+	out.position = vec4<f32>(clip, 0.0, 1.0);
+	out.uv = input.uv;
+	out.alpha = input.alpha;
+	return out;
+}
+
+@fragment
+fn fsImage(input: VertexOut) -> @location(0) vec4<f32> {
+	let tex = textureSample(imageTexture, imageSampler, input.uv);
+	let a = tex.a * input.alpha;
+	return vec4<f32>(tex.rgb * a, a);
+}
+`;

package/scripts/webgpu/smokeTest.d.ts

@@ -0,0 +1,2 @@
+export function runWebGPURendererSmokeTests(): boolean;
+export default runWebGPURendererSmokeTests;

package/scripts/webgpu/smokeTest.js

@@ -0,0 +1,144 @@
+import { GPUPath } from './GPUPath.js';
+import { WebGPURendererInternals } from './WebGPURenderer.js';
+import { normalizeExportType, rgbaImageDataToBmpBytes, rgbaImageDataToPngBytes } from './exporters.js';
+
+function assert(name, value) {
+	if (!value)
+		throw new Error(`WebGPU renderer smoke test failed: ${name}`);
+}
+
+function approx(a, b, eps = 1e-6) {
+	return Math.abs(a - b) <= eps;
+}
+
+export function runWebGPURendererSmokeTests() {
+	let outer = [[0, 0], [10, 0], [10, 10], [0, 10]];
+	let inner = [[3, 3], [3, 7], [7, 7], [7, 3]];
+
+	assert('nonzero outer hit', WebGPURendererInternals.fillContainsPoint([1, 1], [outer, inner], 'nonzero'));
+	assert('nonzero opposite winding hole', !WebGPURendererInternals.fillContainsPoint([5, 5], [outer, inner], 'nonzero'));
+	assert('evenodd hole', !WebGPURendererInternals.fillContainsPoint([5, 5], [outer, inner], 'evenodd'));
+	assert('source-over composite', WebGPURendererInternals.clampCompositeMode('source-over') == 'source-over');
+	assert('unknown composite fallback', WebGPURendererInternals.clampCompositeMode('not-real') == 'source-over');
+
+	let clipped = WebGPURendererInternals.normalizeImageRect(
+		{width: 10, height: 10},
+		-5, -5, 10, 10,
+		0, 0, 100, 100,
+	);
+	assert('image source clip exists', clipped != null);
+	assert('image source clipped x', clipped.sx == 0 && clipped.sy == 0);
+	assert('image destination scaled', clipped.dx == 50 && clipped.dy == 50 && clipped.dw == 50 && clipped.dh == 50);
+
+	let neg = WebGPURendererInternals.normalizeImageRect(
+		{width: 10, height: 10},
+		8, 8, -4, -4,
+		20, 30, -40, -50,
+	);
+	assert('negative image rect normalized', neg != null && neg.sx == 4 && neg.sy == 4 && neg.dx == -20 && neg.dy == -20 && neg.dw == 40 && neg.dh == 50);
+
+	let emptyClose = new GPUPath();
+	emptyClose.closePath();
+	assert('empty closePath does not create geometry', emptyClose.toSubpaths().length == 0);
+
+	let path = new GPUPath();
+	path.rect(0, 0, 10, 10);
+	path.closePath();
+	assert('GPUPath emits subpaths', path.toSubpaths().length > 0);
+
+	let circle = new GPUPath();
+	circle.arc(0, 0, 10, 0, Math.PI * 2);
+	let circleSub = circle.toSubpaths()[0];
+	assert('full circle arc keeps geometry', circleSub.length > 10);
+	assert('full circle arc returns near start', approx(circleSub[0][0], circleSub[circleSub.length - 1][0]) && approx(circleSub[0][1], circleSub[circleSub.length - 1][1]));
+
+	let ellipse = new GPUPath();
+	ellipse.ellipse(0, 0, 10, 5, Math.PI / 6, 0, Math.PI * 2);
+	assert('full ellipse keeps geometry', ellipse.toSubpaths()[0].length > 10);
+
+	let rounded = new GPUPath();
+	rounded.roundRect(0, 0, 20, 12, [4, 2, 5, 3]);
+	let roundedSub = rounded.toSubpaths()[0];
+	assert('roundRect emits closed geometry', roundedSub.length > 8 && approx(roundedSub[0][0], roundedSub[roundedSub.length - 1][0]) && approx(roundedSub[0][1], roundedSub[roundedSub.length - 1][1]));
+
+	let arcToPath = new GPUPath();
+	arcToPath.moveTo(0, 10);
+	arcToPath.arcTo(10, 0, 20, 10, 6);
+	let arcToSub = arcToPath.toSubpaths()[0];
+	let arcToEnd = arcToSub[arcToSub.length - 1];
+	assert('arcTo emits rounded connector geometry', arcToSub.length > 3 && arcToEnd[0] > 10 && arcToEnd[0] < 20 && arcToEnd[1] > 0 && arcToEnd[1] < 10);
+
+	let copy = new GPUPath(path);
+	copy.lineTo(12, 12);
+	let copiedSubpaths = copy.toSubpaths();
+	assert('copy constructor preserves current point', copiedSubpaths[copiedSubpaths.length - 1].some(p => p[0] == 12 && p[1] == 12));
+
+	let add = new GPUPath();
+	add.addPath(path);
+	add.lineTo(14, 14);
+	let addedSubpaths = add.toSubpaths();
+	assert('addPath preserves current point', addedSubpaths[addedSubpaths.length - 1].some(p => p[0] == 14 && p[1] == 14));
+
+	let invalid = new GPUPath();
+	invalid.moveTo(0, 0);
+	invalid.lineTo(NaN, 3);
+	assert('invalid path coordinates are ignored', invalid.toSubpaths()[0].length == 1);
+
+
+	let modernRgb = WebGPURendererInternals.parsePlainCssColor('rgb(255 0 0 / 50%)');
+	assert('modern rgb space slash alpha parses', approx(modernRgb[0], 1) && approx(modernRgb[1], 0) && approx(modernRgb[2], 0) && approx(modernRgb[3], 0.5));
+
+	let multiRect = new GPUPath();
+	multiRect.rect(0, 0, 10, 10);
+	multiRect.rect(3, 3, 4, 4);
+	let evenOddRegions = WebGPURendererInternals.pathToClipRegions(multiRect, [1, 0, 0, 1, 0, 0], 'evenodd');
+	let centerCovered = evenOddRegions.some(region => WebGPURendererInternals.pointInPolygon([5, 5], region));
+	let cornerCovered = evenOddRegions.some(region => WebGPURendererInternals.pointInPolygon([1, 1], region));
+	assert('evenodd clip keeps outer region', cornerCovered);
+	assert('evenodd clip removes inner rect hole', !centerCovered);
+
+
+	let nonzeroRects = new GPUPath();
+	nonzeroRects.rect(0, 0, 10, 10);
+	nonzeroRects.rect(7, 3, -4, 4);
+	let nonzeroRegions = WebGPURendererInternals.pathToClipRegions(nonzeroRects, [1, 0, 0, 1, 0, 0], 'nonzero');
+	let nonzeroCenterCovered = nonzeroRegions.some(region => WebGPURendererInternals.pointInPolygon([5, 5], region));
+	let nonzeroCornerCovered = nonzeroRegions.some(region => WebGPURendererInternals.pointInPolygon([1, 1], region));
+	assert('nonzero rect clip keeps outer region', nonzeroCornerCovered);
+	assert('nonzero rect clip removes opposite-winding hole', !nonzeroCenterCovered);
+
+	let clippedTri = WebGPURendererInternals.clipVertices([
+		-10, -10, 1, 0, 0, 1,
+		10, -10, 1, 0, 0, 1,
+		0, 10, 1, 0, 0, 1,
+	], [[[0, 0], [1, 0], [1, 1], [0, 1]]]);
+	assert('clipped quadrilateral fans to two triangles', clippedTri.length == 36);
+
+	assert('readback row alignment', WebGPURendererInternals.alignBytesPerRow(4) == 256 && WebGPURendererInternals.alignBytesPerRow(260) == 512);
+	let readRect = WebGPURendererInternals.normalizeReadRect(8, 8, -4, -5, 20, 20);
+	assert('negative readback rect normalized', readRect.x == 4 && readRect.y == 3 && readRect.w == 4 && readRect.h == 5);
+	let clippedRead = WebGPURendererInternals.normalizeReadRect(-3, -2, 8, 7, 10, 10);
+	assert('readback rect clips to frame', clippedRead.x == 0 && clippedRead.y == 0 && clippedRead.w == 5 && clippedRead.h == 5);
+
+	let commaRgb = WebGPURendererInternals.parsePlainCssColor('rgba(0, 128, 255, 0.25)');
+	assert('comma rgba still parses', approx(commaRgb[1], 128 / 255) && approx(commaRgb[3], 0.25));
+
+	let dirty = WebGPURendererInternals.normalizeDirtyRect({width: 10, height: 8}, 8, 7, -5, -4);
+	assert('negative putImageData dirty rect normalized', dirty.x == 3 && dirty.y == 3 && dirty.w == 5 && dirty.h == 4);
+	let dirtyClip = WebGPURendererInternals.normalizeDirtyRect({width: 10, height: 8}, -2, -1, 5, 5);
+	assert('putImageData dirty rect clips to image', dirtyClip.x == 0 && dirtyClip.y == 0 && dirtyClip.w == 3 && dirtyClip.h == 4);
+
+	let bmpBytes = rgbaImageDataToBmpBytes({width: 1, height: 1, data: new Uint8ClampedArray([255, 0, 128, 64])});
+	assert('bmp encoder emits BMP signature', bmpBytes[0] == 0x42 && bmpBytes[1] == 0x4d);
+	assert('bmp encoder emits BGRA pixel', bmpBytes[54] == 128 && bmpBytes[55] == 0 && bmpBytes[56] == 255 && bmpBytes[57] == 64);
+
+	let pngBytes = rgbaImageDataToPngBytes({width: 1, height: 1, data: new Uint8ClampedArray([255, 0, 128, 64])});
+	assert('png encoder emits PNG signature', pngBytes[0] == 137 && pngBytes[1] == 80 && pngBytes[2] == 78 && pngBytes[3] == 71);
+	assert('png encoder has IHDR chunk', String.fromCharCode(pngBytes[12], pngBytes[13], pngBytes[14], pngBytes[15]) == 'IHDR');
+	assert('export type defaults to png', normalizeExportType('image/jpeg') == 'image/png');
+	assert('export type preserves bmp', normalizeExportType('image/bmp') == 'image/bmp');
+
+	return true;
+}
+
+export default runWebGPURendererSmokeTests;

package/scripts/webgpu/webgpu-ambient.d.ts

@@ -0,0 +1,41 @@
+// Minimal WebGPU ambient declarations for TypeScript installs whose DOM lib does not include WebGPU yet.
+type GPUDevice = any;
+type GPUAdapter = any;
+type GPUCanvasContext = any;
+type GPUTextureFormat = string;
+type GPUBuffer = any;
+type GPURenderPipeline = any;
+type GPUComputePipeline = any;
+type GPUBindGroup = any;
+type GPUBindGroupLayout = any;
+type GPUPipelineLayout = any;
+type GPUSampler = any;
+type GPUTexture = any;
+type GPUTextureView = any;
+type GPUQueue = any;
+type GPUCommandEncoder = any;
+type GPURenderPassEncoder = any;
+type GPUShaderModule = any;
+type GPUBufferUsageFlags = number;
+type GPUTextureUsageFlags = number;
+type GPUShaderStageFlags = number;
+type GPUMapModeFlags = number;
+type GPUPowerPreference = 'low-power' | 'high-performance';
+type GPUColor = any;
+type GPUColorDict = any;
+type GPUBlendState = any;
+type GPUPrimitiveState = any;
+type GPUVertexBufferLayout = any;
+type GPUCanvasConfiguration = any;
+type GPURequestAdapterOptions = any;
+type GPUDeviceDescriptor = any;
+type GPUAdapterInfo = Record<string, unknown>;
+
+declare const GPUBufferUsage: any;
+declare const GPUTextureUsage: any;
+declare const GPUShaderStage: any;
+declare const GPUMapMode: any;
+
+interface Navigator {
+  gpu?: any;
+}