Update video files to improve external_texture* related cts coverage

[shaoboyan]

This PR updated video files by referring webgl related cases here: https://github.com/KhronosGroup/WebGL/blob/main/sdk/tests/conformance/textures/misc/video-rotation.html#L112

The PR changes:

• README.md with latest cmds to generate test video files.
• Rotated video content.
• Update video expected pixels values based on new test video files.
• Related cts logic changes, including removing magic numbers.
• New Vp9 mp4 rotated videos

Fixes #3232

---

Requirements for PR author:

• All missing test coverage is tracked with "TODO" or .unimplemented().
• New helpers are /** documented */ and new helper files are found in helper_index.txt.
• Test behaves as expected in a WebGPU implementation. (If not passing, explain above.)

Requirements for reviewer sign-off:

• Tests are properly located in the test tree.
• Test descriptions allow a reader to "read only the test plans and evaluate coverage completeness", and accurately reflect the test code.
• Tests provide complete coverage (including validation control cases). Missing coverage MUST be covered by TODOs.
• Helpers and types promote readability and maintainability.

When landing this PR, be sure to make any necessary issue status updates.

[shaoboyan]

Note this change fails tests due to implementation bugs.
webgpu:web_platform,external_texture,video:importExternalTexture,sampleWithVideoFrameWithVisibleRectParam:videoName="four-colors-h264-bt601-rotate-90.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,sampleWithVideoFrameWithVisibleRectParam:videoName="four-colors-h264-bt601-rotate-180.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,sampleWithVideoFrameWithVisibleRectParam:videoName="four-colors-h264-bt601-rotate-270.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,sampleWithVideoFrameWithVisibleRectParam:videoName="four-colors-vp9-bt601-rotate-90.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,sampleWithVideoFrameWithVisibleRectParam:videoName="four-colors-vp9-bt601-rotate-180.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,sampleWithVideoFrameWithVisibleRectParam:videoName="four-colors-vp9-bt601-rotate-270.mp4";*

webgpu:web_platform,external_texture,video:importExternalTexture,compute:videoName="four-colors-h264-bt601-rotate-90.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,compute:videoName="four-colors-h264-bt601-rotate-270.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,compute:videoName="four-colors-vp9-bt601-rotate-90.mp4";*
webgpu:web_platform,external_texture,video:importExternalTexture,compute:videoName="four-colors-vp9-bt601-rotate-270.mp4";*

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-90.mp4";*
webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-90.mp4";sourceType="VideoFrame";srcDoFlipYDuringCopy=true;dstColorSpace="display-p3"
webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-90.mp4";sourceType="VideoFrame";srcDoFlipYDuringCopy=false;dstColorSpace="display-p3"

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-180.mp4";sourceType="VideoElement";srcDoFlipYDuringCopy=true;dstColorSpace="display-p3"

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-180.mp4";sourceType="VideoFrame";srcDoFlipYDuringCopy=true;dstColorSpace="display-p3"

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-180.mp4";sourceType="VideoFrame";srcDoFlipYDuringCopy=false;dstColorSpace="display-p3"

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-270.mp4";*

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-270.mp4";sourceType="VideoFrame";srcDoFlipYDuringCopy=true;dstColorSpace="display-p3"

webgpu:web_platform,copyToTexture,video:copy_from_video:videoName="four-colors-vp9-bt601-rotate-270.mp4";sourceType="VideoFrame";srcDoFlipYDuringCopy=false;dstColorSpace="display-p3"

[kainino0x]

I don't think I need to review since Corentin has already reviewed. (Skimmed it - looks good overall)

Just for my knowledge - are we making / did we make a change in Chromium that will flip the rotation of rotated videos (for example vertical phone videos)? Technically this is breaking, though I don't think it's likely any application could have depended on this (they would have to know the rotation of the video in order to compensate for it, which isn't trivial afaik). Still we'll need to be cautious of it.

[shaoboyan]

Just for my knowledge - are we making / did we make a change in Chromium that will flip the rotation of rotated videos (for example vertical phone videos)? Technically this is breaking, though I don't think it's likely any application could have depended on this (they would have to know the rotation of the video in order to compensate for it, which isn't trivial afaik). Still we'll need to be cautious of it.

I don't think we have any changes in chromium to flip the rotation of rotated videos unless the metadata(the transform matrix) guided us to do this.

For the rotation changes, ffmpeg update the transform matrix in video metadata but uses ccw direction in cmd. But in browser (at least in chromium), it extracts rotation degree (and mirror) from transform matrix in cw direction. So I made some small changes in the cmd to generate our test video files to align with browser 'terms'.

And in chromium, what we want to do is to ensure the GPUExternalTexture samples/load the pixels with on-screen videos. This means browser plays such video source with HTMLVideoElments tag also apply rotations with transform matrix in video file metadata.

Previous test cases are skipped on chromium CI due to h264 support issue. This PR add vp9 codec videos to fail the bots.

[shaoboyan]

@Kangz @kainino0x sry but pls don't merge this PR right now. After reading more chromium code, I think I still need to double check the order to apply rotate, visible rect and mirror. I'm seeking help on slack/media channel.

[kainino0x]

Converted to draft to prevent landing.

[shaoboyan]

After some more investigation, I think I fully understand the order to apply visible_rect clipping, rotation (and mirror).
The order should be：
Apply visible_rect to raw decoded video frame first and then apply transforms. In transform, there are rotation and mirror (X-flip), which should apply rotation first and then do mirror.

The new video files contains both vertical videos and horizontal videos. Keep them for coverage.

The cts has been updated based on this and update the comments to describe these steps.

[shaoboyan]

@kainino0x @Kangz sry but PTAL again.