pixel_webgpu_copy_externalImage_imageData.html

<!DOCTYPE html>
<html>
<head>
  <title>WebGPU copyExternalImageToTexture 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 initPixelData(pixels, subRectangle, canvasWidth, bytesPerPixel, pixelValue) {
      for (let i = subRectangle.y; i < subRectangle.y + subRectangle.height; i++) {
        for (let j = subRectangle.x; j < subRectangle.x + subRectangle.width; j++) {
          const pixelPos = i * canvasWidth + j;
          pixels.set(new Uint8Array(pixelValue), pixelPos * bytesPerPixel);
        }
      }
    }

    async function main() {
      const canvas2d = document.getElementById('canvas_2d');
      const c2d = canvas2d.getContext("2d");
      if (!c2d) {
        console.error('getContext(2d) failed');
        return null;
      }

      if (typeof OffscreenCanvas === 'undefined') {
        console.error('Browser not support OffscreenCanvas');
        return null;
      }

      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 bytesPerPixel = 4; // rgba8unorm
      const pixelData = new Uint8ClampedArray(bytesPerPixel * canvas2d.width * canvas2d.height);

      // Green rectangle on top-left
      initPixelData(pixelData, {x: 0, y: 0, width: 100, height: 100}, canvas2d.width,
                    bytesPerPixel, new Uint8Array([0, 255, 0, 255]));

      // Red rectangle on bottom-left
      initPixelData(pixelData, {x: 0, y: 100, width: 100, height: 100}, canvas2d.width,
                    bytesPerPixel, new Uint8Array([255, 0, 0, 255]));

      // Yellow rectangle on bottom-right
      initPixelData(pixelData, {x: 100, y: 100, width: 100, height: 100}, canvas2d.width,
                    bytesPerPixel, new Uint8Array([255, 255, 0, 255]));

      // Blue rectangle on top-right
      initPixelData(pixelData, {x: 100, y: 0, width: 100, height: 100}, canvas2d.width,
                    bytesPerPixel, new Uint8Array([0, 0, 255, 255]));

      const imageData = new ImageData(pixelData, canvas2d.width, canvas2d.height);
      const imageBitmap = await createImageBitmap(imageData);

      const renderCallback = function() {
        c2d.drawImage(imageBitmap, 0, 0, canvas2d.width, canvas2d.height);

        webGpuUtils.uploadToGPUTextureTest(gpuDevice, gpuContext, imageBitmap);

        waitForFinish();
      };

      window.requestAnimationFrame(renderCallback);
    }

    function waitForFinish() {
      if (g_swapsBeforeAck == 0) {
        domAutomationController.send("SUCCESS");
      } else {
        g_swapsBeforeAck--;
        window.requestAnimationFrame(waitForFinish);
      }
    }
  </script>
</head>
<body onload="main()">
  <canvas id="canvas_2d" width="200" height="200" class="nomargin"></canvas>
  <canvas id="canvas_gpu" width="200" height="200" class="nomargin"></canvas>
</body>
</html>
chromium/content/test/data/gpu/pixel_webgpu_copy_externalImage_imageData.html
