| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>WebGPU Canvas Save/Copy Image Test</title> |
| <style type="text/css"> |
| .nomargin { |
| margin: 0px auto; |
| } |
| </style> |
| <script type="text/javascript" src="pixel_webgpu_util.js"></script> |
| <script type="text/javascript"> |
| var g_swapsBeforeAck = 15; |
| |
| function waitForFinish() { |
| if (g_swapsBeforeAck == 0) { |
| sendResult("SUCCESS"); |
| } else { |
| g_swapsBeforeAck--; |
| window.requestAnimationFrame(waitForFinish); |
| } |
| } |
| |
| function sendResult(status) { |
| if (domAutomationController) { |
| domAutomationController.send(status); |
| } else { |
| console.log(status); |
| } |
| } |
| |
| async function main() { |
| const gpuCanvas = document.getElementById('canvas_gpu'); |
| const [gpuDevice, gpuContext] = await webGpuUtils.init(gpuCanvas); |
| if (!gpuDevice || !gpuContext) { |
| console.error("Failed to initialize WebGPU - skipping test"); |
| domAutomationController.send("FAILURE"); |
| return; |
| } |
| |
| const renderCallback = function() { |
| webGpuUtils.fourColorsTest(gpuDevice, gpuContext, gpuCanvas.width, |
| gpuCanvas.height); |
| |
| let dataURL = canvas_gpu.toDataURL(); |
| |
| let image = document.getElementById("image_in_frame"); |
| image.src = dataURL; |
| }; |
| |
| window.requestAnimationFrame(renderCallback); |
| |
| const toDataURLCallback = function() { |
| let dataURL = canvas_gpu.toDataURL(); |
| |
| let image = document.getElementById("image_post_frame"); |
| image.src = dataURL; |
| |
| waitForFinish(); |
| } |
| |
| window.requestAnimationFrame(toDataURLCallback); |
| |
| } |
| </script> |
| </head> |
| <body onload="main()"> |
| <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas> |
| <img id="image_in_frame" width="100" height="100" class="nomargin" style="background-color:black"> |
| <img id="image_post_frame" width="100" height="100" class="nomargin" style="background-color:black"> |
| </body> |
| </html> |
