30:T72d,tests = ({ video: [ { name: 'metadata', fn: fetchMetadata, ok: video => md`width: ${video.videoWidth}px, height: ${video.videoHeight}px, duration: ${video.duration}s` }, { name: 'data', fn: fetchVideo, ok: video => { video.style.width = '300px'; return video; } } ], frame: [ { name: `draw on canvas (\`ctx.drawImage(video, 0, 0)\`)`, fn: fetchFrame, ok: canvas => { canvas.style.width = '300px'; return canvas; } }, { name: `get data from context2d with \`.getImageData()\``, fn: fetchFirstPixel, ok: pixel => `The first pixel is ${JSON.stringify(pixel)}` }, { name: `CORS and tainted canvases`, fn: fetchFirstPixel, ok: pixel => md`The canvas is *not* [tainted](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases) > A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.`, nok: error => md`The canvas is [tainted](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#security_and_tainted_canvases) > A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.` }, { name: `convert the canvas to a Blob`, fn: fetchBlob, ok: blob => `The Blob size is ${(blob.size / 1024 / 1024).toFixed(1)} MB` }, { name: `convert the canvas to a data URL`, fn: fetchDataURL, ok: dataURL => `The data URL is ${dataURL.substring( 0, 30 )}... (${dataURL.length.toLocaleString()} characters)` } ] })31:T5b6,// adapted from https://observablehq.com/@mootari/signature function testRunner(tests, options = {}) { const { formatList = items => html`

${icon} ${name}: ${msg || ''}