op: Implement 'clamp,blend_color' test in blending.spec.ts

This PR implements 'clamp,blend_color' test to ensure that
the blend color is clamped in the blend equation.

Issue: gpuweb#1835

src/webgpu/api/operation/rendering/blending.spec.ts

@@ -377,8 +377,109 @@ g.test('clamp,blend_factor')
   .unimplemented();
 
 g.test('clamp,blend_color')
-  .desc('For fixed-point formats, test that the blend color is clamped in the blend equation.')
-  .unimplemented();
+  .desc('For unorm/snorm formats, test that the blend color is clamped in the blend equation.')
+  .params(u =>
+    u //
+      .combine('format', ['rg8unorm', 'rgba8unorm', 'rgb10a2unorm'] as const)
+      .combine('operation', kBlendOperations)
+  )
+  .fn(async t => {
+    const { format, operation } = t.params;
+
+    const srcColor = { r: 0.4, g: 0.4, b: 0.4, a: 0.4 };
+    const dstColor = { r: 0.2, g: 0.2, b: 0.2, a: 0.2 };
+
+    const srcFactor = 'one';
+    const dstFactor = 'one';
+
+    const srcComputeFactor = computeBlendFactor(srcColor, dstColor, undefined, srcFactor);
+    const dstComputeFactor = computeBlendFactor(srcColor, dstColor, undefined, dstFactor);
+
+    const pipeline = t.device.createRenderPipeline({
+      layout: 'auto',
+      fragment: {
+        targets: [
+          {
+            format,
+            blend: {
+              color: { srcFactor, dstFactor, operation },
+              alpha: { srcFactor, dstFactor, operation },
+            },
+          },
+        ],
+        module: t.device.createShaderModule({
+          code: `
+@fragment fn main() -> @location(0) vec4<f32> {
+  return vec4<f32>(0.4, 0.4, 0.4, 0.4);
+}
+          `,
+        }),
+        entryPoint: 'main',
+      },
+      vertex: {
+        module: t.device.createShaderModule({
+          code: `
+@vertex fn main() -> @builtin(position) vec4<f32> {
+    return vec4<f32>(0.0, 0.0, 0.0, 1.0);
+}
+          `,
+        }),
+        entryPoint: 'main',
+      },
+      primitive: {
+        topology: 'point-list',
+      },
+    });
+
+    const renderTarget = t.device.createTexture({
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+      size: [1, 1, 1],
+      format,
+    });
+
+    const commandEncoder = t.device.createCommandEncoder();
+    const renderPass = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: renderTarget.createView(),
+          clearValue: dstColor,
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+    });
+    renderPass.setPipeline(pipeline);
+    renderPass.draw(1);
+    renderPass.end();
+    t.device.queue.submit([commandEncoder.finish()]);
+
+    const expectedColor = computeBlendOperation(
+      srcColor,
+      srcComputeFactor,
+      dstColor,
+      dstComputeFactor,
+      t.params.operation
+    );
+
+    const expColor = {
+      R: expectedColor.r,
+      G: expectedColor.g,
+      B: expectedColor.b,
+      A: expectedColor.a,
+    };
+    const expTexelView = TexelView.fromTexelsAsColors(format, coords => expColor);
+
+    const result = await textureContentIsOKByT2B(
+      t,
+      { texture: renderTarget },
+      [1, 1, 1],
+      { expTexelView },
+      {
+        maxDiffULPsForNormFormat: 1,
+      }
+    );
+    t.expectOK(result);
+  });
 
 g.test('clamp,blend_result')
   .desc('For fixed-point formats, test that the blend result is clamped in the blend equation.')