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..1caf52063919 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,84 @@ 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,
+    {
+      unconfigureBeforeLost,
+      reconfigureAfterLost,
+      drawAfterLost,
+    }: {
+      unconfigureBeforeLost: boolean;
+      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 });
+    }
+
+    if (!deviceLost || drawAfterLost) {
+      let threw;
+      try {
+        const colorAttachment = ctx.getCurrentTexture();
+        threw = false;
+        const colorAttachmentView = colorAttachment.createView();
 
-    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()]);
+      } catch (ex) {
+        threw = true;
+      }
+
+      // If this assert fails, takeScreenshotDelayed will never be called, and the test will time out .
+      assert(
+        threw === (deviceLost && unconfigureBeforeLost && !reconfigureAfterLost),
+        'getCurrentTexture() should throw iff the canvas is unconfigured'
+      );
+    }
 
-    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()]);
+    if (!deviceLost && unconfigureBeforeLost) {
+      ctx.unconfigure();
+    }
   }
 
   function drawAll() {
-    draw('cvs0', 'opaque', true);
-    draw('cvs1', 'opaque', false);
-    draw('cvs2', 'premultiplied', true);
-    draw('cvs3', 'premultiplied', false);
+    /* prettier-ignore */
+    {
+      draw('cvs00', 'opaque',        { unconfigureBeforeLost: false, reconfigureAfterLost: false, drawAfterLost: false });
+      draw('cvs01', 'opaque',        { unconfigureBeforeLost: false, reconfigureAfterLost: false, drawAfterLost:  true });
+      draw('cvs02', 'premultiplied', { unconfigureBeforeLost: false, reconfigureAfterLost: false, drawAfterLost: false });
+      draw('cvs03', 'premultiplied', { unconfigureBeforeLost: false, reconfigureAfterLost: false, drawAfterLost:  true });
+
+      draw('cvs10', 'opaque',        { unconfigureBeforeLost: false, reconfigureAfterLost:  true, drawAfterLost: false });
+      draw('cvs11', 'opaque',        { unconfigureBeforeLost: false, reconfigureAfterLost:  true, drawAfterLost:  true });
+      draw('cvs12', 'premultiplied', { unconfigureBeforeLost: false, reconfigureAfterLost:  true, drawAfterLost: false });
+      draw('cvs13', 'premultiplied', { unconfigureBeforeLost: false, reconfigureAfterLost:  true, drawAfterLost:  true });
+
+      draw('cvs20', 'opaque',        { unconfigureBeforeLost:  true, reconfigureAfterLost: false, drawAfterLost: false });
+      draw('cvs21', 'opaque',        { unconfigureBeforeLost:  true, reconfigureAfterLost: false, drawAfterLost:  true });
+      draw('cvs22', 'premultiplied', { unconfigureBeforeLost:  true, reconfigureAfterLost: false, drawAfterLost: false });
+      draw('cvs23', 'premultiplied', { unconfigureBeforeLost:  true, reconfigureAfterLost: false, drawAfterLost:  true });
+
+      draw('cvs30', 'opaque',        { unconfigureBeforeLost:  true, reconfigureAfterLost:  true, drawAfterLost: false });
+      draw('cvs31', 'opaque',        { unconfigureBeforeLost:  true, reconfigureAfterLost:  true, drawAfterLost:  true });
+      draw('cvs32', 'premultiplied', { unconfigureBeforeLost:  true, reconfigureAfterLost:  true, drawAfterLost: false });
+      draw('cvs33', 'premultiplied', { unconfigureBeforeLost:  true, 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..ddb92beed20a 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
@@ -7,10 +7,26 @@
   <link rel="match" href="./ref/canvas_display_after_device_lost-ref.html" />
   <style>
     body { background-color: #F0E68C; }
+    canvas { border: 1px solid white; }
   </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>
+  <br>
+  <canvas id="cvs20" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs21" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs22" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs23" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <br>
+  <canvas id="cvs30" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs31" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs32" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs33" 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..4920039bc784 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
@@ -5,11 +5,27 @@
   <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
   <style>
     body { background-color: #F0E68C; }
+    canvas { border: 1px solid white; }
   </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>
+  <br>
+  <canvas id="cvs20" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs21" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs22" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs23" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <br>
+  <canvas id="cvs30" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs31" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs32" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
+  <canvas id="cvs33" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
   <script>
     function draw(canvas, color) {
       var c = document.getElementById(canvas);
@@ -18,9 +34,24 @@
       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');
+
+    draw('cvs20', '#00000000');
+    draw('cvs21', '#00000000');
+    draw('cvs22', '#00000000');
+    draw('cvs23', '#00000000');
+
+    draw('cvs30', '#000000');
+    draw('cvs31', '#000000');
+    draw('cvs32', '#00000000');
+    draw('cvs33', '#00000000');
  </script>
 </html>