Fix a few web_platform tests to run or skip on workers (gpuweb#3597)

These tests were either not skipping themselves when running in workers
(where the DOM is not available), or they were unnecessarily using DOM
features where they didn't intend to.

This makes these two tests pass or skip correctly in workers (at least,
pass as much as the non-worker versions do).

Issue: https://crbug.com/331351978

src/webgpu/web_platform/canvas/readbackFromWebGPUCanvas.spec.ts

@@ -32,6 +32,7 @@ import {
   CanvasType,
   createCanvas,
   createOnscreenCanvas,
+  createOffscreenCanvas,
 } from '../../util/create_elements.js';
 import { TexelView } from '../../util/texture/texel_view.js';
 import { findFailedPixels } from '../../util/texture/texture_ok.js';
@@ -146,7 +147,7 @@ function drawImageSourceIntoCanvas(
   image: CanvasImageSource,
   colorSpace: PredefinedColorSpace
 ) {
-  const canvas: HTMLCanvasElement = createOnscreenCanvas(t, 2, 2);
+  const canvas = createOffscreenCanvas(t, 2, 2);
   const ctx = canvas.getContext('2d', { colorSpace });
   assert(ctx !== null);
   ctx.drawImage(image, 0, 0);
@@ -320,7 +321,7 @@ g.test('offscreenCanvas,snapshot')
       .combine('format', kCanvasTextureFormats)
       .combine('alphaMode', kCanvasAlphaModes)
       .combine('colorSpace', kCanvasColorSpaces)
-      .combine('snapshotType', ['convertToBlob', 'transferToImageBitmap', 'imageBitmap'])
+      .combine('snapshotType', ['convertToBlob', 'transferToImageBitmap', 'imageBitmap'] as const)
   )
   .fn(async t => {
     const offscreenCanvas = initWebGPUCanvasContent(
@@ -339,11 +340,7 @@ g.test('offscreenCanvas,snapshot')
           return;
         }
         const blob = await offscreenCanvas.convertToBlob();
-        const url = URL.createObjectURL(blob);
-        const img = new Image(offscreenCanvas.width, offscreenCanvas.height);
-        img.src = url;
-        await raceWithRejectOnTimeout(img.decode(), 5000, 'load image timeout');
-        snapshot = img;
+        snapshot = await createImageBitmap(blob);
         break;
       }
       case 'transferToImageBitmap': {
@@ -492,18 +489,19 @@ g.test('transferToImageBitmap_unconfigured_nonzero_size')
   .desc(
     `Regression test for a crash when calling transferImageBitmap on an unconfigured. Case where the canvas is not empty`
   )
+  .params(u => u.combine('readbackCanvasType', ['onscreen', 'offscreen'] as const))
   .fn(t => {
-    const canvas = createCanvas(t, 'offscreen', 2, 3);
+    const kWidth = 2;
+    const kHeight = 3;
+    const canvas = createCanvas(t, 'offscreen', kWidth, kHeight);
     canvas.getContext('webgpu');
 
     // Transferring gives an ImageBitmap of the correct size filled with transparent black.
     const ib = canvas.transferToImageBitmap();
-    t.expect(ib.width === canvas.width);
-    t.expect(ib.height === canvas.height);
+    t.expect(ib.width === kWidth);
+    t.expect(ib.height === kHeight);
 
-    const readbackCanvas = document.createElement('canvas');
-    readbackCanvas.width = canvas.width;
-    readbackCanvas.height = canvas.height;
+    const readbackCanvas = createCanvas(t, t.params.readbackCanvasType, kWidth, kHeight);
     const readbackContext = readbackCanvas.getContext('2d', {
       alpha: true,
     });
@@ -513,7 +511,7 @@ g.test('transferToImageBitmap_unconfigured_nonzero_size')
     }
 
     // Since there isn't a configuration we expect the ImageBitmap to have the default alphaMode of "opaque".
-    const expected = new Uint8ClampedArray(canvas.width * canvas.height * 4);
+    const expected = new Uint8ClampedArray(kWidth * kHeight * 4);
     for (let i = 0; i < expected.byteLength; i += 4) {
       expected[i + 0] = 0;
       expected[i + 1] = 0;