diff --git a/src/webgpu/web_platform/reftests/canvas_image_rendering.https.html b/src/webgpu/web_platform/reftests/canvas_image_rendering.https.html
index f51145645be4..6a64b3da5dd1 100644
--- a/src/webgpu/web_platform/reftests/canvas_image_rendering.https.html
+++ b/src/webgpu/web_platform/reftests/canvas_image_rendering.https.html
@@ -5,11 +5,11 @@
   <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
   <meta name="assert" content="WebGPU canvas with image-rendering set should be rendered correctly" />
   <link rel="match" href="./ref/canvas_image_rendering-ref.html" />
-  <canvas id="elem1" width="64" height="64" style="width: 99px; height: 99px;"></canvas>
-  <canvas id="elem2" width="64" height="64" style="width: 99px; height: 99px; image-rendering: pixelated;"></canvas>
-  <canvas id="elem3" width="64" height="64" style="width: 99px; height: 99px; image-rendering: crisp-edges"></canvas>
-  <canvas id="elem4" width="64" height="64" style="width: 99px; height: 99px;"></canvas>
-  <canvas id="elem5" width="64" height="64" style="width: 99px; height: 99px; image-rendering: pixelated;"></canvas>
-  <canvas id="elem6" width="64" height="64" style="width: 99px; height: 99px; image-rendering: crisp-edges"></canvas>
+  <canvas id="elem1" width="64" height="64" style="width: 128px; height: 128px;"></canvas>
+  <canvas id="elem2" width="64" height="64" style="width: 128px; height: 128px; image-rendering: pixelated;"></canvas>
+  <canvas id="elem3" width="64" height="64" style="width: 128px; height: 128px; image-rendering: crisp-edges"></canvas>
+  <canvas id="elem4" width="64" height="64" style="width: 128px; height: 128px;"></canvas>
+  <canvas id="elem5" width="64" height="64" style="width: 128px; height: 128px; image-rendering: pixelated;"></canvas>
+  <canvas id="elem6" width="64" height="64" style="width: 128px; height: 128px; image-rendering: crisp-edges"></canvas>
   <script type="module" src="canvas_image_rendering.html.js"></script>
 </html>
diff --git a/src/webgpu/web_platform/reftests/ref/canvas_image_rendering-ref.html b/src/webgpu/web_platform/reftests/ref/canvas_image_rendering-ref.html
index f9eca704e870..56e3453c5614 100644
--- a/src/webgpu/web_platform/reftests/ref/canvas_image_rendering-ref.html
+++ b/src/webgpu/web_platform/reftests/ref/canvas_image_rendering-ref.html
@@ -3,12 +3,12 @@
   <title>WebGPU canvas_image_rendering (ref)</title>
   <meta charset="utf-8" />
   <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
-  <img id="elem1" width="64" height="64" style="width: 99px; height: 99px;">
-  <img id="elem2" width="64" height="64" style="width: 99px; height: 99px; image-rendering: pixelated;">
-  <img id="elem3" width="64" height="64" style="width: 99px; height: 99px; image-rendering: crisp-edges">
-  <img id="elem4" width="64" height="64" style="width: 99px; height: 99px;">
-  <img id="elem5" width="64" height="64" style="width: 99px; height: 99px; image-rendering: pixelated;">
-  <img id="elem6" width="64" height="64" style="width: 99px; height: 99px; image-rendering: crisp-edges">
+  <img id="elem1" width="64" height="64" style="width: 128px; height: 128px;">
+  <img id="elem2" width="64" height="64" style="width: 128px; height: 128px; image-rendering: pixelated;">
+  <img id="elem3" width="64" height="64" style="width: 128px; height: 128px; image-rendering: crisp-edges">
+  <img id="elem4" width="64" height="64" style="width: 128px; height: 128px;">
+  <img id="elem5" width="64" height="64" style="width: 128px; height: 128px; image-rendering: pixelated;">
+  <img id="elem6" width="64" height="64" style="width: 128px; height: 128px; image-rendering: crisp-edges">
   <script type="module">
     import { takeScreenshotDelayed } from '../../../../common/util/wpt_reftest_wait.js';