pixel_webgpu_copy_image.html | Explore in Territory

<!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>
chromium/content/test/data/gpu/pixel_webgpu_copy_image.html
