diff --git a/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.html.ts b/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.html.ts
index 834d4ffc17e8..161ae01d63b9 100644
--- a/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.html.ts
+++ b/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.html.ts
@@ -15,42 +15,50 @@ void (async () => {
   const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
   let deviceLost = false;
 
-  function draw(canvasId: string, alphaMode: GPUCanvasAlphaMode, abortAfterDeviceLost: boolean) {
-    if (deviceLost && abortAfterDeviceLost) {
-      return;
-    }
-
+  function draw(
+    canvasId: string,
+    alphaMode: GPUCanvasAlphaMode,
+    {
+      reconfigureAfterLost,
+      drawAfterLost,
+    }: { reconfigureAfterLost: boolean; drawAfterLost: boolean }
+  ) {
     const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
     const ctx = canvas.getContext('webgpu') as unknown as GPUCanvasContext;
-    ctx.configure({
-      device,
-      format: presentationFormat,
-      alphaMode,
-    });
+    if (!deviceLost || reconfigureAfterLost) {
+      ctx.configure({ device, format: presentationFormat, alphaMode });
+    }
 
-    const colorAttachment = ctx.getCurrentTexture();
-    const colorAttachmentView = colorAttachment.createView();
+    if (!deviceLost || drawAfterLost) {
+      const colorAttachment = ctx.getCurrentTexture();
+      const colorAttachmentView = colorAttachment.createView();
 
-    const encoder = device.createCommandEncoder();
-    const pass = encoder.beginRenderPass({
-      colorAttachments: [
-        {
-          view: colorAttachmentView,
-          clearValue: { r: 0.4, g: 1.0, b: 0.0, a: 1.0 },
-          loadOp: 'clear',
-          storeOp: 'store',
-        },
-      ],
-    });
-    pass.end();
-    device.queue.submit([encoder.finish()]);
+      const encoder = device.createCommandEncoder();
+      const pass = encoder.beginRenderPass({
+        colorAttachments: [
+          {
+            view: colorAttachmentView,
+            clearValue: { r: 0.4, g: 1.0, b: 0.0, a: 1.0 },
+            loadOp: 'clear',
+            storeOp: 'store',
+          },
+        ],
+      });
+      pass.end();
+      device.queue.submit([encoder.finish()]);
+    }
   }
 
   function drawAll() {
-    draw('cvs0', 'opaque', true);
-    draw('cvs1', 'opaque', false);
-    draw('cvs2', 'premultiplied', true);
-    draw('cvs3', 'premultiplied', false);
+    draw('cvs00', 'opaque', { reconfigureAfterLost: false, drawAfterLost: false });
+    draw('cvs01', 'opaque', { reconfigureAfterLost: false, drawAfterLost: true });
+    draw('cvs02', 'premultiplied', { reconfigureAfterLost: false, drawAfterLost: false });
+    draw('cvs03', 'premultiplied', { reconfigureAfterLost: false, drawAfterLost: true });
+
+    draw('cvs10', 'opaque', { reconfigureAfterLost: true, drawAfterLost: false });
+    draw('cvs11', 'opaque', { reconfigureAfterLost: true, drawAfterLost: true });
+    draw('cvs12', 'premultiplied', { reconfigureAfterLost: true, drawAfterLost: false });
+    draw('cvs13', 'premultiplied', { reconfigureAfterLost: true, drawAfterLost: true });
 
     if (!deviceLost) {
       device.destroy();
diff --git a/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.https.html b/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.https.html
index 03ff43580a0e..eee6fad2ebbe 100644
--- a/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.https.html
+++ b/src/webgpu/web_platform/reftests/canvas_display_after_device_lost.https.html
@@ -8,9 +8,14 @@
   <style>
     body { background-color: #F0E68C; }
   </style>
-  <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>
-  <canvas id="cvs3" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs00" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs01" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs02" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs03" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <br>
+  <canvas id="cvs10" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs11" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs12" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs13" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
   <script type="module" src="canvas_display_after_device_lost.html.js"></script>
 </html>
diff --git a/src/webgpu/web_platform/reftests/ref/canvas_display_after_device_lost-ref.html b/src/webgpu/web_platform/reftests/ref/canvas_display_after_device_lost-ref.html
index fbbbafb6fd05..d94fc2e6b176 100644
--- a/src/webgpu/web_platform/reftests/ref/canvas_display_after_device_lost-ref.html
+++ b/src/webgpu/web_platform/reftests/ref/canvas_display_after_device_lost-ref.html
@@ -6,10 +6,15 @@
   <style>
     body { background-color: #F0E68C; }
   </style>
-  <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>
-  <canvas id="cvs3" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs00" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs01" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs02" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs03" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <br>
+  <canvas id="cvs10" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs11" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs12" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs13" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
   <script>
     function draw(canvas, color) {
       var c = document.getElementById(canvas);
@@ -18,9 +23,14 @@
       ctx.fillRect(0, 0, c.width, c.height);
     }
 
-    draw('cvs0', '#66FF00');
-    draw('cvs1', '#000000');
-    draw('cvs2', '#66FF00');
-    draw('cvs3', '#00000000');
+    draw('cvs00', '#66FF00');
+    draw('cvs01', '#000000');
+    draw('cvs02', '#66FF00');
+    draw('cvs03', '#00000000');
+
+    draw('cvs10', '#000000');
+    draw('cvs11', '#000000');
+    draw('cvs12', '#00000000');
+    draw('cvs13', '#00000000');
  </script>
 </html>