Add reftests: canvas display after device lost (#3669)

gpuweb · Apr 25, 2024 · 7245ccb · 7245ccb
1 parent 4e95c07
commit 7245ccb
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 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
@@ -0,0 +1,65 @@
+import { timeout } from '../../../common/util/timeout.js';
+import { assert } from '../../../common/util/util.js';
+import { takeScreenshotDelayed } from '../../../common/util/wpt_reftest_wait.js';
+
+void (async () => {
+  assert(
+    typeof navigator !== 'undefined' && navigator.gpu !== undefined,
+    'No WebGPU implementation found'
+  );
+
+  const adapter = await navigator.gpu.requestAdapter();
+  assert(adapter !== null);
+  const device = await adapter.requestDevice();
+  assert(device !== null);
+  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
+  let deviceLost = false;
+
+  function draw(canvasId: string, alphaMode: GPUCanvasAlphaMode, abortAfterDeviceLost: boolean) {
+    if (deviceLost && abortAfterDeviceLost) {
+      return;
+    }
+
+    const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
+    const ctx = canvas.getContext('webgpu') as unknown as GPUCanvasContext;
+    ctx.configure({
+      device,
+      format: presentationFormat,
+      alphaMode,
+    });
+
+    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()]);
+  }
+
+  function drawAll() {
+    draw('cvs0', 'opaque', true);
+    draw('cvs1', 'opaque', false);
+    draw('cvs2', 'premultiplied', true);
+    draw('cvs3', 'premultiplied', false);
+
+    if (!deviceLost) {
+      device.destroy();
+      deviceLost = true;
+      timeout(drawAll, 100);
+    } else {
+      takeScreenshotDelayed(50);
+    }
+  }
+
+  drawAll();
+})();
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
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <title>WebGPU canvas_display_after_device_lost</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <meta name="assert" content="WebGPU canvas should be presented correctly after device lost" />
+  <link rel="match" href="./ref/canvas_display_after_device_lost-ref.html" />
+  <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>
+  <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
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <title>WebGPU canvas_display_after_device_lost (ref)</title>
+  <meta charset="utf-8" />
+  <link rel="help" href="https://gpuweb.github.io/gpuweb/" />
+  <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>
+  <script>
+    function draw(canvas, color) {
+      var c = document.getElementById(canvas);
+      var ctx = c.getContext('2d');
+      ctx.fillStyle = color;
+      ctx.fillRect(0, 0, c.width, c.height);
+    }
+
+    draw('cvs0', '#66FF00');
+    draw('cvs1', '#000000');
+    draw('cvs2', '#66FF00');
+    draw('cvs3', '#00000000');
+ </script>
+</html>