From 1ab815dcaa32dc6f3dbb2e3e9f08723a155c39a4 Mon Sep 17 00:00:00 2001
From: Austin Eng <enga@chromium.org>
Date: Fri, 10 Jun 2022 22:00:33 +0000
Subject: [PATCH] Add generated webtest .html files

Bug: chromium:1333969
Change-Id: I9b704eee654a96e96473a101157ce7fab4cc864e
Reviewed-on: https://dawn-review.googlesource.com/c/dawn/+/93341
Reviewed-by: Kai Ninomiya <kainino@chromium.org>
Commit-Queue: Austin Eng <enga@chromium.org>
---
 webgpu-cts/webtests/idl/exposed.http.html     | 12 +++
 webgpu-cts/webtests/idl/exposed.https.html    | 12 +++
 .../reftests/canvas_clear.https.html          | 13 +++
 .../canvas_complex_bgra8unorm_copy.https.html | 25 +++++
 .../canvas_complex_bgra8unorm_draw.https.html | 25 +++++
 ...canvas_complex_rgba16float_copy.https.html | 25 +++++
 ...canvas_complex_rgba16float_draw.https.html | 25 +++++
 ...anvas_complex_rgba16float_store.https.html | 25 +++++
 .../canvas_complex_rgba8unorm_copy.https.html | 25 +++++
 .../canvas_complex_rgba8unorm_draw.https.html | 25 +++++
 ...canvas_complex_rgba8unorm_store.https.html | 25 +++++
 ...te_alpha_bgra8unorm_opaque_copy.https.html | 21 ++++
 ...te_alpha_bgra8unorm_opaque_draw.https.html | 21 ++++
 ...a_bgra8unorm_premultiplied_copy.https.html | 22 +++++
 ...a_bgra8unorm_premultiplied_draw.https.html | 22 +++++
 ...e_alpha_rgba16float_opaque_copy.https.html | 21 ++++
 ...e_alpha_rgba16float_opaque_draw.https.html | 21 ++++
 ..._rgba16float_premultiplied_copy.https.html | 22 +++++
 ..._rgba16float_premultiplied_draw.https.html | 22 +++++
 ...te_alpha_rgba8unorm_opaque_copy.https.html | 21 ++++
 ...te_alpha_rgba8unorm_opaque_draw.https.html | 21 ++++
 ...a_rgba8unorm_premultiplied_copy.https.html | 22 +++++
 ...a_rgba8unorm_premultiplied_draw.https.html | 22 +++++
 ...different_with_back_buffer_size.https.html | 26 +++++
 .../reftests/ref/canvas_clear-ref.html        | 22 +++++
 .../reftests/ref/canvas_complex-ref.html      | 26 +++++
 .../canvas_composite_alpha_opaque-ref.html    | 22 +++++
 ...vas_composite_alpha_premultiplied-ref.html | 22 +++++
 ...e_different_with_back_buffer_size-ref.html | 99 +++++++++++++++++++
 29 files changed, 712 insertions(+)
 create mode 100644 webgpu-cts/webtests/idl/exposed.http.html
 create mode 100644 webgpu-cts/webtests/idl/exposed.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_clear.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_store.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_store.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_copy.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_draw.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/canvas_size_different_with_back_buffer_size.https.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/ref/canvas_clear-ref.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/ref/canvas_complex-ref.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html
 create mode 100644 webgpu-cts/webtests/web_platform/reftests/ref/canvas_size_different_with_back_buffer_size-ref.html

diff --git a/webgpu-cts/webtests/idl/exposed.http.html b/webgpu-cts/webtests/idl/exposed.http.html
new file mode 100644
index 0000000000..9551fe78c0
--- /dev/null
+++ b/webgpu-cts/webtests/idl/exposed.http.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <head>
+    <meta charset=utf-8>
+    <title>WebGPU exposed items (non-HTTPS)</title>
+    <meta name=assert content="WebGPU should not be exposed on a non-[SecureContext]">
+    <link rel=help href='https://gpuweb.github.io/gpuweb/'>
+    <script type=module src=exposed.html.js></script>
+  </head>
+  <body></body>
+</html>
diff --git a/webgpu-cts/webtests/idl/exposed.https.html b/webgpu-cts/webtests/idl/exposed.https.html
new file mode 100644
index 0000000000..8cfc877c50
--- /dev/null
+++ b/webgpu-cts/webtests/idl/exposed.https.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <head>
+    <title>WebGPU exposed items (HTTPS)</title>
+    <meta charset=utf-8>
+    <meta name=assert content="All specified WebGPU items/interfaces should be exposed, on a [SecureContext]">
+    <link rel=help href='https://gpuweb.github.io/gpuweb/'>
+    <script type=module src=exposed.html.js></script>
+  </head>
+  <body></body>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_clear.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_clear.https.html
new file mode 100644
index 0000000000..c346947d86
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_clear.https.html
@@ -0,0 +1,13 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_clear</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta name="assert" content="WebGPU cleared canvas should be presented correctly" />
+  <link rel="match" href="./ref/canvas_clear-ref.html" />
+  <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs1" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs2" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module" src="canvas_clear.html.js"></script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_copy.https.html
new file mode 100644
index 0000000000..ed3790663b
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_copy.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_bgra8unorm_copy</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_copy_buffer_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_copy_texture_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_copy_external_image_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('bgra8unorm', [
+      { cvs: cvs_copy_buffer_to_texture, writeCanvasMethod: 'copyBufferToTexture' },
+      { cvs: cvs_copy_texture_to_texture, writeCanvasMethod: 'copyTextureToTexture' },
+      { cvs: cvs_copy_external_image_to_texture, writeCanvasMethod: 'copyExternalImageToTexture' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_draw.https.html
new file mode 100644
index 0000000000..04184cb462
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_bgra8unorm_draw.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_bgra8unorm_draw</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_draw_texture_sample" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_draw_vertex_color" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_draw_fragcoord" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('bgra8unorm', [
+      { cvs: cvs_draw_texture_sample, writeCanvasMethod: 'DrawTextureSample' },
+      { cvs: cvs_draw_vertex_color, writeCanvasMethod: 'DrawVertexColor' },
+      { cvs: cvs_draw_fragcoord, writeCanvasMethod: 'DrawFragcoord' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_copy.https.html
new file mode 100644
index 0000000000..7efd826c6f
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_copy.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_rgba16float_copy</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_copy_buffer_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_copy_texture_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_copy_external_image_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('rgba16float', [
+      { cvs: cvs_copy_buffer_to_texture, writeCanvasMethod: 'copyBufferToTexture' },
+      { cvs: cvs_copy_texture_to_texture, writeCanvasMethod: 'copyTextureToTexture' },
+      { cvs: cvs_copy_external_image_to_texture, writeCanvasMethod: 'copyExternalImageToTexture' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_draw.https.html
new file mode 100644
index 0000000000..dbfee75224
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_draw.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_rgba16float_draw</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_draw_texture_sample" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_draw_vertex_color" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_draw_fragcoord" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('rgba16float', [
+      { cvs: cvs_draw_texture_sample, writeCanvasMethod: 'DrawTextureSample' },
+      { cvs: cvs_draw_vertex_color, writeCanvasMethod: 'DrawVertexColor' },
+      { cvs: cvs_draw_fragcoord, writeCanvasMethod: 'DrawFragcoord' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_store.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_store.https.html
new file mode 100644
index 0000000000..c514e41897
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba16float_store.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_rgba16float_store</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_fragment_texture_store" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_compute_texture_store_1" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_compute_texture_store_2" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('rgba16float', [
+      { cvs: cvs_fragment_texture_store, writeCanvasMethod: 'FragmentTextureStore' },
+      { cvs: cvs_compute_texture_store_1, writeCanvasMethod: 'ComputeWorkgroup1x1TextureStore' },
+      { cvs: cvs_compute_texture_store_2, writeCanvasMethod: 'ComputeWorkgroup16x16TextureStore' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_copy.https.html
new file mode 100644
index 0000000000..e202420809
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_copy.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_rgba8unorm_copy</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_copy_buffer_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_copy_texture_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_copy_external_image_to_texture" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('rgba8unorm', [
+      { cvs: cvs_copy_buffer_to_texture, writeCanvasMethod: 'copyBufferToTexture' },
+      { cvs: cvs_copy_texture_to_texture, writeCanvasMethod: 'copyTextureToTexture' },
+      { cvs: cvs_copy_external_image_to_texture, writeCanvasMethod: 'copyExternalImageToTexture' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_draw.https.html
new file mode 100644
index 0000000000..62e7eb3cb5
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_draw.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_rgba8unorm_draw</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_draw_texture_sample" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_draw_vertex_color" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_draw_fragcoord" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('rgba8unorm', [
+      { cvs: cvs_draw_texture_sample, writeCanvasMethod: 'DrawTextureSample' },
+      { cvs: cvs_draw_vertex_color, writeCanvasMethod: 'DrawVertexColor' },
+      { cvs: cvs_draw_fragcoord, writeCanvasMethod: 'DrawFragcoord' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_store.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_store.https.html
new file mode 100644
index 0000000000..e8c6d24fe5
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_complex_rgba8unorm_store.https.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex_rgba8unorm_store</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_complex-ref.html" />
+
+  <canvas id="cvs_fragment_texture_store" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_compute_texture_store_1" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs_compute_texture_store_2" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_complex.html.js';
+    run('rgba8unorm', [
+      { cvs: cvs_fragment_texture_store, writeCanvasMethod: 'FragmentTextureStore' },
+      { cvs: cvs_compute_texture_store_1, writeCanvasMethod: 'ComputeWorkgroup1x1TextureStore' },
+      { cvs: cvs_compute_texture_store_2, writeCanvasMethod: 'ComputeWorkgroup16x16TextureStore' },
+    ]);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_copy.https.html
new file mode 100644
index 0000000000..d500ba8829
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_copy.https.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_bgra8unorm_opaque</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_opaque-ref.html" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('bgra8unorm', 'opaque', 'copy');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_draw.https.html
new file mode 100644
index 0000000000..bc0bdbb59d
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_opaque_draw.https.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_bgra8unorm_opaque</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_opaque-ref.html" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('bgra8unorm', 'opaque', 'draw');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_copy.https.html
new file mode 100644
index 0000000000..a112bf4230
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_copy.https.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_bgra8unorm_premultiplied</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_premultiplied-ref.html" />
+  <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-400">
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('bgra8unorm', 'premultiplied', 'copy');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_draw.https.html
new file mode 100644
index 0000000000..995bf0b408
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_bgra8unorm_premultiplied_draw.https.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_bgra8unorm_premultiplied</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_premultiplied-ref.html" />
+  <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-400">
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('bgra8unorm', 'premultiplied', 'draw');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_copy.https.html
new file mode 100644
index 0000000000..b19fa2fed3
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_copy.https.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba16float_opaque</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_opaque-ref.html" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba16float', 'opaque', 'copy');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_draw.https.html
new file mode 100644
index 0000000000..35433dabe8
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_opaque_draw.https.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba16float_opaque</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_opaque-ref.html" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba16float', 'opaque', 'draw');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_copy.https.html
new file mode 100644
index 0000000000..57cf44253d
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_copy.https.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba16float_premultiplied</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_premultiplied-ref.html" />
+  <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-400">
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba16float', 'premultiplied', 'copy');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_draw.https.html
new file mode 100644
index 0000000000..85fbdf712e
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba16float_premultiplied_draw.https.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba16float_premultiplied</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_premultiplied-ref.html" />
+  <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-400">
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba16float', 'premultiplied', 'draw');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_copy.https.html
new file mode 100644
index 0000000000..a8c597bd8f
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_copy.https.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba8unorm_opaque</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_opaque-ref.html" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba8unorm', 'opaque', 'copy');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_draw.https.html
new file mode 100644
index 0000000000..73cb9635e5
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_opaque_draw.https.html
@@ -0,0 +1,21 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba8unorm_opaque</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_opaque-ref.html" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba8unorm', 'opaque', 'draw');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_copy.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_copy.https.html
new file mode 100644
index 0000000000..b4df76bb77
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_copy.https.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba8unorm_premultiplied</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_premultiplied-ref.html" />
+  <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-400">
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba8unorm', 'premultiplied', 'copy');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_draw.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_draw.https.html
new file mode 100644
index 0000000000..fa6467bbb9
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_composite_alpha_rgba8unorm_premultiplied_draw.https.html
@@ -0,0 +1,22 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_rgba8unorm_premultiplied</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should have correct orientation, components, scaling, filtering, color space"
+  />
+  <link rel="match" href="./ref/canvas_composite_alpha_premultiplied-ref.html" />
+  <meta name=fuzzy content="maxDifference=0-2;totalPixels=0-400">
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    cvs.style.imageRendering = 'pixelated';
+    import { run } from './canvas_composite_alpha.html.js';
+    run('rgba8unorm', 'premultiplied', 'draw');
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/canvas_size_different_with_back_buffer_size.https.html b/webgpu-cts/webtests/web_platform/reftests/canvas_size_different_with_back_buffer_size.https.html
new file mode 100644
index 0000000000..80d3fe9cd1
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/canvas_size_different_with_back_buffer_size.https.html
@@ -0,0 +1,26 @@
+<html class="reftest-wait">
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_back_buffer_different_size</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta
+    name="assert"
+    content="WebGPU canvas should present correctly with different size of back buffer"
+  />
+  <meta name=fuzzy content="maxDifference=1;totalPixels=0-2000">
+  <link rel="match"
+        href="./ref/canvas_size_different_with_back_buffer_size-ref.html" />
+
+  <canvas id="cvs_larger_than_back_buffer" width="6" height="8"></canvas>
+  <canvas id="cvs_same_as_back_buffer" width="3" height="4"></canvas>
+  <canvas id="cvs_smaller_than_back_buffer" width="3" height="4"></canvas>
+  <canvas id="cvs_change_size_after_configure" width="3" height="4"></canvas>
+  <canvas id="cvs_change_size_and_reconfigure" width="3" height="4"></canvas>
+  <canvas id="back_buffer_smaller_than_cvs_and_css" width="6" height="8" style="width: 12px; height: 16px;"></canvas>
+  <canvas id="cvs_smaller_than_back_buffer_and_css" width="3" height="4" style="width: 12px; height: 16px;"></canvas>
+  <script src="/common/reftest-wait.js"></script>
+  <script type="module">
+    import { run } from './canvas_size_different_with_back_buffer_size.html.js';
+    run();
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/ref/canvas_clear-ref.html b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_clear-ref.html
new file mode 100644
index 0000000000..9d43d2396e
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_clear-ref.html
@@ -0,0 +1,22 @@
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_clear (ref)</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs1" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs2" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script>
+    function draw(canvas) {
+      var c = document.getElementById(canvas);
+      var ctx = c.getContext('2d');
+      ctx.fillStyle = '#66FF00';
+      ctx.fillRect(0, 0, c.width, c.height);
+    }
+
+    draw('cvs0');
+    draw('cvs1');
+    draw('cvs2');
+
+ </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/ref/canvas_complex-ref.html b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_complex-ref.html
new file mode 100644
index 0000000000..76161086d4
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_complex-ref.html
@@ -0,0 +1,26 @@
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_complex (ref)</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <canvas id="cvs0" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs1" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs2" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script>
+    function draw(ctx) {
+      ctx.fillStyle = '#660000';
+      ctx.fillRect(0, 0, 10, 10);
+      ctx.fillStyle = '#006600';
+      ctx.fillRect(10, 0, 10, 10);
+      ctx.fillStyle = '#000066';
+      ctx.fillRect(0, 10, 10, 10);
+      ctx.fillStyle = '#666600';
+      ctx.fillRect(10, 10, 10, 10);
+    }
+
+    draw(cvs0.getContext('2d'));
+    draw(cvs1.getContext('2d'));
+    draw(cvs2.getContext('2d'));
+    
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html
new file mode 100644
index 0000000000..76aa7f8f0e
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_opaque-ref.html
@@ -0,0 +1,22 @@
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_premultiplied (ref)</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script>
+    const ctx = cvs.getContext('2d');
+    ctx.globalAlpha = 1.0;
+    ctx.fillStyle = '#660000';
+    ctx.fillRect(0, 0, 15, 15);
+    ctx.fillStyle = '#006600';
+    ctx.fillRect(5, 0, 15, 15);
+    ctx.fillStyle = '#000066';
+    ctx.fillRect(0, 5, 15, 20);
+    ctx.fillStyle = '#666600';
+    ctx.fillRect(5, 5, 20, 20);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html
new file mode 100644
index 0000000000..83f5a15a39
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_composite_alpha_premultiplied-ref.html
@@ -0,0 +1,22 @@
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_composite_alpha_premultiplied (ref)</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <style>
+    body { background-color: #F0E68C; }
+  </style>
+  <canvas id="cvs" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <script>
+    const ctx = cvs.getContext('2d');
+    ctx.globalAlpha = 0.5;
+    ctx.fillStyle = '#660000';
+    ctx.fillRect(0, 0, 15, 15);
+    ctx.fillStyle = '#006600';
+    ctx.fillRect(5, 0, 15, 15);
+    ctx.fillStyle = '#000066';
+    ctx.fillRect(0, 5, 15, 20);
+    ctx.fillStyle = '#666600';
+    ctx.fillRect(5, 5, 20, 20);
+  </script>
+</html>
diff --git a/webgpu-cts/webtests/web_platform/reftests/ref/canvas_size_different_with_back_buffer_size-ref.html b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_size_different_with_back_buffer_size-ref.html
new file mode 100644
index 0000000000..0c4130b197
--- /dev/null
+++ b/webgpu-cts/webtests/web_platform/reftests/ref/canvas_size_different_with_back_buffer_size-ref.html
@@ -0,0 +1,99 @@
+<html>
+  <base ref="/gen/third_party/dawn/webgpu-cts/src/webgpu" />
+  <title>WebGPU canvas_back_buffer_different_size (ref)</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <canvas id="cvs_larger_than_back_buffer_ref" width="3" height="4" style="width: 6px; height: 8px;"></canvas>
+  <canvas id="cvs_same_as_back_buffer_ref" width="3" height="4"></canvas>
+  <canvas id="cvs_smaller_than_back_buffer_ref" width="6" height="8" style="width: 3px; height: 4px;"></canvas>
+  <canvas id="cvs_change_size_after_configure_ref" width="3" height="4" style="width: 6px; height: 8px;"></canvas>
+  <canvas id="cvs_change_size_and_reconfigure_ref" width="6" height="8"></canvas>
+  <canvas id="back_buffer_smaller_than_cvs_and_css_ref" width="3" height="4" style="width: 12px; height: 16px;"></canvas>
+  <canvas id="cvs_smaller_than_back_buffer_and_css" width="6" height="8" style="width: 12px; height: 16px;"></canvas>
+  <script>
+  {
+    const context = cvs_larger_than_back_buffer_ref.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 2, 2);
+    context.fillStyle = "#00FF00";
+    context.fillRect(2, 0, 1, 2);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 2, 2, 2);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(2, 2, 1, 2);
+    }
+
+    {
+    const context = cvs_same_as_back_buffer_ref.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 2, 2);
+    context.fillStyle = "#00FF00";
+    context.fillRect(2, 0, 1, 2);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 2, 2, 2);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(2, 2, 1, 2);
+    }
+
+    {
+    const context = cvs_smaller_than_back_buffer_ref.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 4, 4);
+    context.fillStyle = "#00FF00";
+    context.fillRect(4, 0, 2, 4);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 4, 4, 4);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(4, 4, 2, 4);
+    }
+
+    {
+    const context = cvs_change_size_after_configure_ref.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 2, 2);
+    context.fillStyle = "#00FF00";
+    context.fillRect(2, 0, 1, 2);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 2, 2, 2);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(2, 2, 1, 2);
+    }
+
+    {
+    const context = cvs_change_size_and_reconfigure_ref.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 4, 4);
+    context.fillStyle = "#00FF00";
+    context.fillRect(4, 0, 2, 4);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 4, 4, 4);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(4, 4, 2, 4);
+    }
+
+    {
+    const context = back_buffer_smaller_than_cvs_and_css_ref.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 2, 2);
+    context.fillStyle = "#00FF00";
+    context.fillRect(2, 0, 1, 2);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 2, 2, 2);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(2, 2, 1, 2);
+    }
+
+    {
+    const context = cvs_smaller_than_back_buffer_and_css.getContext('2d');
+    context.fillStyle = "#FF0000";
+    context.fillRect(0, 0, 4, 4);
+    context.fillStyle = "#00FF00";
+    context.fillRect(4, 0, 2, 4);
+    context.fillRect(2, 1, 1, 1);
+    context.fillStyle = "#0000FF";
+    context.fillRect(0, 4, 4, 4);
+    context.fillStyle = "#FFFF00";
+    context.fillRect(4, 4, 2, 4);
+    }
+  </script>
+</html>