1 files changed, 79 insertions, 0 deletions
diff --git a/dom/webgpu/tests/cts/checkout/src/webgpu/web_platform/reftests/canvas_image_rendering.html.ts b/dom/webgpu/tests/cts/checkout/src/webgpu/web_platform/reftests/canvas_image_rendering.html.ts
new file mode 100644
index 0000000000..5eda39268e
--- /dev/null
+++ b/dom/webgpu/tests/cts/checkout/src/webgpu/web_platform/reftests/canvas_image_rendering.html.ts
@@ -0,0 +1,79 @@
+import { runRefTest } from './gpu_ref_test.js';
+
+runRefTest(async t => {
+  const device = t.device;
+  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+
+  const module = device.createShaderModule({
+    code: `
+      @vertex fn vs(
+        @builtin(vertex_index) VertexIndex : u32
+      ) -> @builtin(position) vec4<f32> {
+        var pos = array<vec2<f32>, 3>(
+        vec2(-1.0, 3.0),
+        vec2(-1.0,-1.0),
+        vec2( 3.0,-1.0)
+        );
+
+        return vec4(pos[VertexIndex], 0.0, 1.0);
+      }
+
+      @fragment fn fs(
+         @builtin(position) Pos : vec4<f32>
+      ) -> @location(0) vec4<f32> {
+        let black = vec4f(0, 0, 0, 1);
+        let white = vec4f(1, 1, 1, 1);
+        let iPos = vec4u(Pos);
+        let check = (iPos.x + iPos.y) & 1;
+        return mix(black, white, f32(check));
+      }
+    `,
+  });
+
+  const pipeline = device.createRenderPipeline({
+    layout: 'auto',
+    vertex: {
+      module,
+      entryPoint: 'vs',
+    },
+    fragment: {
+      module,
+      entryPoint: 'fs',
+      targets: [{ format: presentationFormat }],
+    },
+  });
+
+  function draw(selector: string, alphaMode: GPUCanvasAlphaMode) {
+    const canvas = document.querySelector(selector) as HTMLCanvasElement;
+    const context = canvas.getContext('webgpu') as GPUCanvasContext;
+    context.configure({
+      device,
+      format: presentationFormat,
+      alphaMode,
+    });
+
+    const encoder = device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: context.getCurrentTexture().createView(),
+          clearValue: [0.0, 0.0, 0.0, 0.0],
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+    });
+    pass.setPipeline(pipeline);
+    pass.draw(3);
+    pass.end();
+
+    device.queue.submit([encoder.finish()]);
+  }
+
+  draw('#elem1', 'premultiplied');
+  draw('#elem2', 'premultiplied');
+  draw('#elem3', 'premultiplied');
+  draw('#elem4', 'opaque');
+  draw('#elem5', 'opaque');
+  draw('#elem6', 'opaque');
+});