From ada6541e56b885c1583d0a1950a4ccf665b59621 Mon Sep 17 00:00:00 2001
From: Kai Ninomiya <kainino@chromium.org>
Date: Tue, 23 Apr 2024 19:14:57 -0700
Subject: [PATCH 1/3] Add cases that redraw without reconfiguring

---
 .../canvas_display_after_device_lost.html.ts  | 66 +++++++++++--------
 ...anvas_display_after_device_lost.https.html | 13 ++--
 .../canvas_display_after_device_lost-ref.html | 26 +++++---
 3 files changed, 64 insertions(+), 41 deletions(-)

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>

From b60b28c1eb2db9f44c59554551fd3f40eaf355fb Mon Sep 17 00:00:00 2001
From: Kai Ninomiya <kainino@chromium.org>
Date: Thu, 25 Apr 2024 15:45:03 -0700
Subject: [PATCH 2/3] Add cases that unconfigure before lost

---
 .../canvas_display_after_device_lost.html.ts  | 81 +++++++++++++------
 ...anvas_display_after_device_lost.https.html | 11 +++
 .../canvas_display_after_device_lost-ref.html | 21 +++++
 3 files changed, 89 insertions(+), 24 deletions(-)

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 161ae01d63b9..0684fd014ae0 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
@@ -19,9 +19,14 @@ void (async () => {
     canvasId: string,
     alphaMode: GPUCanvasAlphaMode,
     {
+      unconfigureBeforeLost,
       reconfigureAfterLost,
       drawAfterLost,
-    }: { reconfigureAfterLost: boolean; drawAfterLost: boolean }
+    }: {
+      unconfigureBeforeLost: boolean;
+      reconfigureAfterLost: boolean;
+      drawAfterLost: boolean;
+    }
   ) {
     const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
     const ctx = canvas.getContext('webgpu') as unknown as GPUCanvasContext;
@@ -30,35 +35,63 @@ void (async () => {
     }
 
     if (!deviceLost || drawAfterLost) {
-      const colorAttachment = ctx.getCurrentTexture();
-      const colorAttachmentView = colorAttachment.createView();
+      let threw;
+      try {
+        const colorAttachment = ctx.getCurrentTexture();
+        threw = false;
+        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;
+      }
+
+      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('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 });
+    /* 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('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 });
+      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 eee6fad2ebbe..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,6 +7,7 @@
   <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="cvs00" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
   <canvas id="cvs01" width="20" height="20" style="width: 20px; height: 20px;"></canvas>
@@ -17,5 +18,15 @@
   <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 d94fc2e6b176..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,6 +5,7 @@
   <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
   <style>
     body { background-color: #F0E68C; }
+    canvas { border: 1px solid white; }
   </style>
   <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>
@@ -15,6 +16,16 @@
   <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);
@@ -32,5 +43,15 @@
     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>

From de5f2e38c5b5c070bde11b2a65043f283117f7c8 Mon Sep 17 00:00:00 2001
From: Kai Ninomiya <kainino1@gmail.com>
Date: Mon, 20 May 2024 16:42:53 -0700
Subject: [PATCH 3/3] add comment about assert

---
 .../reftests/canvas_display_after_device_lost.html.ts            | 1 +
 1 file changed, 1 insertion(+)

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 0684fd014ae0..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
@@ -58,6 +58,7 @@ void (async () => {
         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'