Add validation tests on BGRA8Unorm canvas with StorageBinding usage (#2348)

* Add validation tests on BGRA8Unorm canvas with StorageBinding usage

This patch adds the validation tests about configuring an BGRA8Unorm
canvas with StorageBinding usage.

* Fix typo

* Address reviewer's comments

Author: Jiawei-Shao

src/webgpu/api/validation/texture/bgra8unorm_storage.spec.ts

@@ -3,7 +3,10 @@ Tests for capabilities added by bgra8unorm-storage flag.
 `;
 
 import { makeTestGroup } from '../../../../common/framework/test_group.js';
+import { assert } from '../../../../common/util/util.js';
+import { kTextureUsages } from '../../../capability_info.js';
 import { GPUConst } from '../../../constants.js';
+import { kAllCanvasTypes, createCanvas } from '../../../util/create_elements.js';
 import { ValidationTest } from '../validation_test.js';
 
 class BGRA8UnormStorageValidationTests extends ValidationTest {
@@ -108,3 +111,95 @@ if the feature bgra8unorm-storage is not enabled.
 
     t.testCreateShaderModuleWithBGRA8UnormStorage(shaderType, false);
   });
+
+g.test('configure_storage_usage_on_canvas_context_without_bgra8unorm_storage')
+  .desc(
+    `
+Test that it is invalid to configure a GPUCanvasContext to 'GPUStorageBinding' usage with
+'bgra8unorm' format on a GPUDevice with 'bgra8unorm-storage' disabled.
+`
+  )
+  .params(u =>
+    u
+      .combine('canvasType', kAllCanvasTypes)
+      .beginSubcases()
+      .expand('usage', p => {
+        const usageSet = new Set<number>();
+        for (const usage0 of kTextureUsages) {
+          for (const usage1 of kTextureUsages) {
+            usageSet.add(usage0 | usage1);
+          }
+        }
+        return usageSet;
+      })
+  )
+  .fn(t => {
+    const { canvasType, usage } = t.params;
+    const canvas = createCanvas(t, canvasType, 1, 1);
+    const ctx = canvas.getContext('webgpu');
+    assert(ctx instanceof GPUCanvasContext, 'Failed to get WebGPU context from canvas');
+
+    const requiredStorageBinding = !!(usage & GPUTextureUsage.STORAGE_BINDING);
+    t.expectValidationError(() => {
+      ctx.configure({
+        device: t.device,
+        format: 'bgra8unorm',
+        usage,
+      });
+    }, requiredStorageBinding);
+  });
+
+g.test('configure_storage_usage_on_canvas_context_with_bgra8unorm_storage')
+  .desc(
+    `
+Test that it is valid to configure a GPUCanvasContext with GPUStorageBinding usage and a GPUDevice
+with 'bgra8unorm-storage' enabled.
+`
+  )
+  .beforeAllSubcases(t => {
+    t.selectDeviceOrSkipTestCase('bgra8unorm-storage');
+  })
+  .params(u =>
+    u
+      .combine('canvasType', kAllCanvasTypes)
+      .beginSubcases()
+      .expand('usage', p => {
+        const usageSet = new Set<number>();
+        for (const usage of kTextureUsages) {
+          usageSet.add(usage | GPUConst.TextureUsage.STORAGE_BINDING);
+        }
+        return usageSet;
+      })
+  )
+  .fn(t => {
+    const { canvasType, usage } = t.params;
+    const canvas = createCanvas(t, canvasType, 1, 1);
+    const ctx = canvas.getContext('webgpu');
+    assert(ctx instanceof GPUCanvasContext, 'Failed to get WebGPU context from canvas');
+
+    ctx.configure({
+      device: t.device,
+      format: 'bgra8unorm',
+      usage,
+    });
+
+    const currentTexture = ctx.getCurrentTexture();
+    const bindGroupLayout = t.device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          storageTexture: { access: 'write-only', format: currentTexture.format },
+        },
+      ],
+    });
+    t.device.createBindGroup({
+      layout: bindGroupLayout,
+      entries: [
+        {
+          binding: 0,
+          resource: currentTexture.createView(),
+        },
+      ],
+    });
+  });