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
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95


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

<!DOCTYPE html>
<html>
<!--
Clears a WebGPU canvas to color(linear-srgb 234 51 35).
When displayed, this appears as rgb(246 124 104).
Display the canvas next to the correct color and a likely incorrect color.
-->
<head>
  <style type="text/css">
    .nomargin {
      margin: 0;
    }
  </style>
  <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 (window.domAutomationController) {
        window.domAutomationController.send(status);
      } else {
        console.log(status);
      }
    }

    var g_swapsBeforeAck = 15;
    function waitForFinish() {
      if (g_swapsBeforeAck == 0) {
        sendResult("SUCCESS");
      } else {
        g_swapsBeforeAck--;
        window.requestAnimationFrame(waitForFinish);
      }
    }

    async function main() {
      const canvas = document.getElementById('canvas_gpu');
      const adapter = await navigator.gpu?.requestAdapter();
      const device = await adapter?.requestDevice();
      const context = canvas.getContext('webgpu');
      if (!device || !context) {
        console.error("Failed to initialize WebGPU");
        sendResult("FAILURE");
      }

      context.configure({
        device: device,
        format: 'bgra8unorm',
        viewFormats: ['bgra8unorm-srgb'],
        usage: GPUTextureUsage.RENDER_ATTACHMENT,
        alphaMode: 'premultiplied',
      });

      const renderPassDescriptor = {
        colorAttachments: [
          {
            view: context.getCurrentTexture().createView({
              format: 'bgra8unorm-srgb'
            }),
            clearValue: { r: 234 / 255, g: 51 / 255, b: 35 / 255, a: 1.0 },
            loadOp: 'clear',
            storeOp: 'store',
          },
        ],
      };

      const commandEncoder = device.createCommandEncoder();
      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
      passEncoder.end();
      device.queue.submit([commandEncoder.finish()]);

      waitForFinish();
    }
  </script>
</head>

<body onload="main()" style="background:white;">
  <canvas id="canvas_gpu" style="width:150px; height:150px; position:absolute; top:0px; left:0px; background: rgb(0% 100% 0%);"></canvas>
  <div style="width:150px; height:150px; position:absolute; top:150px; left:0px; background: rgb(234 51 35);">
    <p>The canvas above SHOULD NOT match this color</p>
  </div>
  <div style="width:150px; height:150px; position:absolute; top:0px; left:150px; background: rgb(246 124 104);">
    <p>The canvas to the left SHOULD match this color</p>
  </div>
</body>

</html>