| <!DOCTYPE html> |
| <title>GMs and unit tests against WASM/WebGL</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| #debug_canvas { |
| /* Same checkboard pattern as is on debugger.skia.org, just a little darker. */ |
| background-position: 0 0, 10px 10px; |
| background-size: 20px 20px; |
| background-image: linear-gradient(45deg, #CCC 25%, transparent 25%, transparent 75%, #CCC 75%, #CCC 100%), |
| linear-gradient(45deg, #CCC 25%, white 25%, white 75%, #CCC 75%, #CCC 100%); |
| } |
| </style> |
| |
| <canvas id=debug_canvas height=1000 width=1000></canvas> |
| |
| <canvas id=gm_canvas></canvas> |
| |
| <script type="text/javascript" src="/out/wasm_gm_tests.js"></script> |
| |
| <script type="text/javascript" charset="utf-8"> |
| const loadTests = InitWasmGMTests({ |
| locateFile: (file) => '/out/'+file, |
| }); |
| |
| Promise.all([loadTests]).then(([GM]) => { |
| RunGMs(GM); |
| }); |
| |
| function RunGMs(GM) { |
| const canvas = document.getElementById('gm_canvas'); |
| const ctx = GM.GetWebGLContext(canvas, 2); |
| const grcontext = GM.MakeGrContext(ctx); |
| requestAnimationFrame(drawQueuedPNGs); |
| |
| const names = GM.ListGMs(); |
| names.sort(); |
| for (const name of names) { |
| const pngAndHash = GM.RunGM(grcontext, name); |
| if (!pngAndHash) { |
| continue; |
| } |
| drawDebugPNG(pngAndHash.png); |
| // We need to know the digest of the image as well as which gm produced it. |
| // As such, we include both parts in the name. |
| outputPNG(pngAndHash.png, pngAndHash.hash + '_' + name + '.png'); |
| } |
| |
| grcontext.delete(); |
| } |
| |
| const msPerGM = 500; |
| let timeSinceLastPNGSwapped = 0; |
| const queuedDebugPNGs = []; |
| |
| // This decodes the given PNG and queues it up to be drawn. Because decoding the image |
| // (createImageBitmap) is asynchronous, we queue this in a list and have a drawing loop that |
| // occasionally pulls the next image off the queue to be displayed to the human. That way we |
| // have a minimum amount of time an image is seen so the human can casually inspect the outputs |
| // as they are generated. |
| function drawDebugPNG(pngBytes) { |
| const blob = new Blob([pngBytes], {type: 'image/png'}); |
| createImageBitmap(blob).then((bitmap) => { |
| queuedDebugPNGs.push(bitmap); |
| }); |
| } |
| |
| function drawQueuedPNGs() { |
| requestAnimationFrame(drawQueuedPNGs); |
| if (!queuedDebugPNGs.length) { |
| return; // no new image to show |
| } |
| if ((Date.now() - timeSinceLastPNGSwapped) < msPerGM) { |
| return; // not been displayed long enough. |
| } |
| // Draw the first image in the queue. |
| const bitmap = queuedDebugPNGs.shift(); |
| |
| const debugCanvas = document.getElementById('debug_canvas'); |
| debugCanvas.width = bitmap.width; |
| debugCanvas.height = bitmap.height; |
| |
| const ctx = debugCanvas.getContext('2d'); |
| ctx.clearRect(0, 0, 1000, 1000); |
| ctx.drawImage(bitmap, 0, 0); |
| timeSinceLastPNGSwapped = Date.now(); |
| } |
| |
| // This triggers a download of the created PNG using the provided filename. For a production |
| // testing environment, it will probably be good to swap this out with a webserver because it |
| // might not be easy to determine where the download folder for a given browser is. |
| function outputPNG(pngBytes, fileName) { |
| // https://stackoverflow.com/a/32094834 |
| const blob = new Blob([pngBytes], {type: 'image/png'}); |
| const url = window.URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| document.body.appendChild(a); |
| a.href = url; |
| a.download = fileName; |
| a.click(); |
| // clean up after because FF might not download it synchronously |
| setTimeout(function() { |
| URL.revokeObjectURL(url); |
| a.remove(); |
| }, 50); |
| } |
| |
| </script> |
