Add importExternalTexture test for video frame display size diff with coded size (#4589)

* Add importExternalTexture test for video frame display size diff with coded size

Validation error was thrown if the video frame's dispaly size was
different with its coded size in importExternalTexture, because it used
the visible size for copySize. This issue had been fixed by updating the
copySize to reflect the coded size rather than the visible size, and
add a test for this case, see crbug.com/471021591.

* Add test to check display size returned by textureDimensions

* Fix lint error

* Use expectGPUBufferValuesEqual for buffer checking

* Remove unnecessary async

Author: haoxli

src/webgpu/web_platform/external_texture/video.spec.ts

@@ -7,6 +7,8 @@ Tests for external textures from HTMLVideoElement (and other video-type sources?
 TODO: consider whether external_texture and copyToTexture video tests should be in the same file
 TODO(#3193): Test video in BT.2020 color space
 TODO(#4364): Test camera capture with copyExternalImageToTexture (not necessarily in this file)
+TODO(#4605): Test importExternalTexture with video frame display size different with coded size from
+  a video file
 `;
 
 import { makeTestGroup } from '../../../common/framework/test_group.js';
@@ -162,6 +164,69 @@ function checkNonStandardIsZeroCopyIfAvailable(): { checkNonStandardIsZeroCopy?:
   }
 }
 
+function createVideoFrameWithDisplayScale(
+  t: GPUTest,
+  displayScale: 'smaller' | 'same' | 'larger'
+): { frame: VideoFrame; displayWidth: number; displayHeight: number } {
+  const canvas = createCanvas(t, 'onscreen', kWidth, kHeight);
+  const canvasContext = canvas.getContext('2d');
+
+  if (canvasContext === null) {
+    t.skip(' onscreen canvas 2d context not available');
+  }
+
+  const ctx = canvasContext;
+
+  const rectWidth = Math.floor(kWidth / 2);
+  const rectHeight = Math.floor(kHeight / 2);
+
+  // Red
+  ctx.fillStyle = `rgba(255, 0, 0, 1.0)`;
+  ctx.fillRect(0, 0, rectWidth, rectHeight);
+  // Lime
+  ctx.fillStyle = `rgba(0, 255, 0, 1.0)`;
+  ctx.fillRect(rectWidth, 0, kWidth - rectWidth, rectHeight);
+  // Blue
+  ctx.fillStyle = `rgba(0, 0, 255, 1.0)`;
+  ctx.fillRect(0, rectHeight, rectWidth, kHeight - rectHeight);
+  // Fuchsia
+  ctx.fillStyle = `rgba(255, 0, 255, 1.0)`;
+  ctx.fillRect(rectWidth, rectHeight, kWidth - rectWidth, kHeight - rectHeight);
+
+  const imageData = ctx.getImageData(0, 0, kWidth, kHeight);
+
+  let displayWidth = kWidth;
+  let displayHeight = kHeight;
+  switch (displayScale) {
+    case 'smaller':
+      displayWidth = Math.floor(kWidth / 2);
+      displayHeight = Math.floor(kHeight / 2);
+      break;
+    case 'same':
+      displayWidth = kWidth;
+      displayHeight = kHeight;
+      break;
+    case 'larger':
+      displayWidth = kWidth * 2;
+      displayHeight = kHeight * 2;
+      break;
+    default:
+      unreachable();
+  }
+
+  const frameInit: VideoFrameBufferInit = {
+    format: 'RGBA',
+    codedWidth: kWidth,
+    codedHeight: kHeight,
+    displayWidth,
+    displayHeight,
+    timestamp: 0,
+  };
+
+  const frame = new VideoFrame(imageData.data.buffer, frameInit);
+  return { frame, displayWidth, displayHeight };
+}
+
 g.test('importExternalTexture,sample')
   .desc(
     `
@@ -381,6 +446,159 @@ Tests that we can import an VideoFrame with non-YUV pixel format into a GPUExter
     ]);
   });
 
+g.test('importExternalTexture,video_frame_display_size_diff_with_coded_size')
+  .desc(
+    `
+Tests that we can import a VideoFrame with display size different with its coded size, and
+sampling works without validation errors.
+`
+  )
+  .params(u =>
+    u //
+      .combine('displayScale', ['smaller', 'same', 'larger'] as const)
+  )
+  .fn(t => {
+    if (typeof VideoFrame === 'undefined') {
+      t.skip('WebCodec is not supported');
+    }
+
+    const { frame } = createVideoFrameWithDisplayScale(t, t.params.displayScale);
+
+    const colorAttachment = t.createTextureTracked({
+      format: kFormat,
+      size: { width: kWidth, height: kHeight, depthOrArrayLayers: 1 },
+      usage: GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    const pipeline = createExternalTextureSamplingTestPipeline(t, kFormat);
+    const bindGroup = createExternalTextureSamplingTestBindGroup(
+      t,
+      undefined /* checkNonStandardIsZeroCopy */,
+      frame,
+      pipeline,
+      'srgb'
+    );
+
+    const commandEncoder = t.device.createCommandEncoder();
+    const passEncoder = commandEncoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: colorAttachment.createView(),
+          clearValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
+          loadOp: 'clear',
+          storeOp: 'store',
+        },
+      ],
+    });
+    passEncoder.setPipeline(pipeline);
+    passEncoder.setBindGroup(0, bindGroup);
+    passEncoder.draw(6);
+    passEncoder.end();
+    t.device.queue.submit([commandEncoder.finish()]);
+
+    const expected = {
+      topLeft: new Uint8Array([255, 0, 0, 255]),
+      topRight: new Uint8Array([0, 255, 0, 255]),
+      bottomLeft: new Uint8Array([0, 0, 255, 255]),
+      bottomRight: new Uint8Array([255, 0, 255, 255]),
+    };
+
+    ttu.expectSinglePixelComparisonsAreOkInTexture(t, { texture: colorAttachment }, [
+      // Top-left.
+      {
+        coord: { x: kWidth * 0.25, y: kHeight * 0.25 },
+        exp: expected.topLeft,
+      },
+      // Top-right.
+      {
+        coord: { x: kWidth * 0.75, y: kHeight * 0.25 },
+        exp: expected.topRight,
+      },
+      // Bottom-left.
+      {
+        coord: { x: kWidth * 0.25, y: kHeight * 0.75 },
+        exp: expected.bottomLeft,
+      },
+      // Bottom-right.
+      {
+        coord: { x: kWidth * 0.75, y: kHeight * 0.75 },
+        exp: expected.bottomRight,
+      },
+    ]);
+
+    frame.close();
+  });
+
+g.test('importExternalTexture,video_frame_display_size_from_textureDimensions')
+  .desc(
+    `
+Tests that textureDimensions() for texture_external matches VideoFrame display size.
+`
+  )
+  .params(u =>
+    u //
+      .combine('displayScale', ['smaller', 'same', 'larger'] as const)
+  )
+  .fn(t => {
+    if (typeof VideoFrame === 'undefined') {
+      t.skip('WebCodec is not supported');
+    }
+
+    const { frame, displayWidth, displayHeight } = createVideoFrameWithDisplayScale(
+      t,
+      t.params.displayScale
+    );
+
+    const externalTexture = t.device.importExternalTexture({
+      source: frame,
+      colorSpace: 'srgb',
+    });
+
+    const storageBuffer = t.createBufferTracked({
+      size: 8,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
+    });
+
+    const pipeline = t.device.createComputePipeline({
+      layout: 'auto',
+      compute: {
+        module: t.device.createShaderModule({
+          code: `
+            @group(0) @binding(0) var t : texture_external;
+            @group(0) @binding(1) var<storage, read_write> outDims : array<u32>;
+
+            @compute @workgroup_size(1) fn main() {
+              let d = textureDimensions(t);
+              outDims[0] = d.x;
+              outDims[1] = d.y;
+            }
+          `,
+        }),
+        entryPoint: 'main',
+      },
+    });
+
+    const bindGroup = t.device.createBindGroup({
+      layout: pipeline.getBindGroupLayout(0),
+      entries: [
+        { binding: 0, resource: externalTexture },
+        { binding: 1, resource: { buffer: storageBuffer } },
+      ],
+    });
+
+    const encoder = t.device.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.dispatchWorkgroups(1);
+    pass.end();
+    t.device.queue.submit([encoder.finish()]);
+
+    t.expectGPUBufferValuesEqual(storageBuffer, new Uint32Array([displayWidth, displayHeight]));
+
+    frame.close();
+  });
+
 g.test('importExternalTexture,sampleWithVideoFrameWithVisibleRectParam')
   .desc(
     `