1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76


content / test / data / gpu / pixel_webgpu_copy_externalImage_offscreenCanvas.html [blame]

<!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;

    async function main() {
      const canvas2d = document.getElementById('canvas_2d');
      if (typeof canvas2d.transferControlToOffscreen === 'undefined') {
        console.error('HTMLCanvasElement.transferControlToOffscreen is not supported');
        return null;
      }

      const offscreenCanvas = canvas2d.transferControlToOffscreen();
      if (typeof offscreenCanvas === 'undefined') {
        console.error('Cannot get offscreenCanvas');
        return null;
      }

      const c2d = offscreenCanvas.getContext("2d");
      if (!c2d) {
        console.error('getContext(2d) failed');
        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 renderCallback = function() {
        c2d.fillStyle = "rgb(0, 255, 0)";
        c2d.fillRect(0, 0, 100, 100);

        c2d.fillStyle = "rgb(255, 0, 0)";
        c2d.fillRect(0, 100, 100, 100);

        c2d.fillStyle = "rgb(255, 255, 0)";
        c2d.fillRect(100, 100, 100, 100);

        c2d.fillStyle = "rgb(0, 0, 255)";
        c2d.fillRect(100, 0, 100, 100);

        webGpuUtils.uploadToGPUTextureTest(gpuDevice, gpuContext, offscreenCanvas);

        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>