From 3981e931ad423a0d34be3e5cd42b3bfc210f82b2 Mon Sep 17 00:00:00 2001
From: shaoboyan <shaoboyan@microsoft.com>
Date: Thu, 19 Dec 2024 16:15:34 +0800
Subject: [PATCH 1/9] CopyEI2T: Cases To Cover Rotated Images

This PR created images with rotation metadata. It tests using
CopyEI2T to upload image and imageBitmap with 'from-image' orientation
flag.

Issue:#4180
---
 src/resources/README.md                       |  13 ++
 src/resources/four-colors-rotate-180-cw.jpg   | Bin 0 -> 2677 bytes
 src/resources/four-colors-rotate-270-cw.jpg   | Bin 0 -> 2677 bytes
 src/resources/four-colors-rotate-90-cw.jpg    | Bin 0 -> 2677 bytes
 src/resources/four-colors.jpg                 | Bin 0 -> 2665 bytes
 .../copyToTexture/ImageBitmap.spec.ts         | 126 ++++++++++++++++++
 .../web_platform/copyToTexture/image.spec.ts  | 117 ++++++++++++++++
 src/webgpu/web_platform/util.ts               |  50 +++++++
 8 files changed, 306 insertions(+)
 create mode 100644 src/resources/four-colors-rotate-180-cw.jpg
 create mode 100644 src/resources/four-colors-rotate-270-cw.jpg
 create mode 100644 src/resources/four-colors-rotate-90-cw.jpg
 create mode 100644 src/resources/four-colors.jpg

diff --git a/src/resources/README.md b/src/resources/README.md
index a1ed0604170c..28e522e0239d 100644
--- a/src/resources/README.md
+++ b/src/resources/README.md
@@ -91,3 +91,16 @@ ffmpeg -display_vflip -i temp.mp4 -c copy four-colors-vp9-bt601-vflip.mp4
 rm temp.mp4
 
 ```
+
+The test video files were generated with by exiftool cmds below:
+```
+// Generate jpg picture with 90 cw rotation metadata
+exiftool -Orientation#=6 four-colors.jpg -o .\four-colors-rotate-90-cw.jpg
+
+// Generate jpg picture with 180 cw rotation metadata
+exiftool -Orientation#=3 four-colors.jpg -o .\four-colors-rotate-180-cw.jpg
+
+// Generate jpg picture with 270 cw rotation metadata
+exiftool -Orientation#=8 four-colors.jpg -o .\four-colors-rotate-270-cw.jpg
+
+```
diff --git a/src/resources/four-colors-rotate-180-cw.jpg b/src/resources/four-colors-rotate-180-cw.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ca8d69aa4823fba4458d37fd92bf8d6f6821560c
GIT binary patch
literal 2677
zcmeH{ZBSHI7{{Nxci&lD?y_r^)9eT$tMmoXD8JlvSx6>FmK4gSNHA2IhS4y|nY?Mm
z%blqm5=)#W+}$X$Y=;spre;Gyw6P%+0&yl{C4#jkc42W@?%vZm!Xi^2kiN#V_v}3P
zoadhV|Novd7xkiFAtozhQwC5J1!edLXaI^VWqXPMHgASC0H6dpr2`sg6#1tqklo1v
za%mdRk$D`}nCYC{SQ(H`&+AI9y1O~41FHNaK%))a05eD^id-{6%V-jEsg#x}<O&5D
zN>!9fsZ=W!3U#zv9i_pcP%Y6$YnG6lY(gF<PvJ|WR47Ts!UBB{j1oqv$7m`JBn(9}
z6lw({Rw~0(2$-3mB(zi}$CA`hxS%Np%cp4x7AuotyVPrV9i)s*w<39iJl48H5w};L
za=6;AjNjPUV#w(nU71?2?}$ph^uA^HKaj90(X@Ka+I0`7J@V*!bGjuX^YKktPj20o
zoA=by+Y5KTP_%3Jp5m8F_rG$W?A3#By!lpnMP(KL?$MfK@4bJ#_JqUvQT@lCG<<sM
z%dgHfojv#UH_hiSw6<MrzjXPBtJk`^f9~nM-Z$X6Ir!Vq@53WrpMPvTFmXFL86v)L
z7pHB_I{Sw&2K$oW9!M3$7bQ7>2hB)jE0X294OYdDy|HmAhn4z`)%L~~ReWmBsG(qA
zr+VqiwF3!0V(pHzdoy<AKRKH<cGp)QXz;<5Ff;=!gex6<lE`&*OL)`C`G$7rL*C>H
zWFsh^uavB7M+$Jc|8oR}^NYLBCALUrE{(Z4AtSCIc6nVvyDgmCKlwI-zs3X_L1it1
z?EXm>!EUagCePPnG5XBL&}sMBas>SY2$)pS?)G!yPhy+Nb@L0J^^~)LXSks>1nvuB
z+^(>h8$=Mchk0v$`?GqkO~ZN5BDhk5fU6MFJ3{3ME+d#SPw5@*cbZKI_+<#XUqW!a
zUqqk{R@DWf5gbJ@Q8BUF!aZ1OMW9bcaOwtvWOrCJ`eIox7L$nJPwgK$#D`Nf6(ZPn
zPAuf61lF^P>q-;1Am}sp)*FQVotZ**yZBj&a1p`nAlLc?f`$^I4#63=F)Jx}%VC=X
zVRRt~LViAMa=2ed;7N$QvkuEOG+?<HND3SF9D1=czg~|gnWSlOU96|c7|1{{l!@Tm
zEk7Pi8h2odvl~<hxlXa6U$}(TR!zDrhia^uLb@x$4SyE+F0LB`s5Oc{cHOY+Dvu#n
z9*gv?*y!7C3pu&5cm%&B4t-|`S#b|_?g%rpn1t1AEfIHeQ>{Xe!<}Vvig9@}eQV&_
zidio{4p(dl%IZ#x=Z#qOTx(W@S(7$+Ix}o_Pgdg-6Fc@C0bmPO<wtsEUzq!rX3X!_
su%IzHc$ja52gz6Tp$`8C^Hq{{VL7S3rVTuQFV%~C|C|5+g9*C+H(WzC8~^|S

literal 0
HcmV?d00001

diff --git a/src/resources/four-colors-rotate-270-cw.jpg b/src/resources/four-colors-rotate-270-cw.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e126e92ace3bbe9ec08648e36785299262d72ccd
GIT binary patch
literal 2677
zcmeH{e^3-<7{{Nzy<Z%M#~ycPIn9kAa(ev(Xq5kKdK~0UjvOkKO_5-zG!3I+k~6t!
z#gCn-8xl*LCcGo;vh0QuEvDu|LA0?U6asN3;v@pBiQ_mtj=g<*U*VLgKal>7XZM|X
z_I;my_xt@k?=0#;ze21vV?zc|6a}UD0@M$MmeSpY02?>LDgaP|oYDe~GYaQGQy{yO
z1LV*&o+I-(Y_Zchd9X1cou1d0*tGX@QU_Go34jJWx&da8P!zdmf|k)F<WeauQ^*wx
zGL%u#QA(vssZgk5RH|q-4n@==O^kXG$;l?<b@CRz)k=kuRLn2X_rNG&lzM`u;z7bt
zG(({lFkq!JOof1%2}(jsWpXS@6^#oTW3haimSC|mDYi?!j@LoT$h6Cn*U95-+ZFM9
zbSa0b9Lj|C4bA%Oj?v|*`FjsXsTM!5<iUp$S0ou%u3Ek3(X_`NUu#acWMn?M!Mb_N
z)|}j@pV?Nh<Hf?AyLK17QnK&W{iUxRc=N5d%gQS%`S*@gAASFWV>QQ}bsyKC{KWO?
zsV~1e(|GpW*WWaqztGZpvF+03AFf{O?E1O8=X!6y_vXNFgTD_AkNC#?<AI6W!O0Nu
zMd21kV%pe0d@<OU1ouFyAigNcemrPKDqEH;*RHcEw(p6HPdTL2t*>%4G)E<*W{>Lg
z_jafjFJIlC=p)wdIJ-Y%hyRnayT<PM>IF4Em=cC&fQ4{{lQ)T6dzXYao|tQB20!AB
z?m!lTqPa@Rx@I^ZmydmpK!1K=_u0f2$jqiOJ11nswL|U^chF%E=k!g!gWxZ}KqIKA
zL6Frq$s*Xr<yYtWx-ABu*$_JI@h?Tt*N=cn6&;>2PW(x1HM(zp!L!~nHt;Mrn1;Y}
zL5$xSHgf|A!j3R+%WHd1$F-`tk+TS{6eHluh4l7N8G_3Qrp!}1r{~=!BLaR2g07bl
z9P1MiXo8isffxiw5KNR$th8_sm)H>Kk`bJ`fgsrv77e~Qb_9z_Lhz^Nk8I+jPBa!E
z*m_PZ;HCuDyMpUX6E`8~HT2Z$g?$~FLROpjS+Q^t!R;W|@)QDBu~3WP4BKEe1#da+
zvmlJl2SI3z4;!7HHxPIeBj2pWa`i4O7XwLQ!`_20b>!9S@FZiJ2G_}Y8x4UB1cR9f
zzTNcW0n@k>Q@p!DxsX#Qy847mSZ(E`+j6klmMNsWBi!(Bf$!wHFn}6^=wsImxv%mV
zV#U!&---;rZT3(d=TAWJOVZ$X`j8FxQ0s{>Gm9pyW=pZSgPUp*x}6@Yu}+N7o#~s4
zYb|0&@Nu|eM^IXOd^~s9qT^bu5oV2=;OWe;%`;hrPfVQuc>=&5tjvq_%rQUr%}to!
ttsy~ebn-CQ2oI3I=p*f8AI?=t)`g{{`kE&2!u?b)?EP>4{|_eU`rnV2H6Z{1

literal 0
HcmV?d00001

diff --git a/src/resources/four-colors-rotate-90-cw.jpg b/src/resources/four-colors-rotate-90-cw.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..15840c2269693b097a885d70f494cdb7d99ba1f7
GIT binary patch
literal 2677
zcmeH{e^3-<7{{Nzy<Z%M#~ycPIn9kAa(ev(Xq5kKdK~0UjvOkKO_5-zG!3I+k~6t!
z#gCn-8xl*LCcGo;vh0QuEvDu|LA0?U6asN3;v@pBiQ_mtj=g<*U*VLgKal>7XZM|X
z_I;my_xt@k?=0#;ze21vV?zc|6a}UD0@M$MmeSpY02?>LDgaP|oYDe~GYaGYGzGFd
zIY16g<2f>q!xlT8lLs3E(&>3^iA{SiCv`xTod9UCqZ?ob2}O~6CTJN=LN1lkGKE~B
zAVV1y9i>#NlnR9^Mx}~Y<4{B`(!{72k(_KoUMFwiTdh<mNyYpEeGiNhMyV%gDjp;Z
zMKcs?0RvVl!&C^EnV=-JR3^ugRMEJgF&4|GX$cl9lVZEn>v$ccj7+;Md7V7Ywp|gw
zN0)M_%ArhH-_Wej?igL3n!opOlxpz<OCEeEaYd4G<*L<d9!-1f@wMi3OGf6C8?2kR
zY|Y7i`k8G7J6<f@xodaPD<%70-Cz3Jfj8fJyR5vTl7H_=_0jh~I97AqS@&`M$xmFL
zp8E2uGmU4@ef>?-`3o(r7uzmf{^9Di&aR)kd#?BPdv6Z>Hu(F{@Q82BKOUI49h?ji
zUleX(B&Lo1!xw{nNpKIO3gU~B?8k#<q_Snna_u^sV*8%B_>@CR-TEp=LvvI@YWAo;
ze{Y9s@$%LEi9TZOj<fqScKAOzyKC&8uU=5&gDGKX23QDJIC+!EwRcH)<B7S3X7D54
z=niBdD4MI3tZRnzarxNi2=wO{cArgbfy`_gvvWd5Ts!0*aR(jta8BRkI|%;r3p9d?
z8U$H=lPrQ=Tz++~uiIkqnGK=S9{*AVef<cSRMFuX<HVoDR-^mo7d-1NV*}4}gJ}pn
z7sU9TVKX;?AnXY9w!F6IbX=>N8##;MN-+YiTu5&Zl_9u{V9GqDb9&xwG9uuYAn1A-
z!LdFOfhJg48;C)01i?i4#7YbIaET3pE*Zh88wip;VbS1=V@I%<Bm{qI{>Uai>O^A!
zg01Jo0&YrRy(_rRG;tGxUPDj4Uf9=>DP*;YpA`!i5!?=PEl(kE6$`Zp&ae$uQ}CA4
zJ`2L=d=P}j_^{FGc>{qrG4jn?ELZQsaxst;Htaq4Qb%6B4o@<sX>gsax6u&DKronz
z;M+|<9x#nNF~z$ZlnXg^qN`81gw<9~x-AE*ZJ9#4JHieB7WhuC3j?Szh(31Bkozi+
zAyyoX^sUI?+hz~dasC7Zza$NQrw`e154D~MGqY&IYPJ-MJGiM9q1)-P8tcUP+?l?)
zxYi<e1RsYhb_Auh$H#MrEjq5n8e!I`37*aj+dPw1_{7BdpC<t9!OFZy&m8k}-`s@x
u-5L_qMkfz*jqm{Zi$2mm_TgNWWL;QFs;_ARFWgV{!ruSp|NmfuuKx{t4>cbE

literal 0
HcmV?d00001

diff --git a/src/resources/four-colors.jpg b/src/resources/four-colors.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c04c1f6cd30175507927001ffb759bc83694c8e6
GIT binary patch
literal 2665
zcmeH{e@t6d6vxl&YiTKE<v}~Ai)jX9bgTaWo9O;|Zl&NFmr>k6F^Yq^9~eV6nZqUS
zxvBhki8eT<V==O}qBxxmIyNPm$_8UIGsp(QSR&FP0@Fxa%G&b!uJ;bgi2lLwUpajz
z@3i;4+wb>tZXW7Gze1cjYf~0b6b0q@185KmOyzra0&Lz4YXCq2GMWMzt|**ln!a-<
zHCW=NYx2dyfE3?w8DD0Jzgv?&pejxRG+EINFoJ}l$TbtRj3yB!mC`bKlw3|y5gik)
zP$(60xiVI%j8Wl`M=w#ws+N$NY(gF<PvJ|YkSj>X!UBB{i~`1~$7m`MBn(9}6lwz<
zRw~0J2#lGaB(zi(g(WFta6@w(mQT|XELJAPcB$9!I!GB={EE~KQ3;mq^2EKGw8J$v
zMbgHmR&8$A_{#L6eMh2|OYd8D{{zXZQuM3WtX=nT#v_leH)fi$vLD}Mesb%!y!@x0
zE-2pd!p>d0_msR`w*Qp_<*y!m<IT4!DyypbcaPQ{d++_@btmkOj~YJyr18^JUw(C_
z`Ruu`ziBytp{@O5$EC|ZT)o!a^K)<C_5MNk&7t3he;*kg^LTv|{>j^cV2JplfS$HB
z>+B!C80<@eXCRdmUzFqkPMVR*R-{J7Z?MR>?@dTdJFL)btg$t<Mkl4`j%$ndbt#vw
zTsxTTA=d6VyEkJ;{*$v=V|RV^g9;x^2}3i$Lb%G#8$_<NN5bn*&X?-p4|%=QpM#)e
zzE-lX9xcM{-p>(e&oAyim)Ihixise1gp9a;#5v{+*sS5af#BN+{_+Vlf~q<MIRil!
z!EUaoHs8~0(s_)!&}o-%If8*f1WdYUb9p)OC$U}cy!i#sx+_@!Gu&_n0@npGaaY*L
z4Iv2I!n~!h<5>;YuHwedBDhkDfU6WTJ3|!+E+d#SPHF6}cUtra_+<!sUP5quKt!Mp
zRM-1s5gbJ@Svk4d#64JML7+)RaOwtvR99Hkc@o$$EG7lPpXxtyi4TXUFGjHKoLJ0F
z39Ne+*PS75LC~-3YtRb&yRwCx4)L>6;Ua?D0j}){1dXLaJ%TfAli3isWw*|OFuo83
zAuk`++g-0Ca3@FpvmVRUHe$ILNE#b<A9}H?ut9@=WDL{bx><L#&Yy)~I2*yYTYfxf
zn6P7tvl~<jc@D90K)8g}RtKG?L$#J{A=4S*hF=SOH`jv!)agVIyKcmJmB$dPjz#8H
zqVp73Lk`ZDgy5Hy;qSB|3!Y)TE5ghu8nBwJrQ!~5s!iy%yUcorn3z8^w??kLgdM}j
z;ffVOdHsor{85vJYcoffHLC-sv%?lwum+!)1mAN6fHhEE7@3)EVeVU7Fuz+Pf=X}a
nVZICxk+<kWo!$@T>m=*Ka?*WG?SKAWx)=BUH~;?!6LkG=(gQT<

literal 0
HcmV?d00001

diff --git a/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts b/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts
index 5036c8ef20bc..34997b01f86d 100644
--- a/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts
@@ -10,9 +10,17 @@ TODO: Test ImageBitmap generated from all possible ImageBitmapSource, relevant I
 TODO: Test zero-sized copies from all sources (just make sure params cover it) (e.g. 0x0, 0x4, 4x0).
 `;
 
+import { getResourcePath } from '../../../common/framework/resources.js';
 import { makeTestGroup } from '../../../common/framework/test_group.js';
+import { raceWithRejectOnTimeout } from '../../../common/util/util.js';
 import { kTextureFormatInfo, kValidTextureFormatsForCopyE2T } from '../../format_info.js';
 import { TextureUploadingUtils, kCopySubrectInfo } from '../../util/copy_to_texture.js';
+import {
+  convertToUnorm8,
+  kImageNames,
+  kImageInfo,
+  kImageExpectedColors,
+} from '../../web_platform/util.js';
 
 import { kTestColorsAll, kTestColorsOpaque, makeTestColorsTexelView } from './util.js';
 
@@ -541,3 +549,121 @@ g.test('copy_subrect_from_2D_Canvas')
       { maxDiffULPsForFloatFormat: 1, maxDiffULPsForNormFormat: 1 }
     );
   });
+
+g.test('from_rotated_image')
+  .desc(
+    `
+        Test HTMLImageElements with rotation metadata can be copied to WebGPU texture correctly.
+
+          It creates ImageBitmap with images under Resource folder, with orientation flag set to
+          'from-image'.
+
+          Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel
+          of dst texture, and read one pixel out to compare with the manually documented expected color.
+
+          If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result
+          is flipped.
+
+          The tests covers:
+          - Image with rotation metadata
+          - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases)
+          - TODO: partial copy tests should be added
+          - TODO: all valid dstColorFormat tests should be added.
+          - TODO: all valid imageOrientation flags tests should be added
+        TODO: all valid dstColorFormat tests should be added.
+    `
+  )
+  .params(u =>
+    u //
+      .combine('imageName', kImageNames)
+      .combine('srcDoFlipYDuringCopy', [true, false])
+  )
+  .fn(async t => {
+    const { imageName, srcDoFlipYDuringCopy } = t.params;
+    const kColorFormat = 'rgba8unorm';
+
+    // Load image.
+    const image = new Image();
+    const imageUrl = getResourcePath(imageName);
+    image.src = imageUrl;
+    await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
+
+    const imageBitmap = await createImageBitmap(image, {
+      imageOrientation: 'from-image',
+    });
+
+    const width = imageBitmap.width;
+    const height = imageBitmap.height;
+
+    const dstTexture = t.createTextureTracked({
+      size: { width, height },
+      format: kColorFormat,
+      usage:
+        GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    t.device.queue.copyExternalImageToTexture(
+      {
+        source: imageBitmap,
+        flipY: srcDoFlipYDuringCopy,
+      },
+      {
+        texture: dstTexture,
+      },
+      {
+        width,
+        height,
+      }
+    );
+
+    const expect = kImageInfo[imageName].display;
+    const presentColors = kImageExpectedColors.srgb;
+
+    if (srcDoFlipYDuringCopy) {
+      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
+        // Flipped top-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
+        },
+        // Flipped top-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
+        },
+        // Flipped bottom-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
+        },
+        // Flipped bottom-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.topRightColor]),
+        },
+      ]);
+    } else {
+      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
+        // Top-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
+        },
+        // Top-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.topRightColor]),
+        },
+        // Bottom-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
+        },
+        // Bottom-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
+        },
+      ]);
+    }
+  });
diff --git a/src/webgpu/web_platform/copyToTexture/image.spec.ts b/src/webgpu/web_platform/copyToTexture/image.spec.ts
index 7bb577ae5d07..9d90f8d0e412 100644
--- a/src/webgpu/web_platform/copyToTexture/image.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/image.spec.ts
@@ -2,10 +2,17 @@ export const description = `
 copyExternalImageToTexture from HTMLImageElement source.
 `;
 
+import { getResourcePath } from '../../../common/framework/resources.js';
 import { makeTestGroup } from '../../../common/framework/test_group.js';
 import { raceWithRejectOnTimeout } from '../../../common/util/util.js';
 import { kTextureFormatInfo, kValidTextureFormatsForCopyE2T } from '../../format_info.js';
 import { TextureUploadingUtils, kCopySubrectInfo } from '../../util/copy_to_texture.js';
+import {
+  convertToUnorm8,
+  kImageNames,
+  kImageInfo,
+  kImageExpectedColors,
+} from '../../web_platform/util.js';
 
 import { kTestColorsOpaque, makeTestColorsTexelView } from './util.js';
 
@@ -339,3 +346,113 @@ g.test('copy_subrect_from_2D_Canvas')
       { maxDiffULPsForFloatFormat: 1, maxDiffULPsForNormFormat: 1 }
     );
   });
+
+g.test('from_rotated_image')
+  .desc(
+    `
+    Test HTMLImageElements with rotation metadata can be copied to WebGPU texture correctly.
+
+    It creates Images with images under Resource folder.
+
+    Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel
+    of dst texture, and read one pixel out to compare with the manually documented expected color.
+
+    If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result
+    is flipped.
+
+    The tests covers:
+    - Image with rotation metadata
+    - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases)
+    - TODO: partial copy tests should be added
+    - TODO: all valid dstColorFormat tests should be added.
+  `
+  )
+  .params(u =>
+    u //
+      .combine('imageName', kImageNames)
+      .combine('srcDoFlipYDuringCopy', [true, false])
+  )
+  .fn(async t => {
+    const { imageName, srcDoFlipYDuringCopy } = t.params;
+    const kColorFormat = 'rgba8unorm';
+
+    // Load image.
+    const image = new Image();
+    const imageUrl = getResourcePath(imageName);
+    image.src = imageUrl;
+    await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
+    const width = image.width;
+    const height = image.height;
+
+    const dstTexture = t.createTextureTracked({
+      size: { width, height },
+      format: kColorFormat,
+      usage:
+        GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    t.device.queue.copyExternalImageToTexture(
+      {
+        source: image,
+        flipY: srcDoFlipYDuringCopy,
+      },
+      {
+        texture: dstTexture,
+      },
+      {
+        width,
+        height,
+      }
+    );
+
+    const expect = kImageInfo[imageName].display;
+    const presentColors = kImageExpectedColors.srgb;
+
+    if (srcDoFlipYDuringCopy) {
+      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
+        // Flipped top-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
+        },
+        // Flipped top-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
+        },
+        // Flipped bottom-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
+        },
+        // Flipped bottom-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.topRightColor]),
+        },
+      ]);
+    } else {
+      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
+        // Top-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
+        },
+        // Top-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.topRightColor]),
+        },
+        // Bottom-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
+        },
+        // Bottom-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
+        },
+      ]);
+    }
+  });
diff --git a/src/webgpu/web_platform/util.ts b/src/webgpu/web_platform/util.ts
index f000d80e56b9..dd7c0ed0085c 100644
--- a/src/webgpu/web_platform/util.ts
+++ b/src/webgpu/web_platform/util.ts
@@ -101,6 +101,15 @@ export const kVideoExpectedColors = makeTable({
   },
 } as const);
 
+export const kImageExpectedColors = {
+  srgb: {
+    red: { R: 1.0, G: 0.0, B: 0.0, A: 1.0 },
+    green: { R: 0.0, G: 1.0, B: 0.0, A: 1.0 },
+    blue: { R: 0.0, G: 0.0, B: 1.0, A: 1.0 },
+    yellow: { R: 1.0, G: 1.0, B: 0.0, A: 1.0 },
+  },
+} as const;
+
 // MAINTENANCE_TODO: Add BT.2020 video in table.
 // Video container and codec defines several transform ops to apply to raw decoded frame to display.
 // Our test cases covers 'visible rect' and 'rotation'.
@@ -350,6 +359,47 @@ type VideoName = keyof typeof kVideoInfo;
 export const kVideoNames: readonly VideoName[] = keysOf(kVideoInfo);
 
 export const kPredefinedColorSpace = ['display-p3', 'srgb'] as const;
+
+export const kImageInfo = makeTable({
+  table: {
+    'four-colors.jpg': {
+      display: {
+        topLeftColor: 'yellow',
+        topRightColor: 'red',
+        bottomLeftColor: 'blue',
+        bottomRightColor: 'green',
+      },
+    },
+    'four-colors-rotate-90-cw.jpg': {
+      display: {
+        topLeftColor: 'blue',
+        topRightColor: 'yellow',
+        bottomLeftColor: 'green',
+        bottomRightColor: 'red',
+      },
+    },
+    'four-colors-rotate-180-cw.jpg': {
+      display: {
+        topLeftColor: 'green',
+        topRightColor: 'blue',
+        bottomLeftColor: 'red',
+        bottomRightColor: 'yellow',
+      },
+    },
+    'four-colors-rotate-270-cw.jpg': {
+      display: {
+        topLeftColor: 'red',
+        topRightColor: 'green',
+        bottomLeftColor: 'yellow',
+        bottomRightColor: 'blue',
+      },
+    },
+  },
+} as const);
+
+type ImageName = keyof typeof kImageInfo;
+export const kImageNames: readonly ImageName[] = keysOf(kImageInfo);
+
 /**
  * Starts playing a video and waits for it to be consumable.
  * Returns a promise which resolves after `callback` (which may be async) completes.

From 91159f44ec09a2ab8b12c98da7344c1487c60441 Mon Sep 17 00:00:00 2001
From: shaoboyan <shaoboyan@microsoft.com>
Date: Thu, 19 Dec 2024 16:31:46 +0800
Subject: [PATCH 2/9] video -> jpg

---
 src/resources/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/resources/README.md b/src/resources/README.md
index 28e522e0239d..74cedb6bac96 100644
--- a/src/resources/README.md
+++ b/src/resources/README.md
@@ -92,7 +92,7 @@ rm temp.mp4
 
 ```
 
-The test video files were generated with by exiftool cmds below:
+The test jpg files were generated with by exiftool cmds below:
 ```
 // Generate jpg picture with 90 cw rotation metadata
 exiftool -Orientation#=6 four-colors.jpg -o .\four-colors-rotate-90-cw.jpg

From 6df131951c762c3c703d3e2fdc8053e9d5eeddd0 Mon Sep 17 00:00:00 2001
From: shaoboyan <shaoboyan@microsoft.com>
Date: Mon, 23 Dec 2024 13:24:32 +0800
Subject: [PATCH 3/9] Address comments

---
 src/resources/README.md                       |  11 +-
 src/resources/four-colors-rotate-180-cw.jpg   | Bin 2677 -> 3519 bytes
 src/resources/four-colors-rotate-270-cw.jpg   | Bin 2677 -> 3576 bytes
 src/resources/four-colors-rotate-90-cw.jpg    | Bin 2677 -> 2780 bytes
 .../copyToTexture/ImageBitmap.spec.ts         | 126 --------------
 .../web_platform/copyToTexture/image.spec.ts  | 117 -------------
 .../copyToTexture/image_file.spec.ts          | 124 ++++++++++++++
 src/webgpu/web_platform/util.ts               | 161 +++++++++++++-----
 8 files changed, 255 insertions(+), 284 deletions(-)
 create mode 100644 src/webgpu/web_platform/copyToTexture/image_file.spec.ts

diff --git a/src/resources/README.md b/src/resources/README.md
index 74cedb6bac96..8b8f38ba2969 100644
--- a/src/resources/README.md
+++ b/src/resources/README.md
@@ -92,15 +92,24 @@ rm temp.mp4
 
 ```
 
-The test jpg files were generated with by exiftool cmds below:
+The test jpg files were generated with by exiftool cmds and other image tools in below steps:
 ```
+// Generate four-colors.jpg with no orientation metadata
+Use a image tool (e.g. "Paint" app on Windows) to create four-colors.jpg from four-colors.png and check with exiftool to ensure no orientation metadata been set.
+
 // Generate jpg picture with 90 cw rotation metadata
+Use a image tool (e.g. "Paint" app on Windows) to create four-colors-hard-rotate-90-ccw.jpg and check with exiftool to ensure no orientation metadata been set.
 exiftool -Orientation#=6 four-colors.jpg -o .\four-colors-rotate-90-cw.jpg
+rm four-clors-hard-rotate-90-ccw.jpg
 
 // Generate jpg picture with 180 cw rotation metadata
+Use a image tool (e.g. "Paint" app on Windows) to create four-colors-hard-rotate-180-ccw.jpg and check with exiftool to ensure no orientation metadata been set.
 exiftool -Orientation#=3 four-colors.jpg -o .\four-colors-rotate-180-cw.jpg
+rm four-clors-hard-rotate-180-ccw.jpg
 
 // Generate jpg picture with 270 cw rotation metadata
+Use a image tool (e.g. "Paint" app on Windows) to create four-colors-hard-rotate-270-ccw.jpg and check with exiftool to ensure no orientation metadata been set.
 exiftool -Orientation#=8 four-colors.jpg -o .\four-colors-rotate-270-cw.jpg
+rm four-colors-hard-rotate-270-ccw.jpg
 
 ```
diff --git a/src/resources/four-colors-rotate-180-cw.jpg b/src/resources/four-colors-rotate-180-cw.jpg
index ca8d69aa4823fba4458d37fd92bf8d6f6821560c..5be3efab39b10a38ca9917d19c7206f1b52ed7bb 100644
GIT binary patch
literal 3519
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
G?SBD=u^Hb0

literal 2677
zcmeH{ZBSHI7{{Nxci&lD?y_r^)9eT$tMmoXD8JlvSx6>FmK4gSNHA2IhS4y|nY?Mm
z%blqm5=)#W+}$X$Y=;spre;Gyw6P%+0&yl{C4#jkc42W@?%vZm!Xi^2kiN#V_v}3P
zoadhV|Novd7xkiFAtozhQwC5J1!edLXaI^VWqXPMHgASC0H6dpr2`sg6#1tqklo1v
za%mdRk$D`}nCYC{SQ(H`&+AI9y1O~41FHNaK%))a05eD^id-{6%V-jEsg#x}<O&5D
zN>!9fsZ=W!3U#zv9i_pcP%Y6$YnG6lY(gF<PvJ|WR47Ts!UBB{j1oqv$7m`JBn(9}
z6lw({Rw~0(2$-3mB(zi}$CA`hxS%Np%cp4x7AuotyVPrV9i)s*w<39iJl48H5w};L
za=6;AjNjPUV#w(nU71?2?}$ph^uA^HKaj90(X@Ka+I0`7J@V*!bGjuX^YKktPj20o
zoA=by+Y5KTP_%3Jp5m8F_rG$W?A3#By!lpnMP(KL?$MfK@4bJ#_JqUvQT@lCG<<sM
z%dgHfojv#UH_hiSw6<MrzjXPBtJk`^f9~nM-Z$X6Ir!Vq@53WrpMPvTFmXFL86v)L
z7pHB_I{Sw&2K$oW9!M3$7bQ7>2hB)jE0X294OYdDy|HmAhn4z`)%L~~ReWmBsG(qA
zr+VqiwF3!0V(pHzdoy<AKRKH<cGp)QXz;<5Ff;=!gex6<lE`&*OL)`C`G$7rL*C>H
zWFsh^uavB7M+$Jc|8oR}^NYLBCALUrE{(Z4AtSCIc6nVvyDgmCKlwI-zs3X_L1it1
z?EXm>!EUagCePPnG5XBL&}sMBas>SY2$)pS?)G!yPhy+Nb@L0J^^~)LXSks>1nvuB
z+^(>h8$=Mchk0v$`?GqkO~ZN5BDhk5fU6MFJ3{3ME+d#SPw5@*cbZKI_+<#XUqW!a
zUqqk{R@DWf5gbJ@Q8BUF!aZ1OMW9bcaOwtvWOrCJ`eIox7L$nJPwgK$#D`Nf6(ZPn
zPAuf61lF^P>q-;1Am}sp)*FQVotZ**yZBj&a1p`nAlLc?f`$^I4#63=F)Jx}%VC=X
zVRRt~LViAMa=2ed;7N$QvkuEOG+?<HND3SF9D1=czg~|gnWSlOU96|c7|1{{l!@Tm
zEk7Pi8h2odvl~<hxlXa6U$}(TR!zDrhia^uLb@x$4SyE+F0LB`s5Oc{cHOY+Dvu#n
z9*gv?*y!7C3pu&5cm%&B4t-|`S#b|_?g%rpn1t1AEfIHeQ>{Xe!<}Vvig9@}eQV&_
zidio{4p(dl%IZ#x=Z#qOTx(W@S(7$+Ix}o_Pgdg-6Fc@C0bmPO<wtsEUzq!rX3X!_
su%IzHc$ja52gz6Tp$`8C^Hq{{VL7S3rVTuQFV%~C|C|5+g9*C+H(WzC8~^|S

diff --git a/src/resources/four-colors-rotate-270-cw.jpg b/src/resources/four-colors-rotate-270-cw.jpg
index e126e92ace3bbe9ec08648e36785299262d72ccd..62ae07beb092a67dc9c1b0c5aa1100a766ad0fc2 100644
GIT binary patch
literal 3576
zcmdT`3sh4_8lIa62@%0ys9Lv8tD*?ogDutv+xGe>D!3esh`73L6szLeiac7tBivP2
zsIf=ZC$)Bo1QnIlEG?8rT`q{IwQ33$ML`h+0^yNJB(Ix$XXhsAcDtLLv%9C=Jv+I7
zGWqA9JKy*J|I9zI1wIC2q83Fi0vLvY4D<o818j=O*s=+L=x7iO01yH%%pY)34?}&x
z#Q@*Y2Vf<ai*&3WHQ5+vpZy~f1D;dwpC<GFzR%hLEaxNurFpOwECd`3V;@)J^0{pD
z;_<kAftNtQiqLzMw@@e&3Iw9jBGD)x)CAtXexrSS**^Ocb~-x?Jw8H#khS>t8mt9k
zAvO;fxY#7X5o2622Co1qLdr*8VIAXY7>CQ_dm%`oQOKZt41&+)au8TP57EW4&^X|U
z`Tj4zI^S!oY`tJovgEa02MdLh7nIfoEN?VS2}?-X?Jat4-1rI42Tq+9G(C9c>$7Ih
znH#?F?TAH-mqbRzu83P1zv@@3H@vfP)8@o2zfDbh|AX|5%pH4vzc(lM!+nZFhmRaR
zmjChbPgF&xPM;}0d+z*apO=+?QBhe{eYyTh!_{lozq-+M=iBDH_gd~h=;(aX)!n1*
z?bAISHa;6MnJrcu%L_vx{H{5P{R1yC;>AHR;0ah>7$+SGSIpzT{HmA#e3@W<^4LkQ
z?Gj2B94suY^PU{G+z^nE(kOav%FK?yrz|xGvww})?*E9{--vzB>jCgViOCUj#Q+EP
zRFxuxw&Nk9Al2{O311gNNnQxC^#4Xhmd<Y?Yo)FGA()v@-zJ8tY{fa`Fa*p)2wHb5
zg46~cy(~zj0Pchd?^P)vAnUEab~nuG#+_9UEK5^Axv)dQGzg*~0K~RXdz0Ke7lLZ7
zuHbnHzJ`EGhhQ6mO4g1YnWs_&0XM?6^dnvj1b*Gy-3&XXxCk96cQUkNbR}twB-*r0
zzw&&>RtQ2N7;L925i*1%rkSG%I_XaQo?JxKDLa1jvIh&WeXG-l4tfTGsS|=*fe@rB
zsf*d?I@ER&f(pX)7(upU_zHJnV0HL`YQ$P^VB$Slh*-BV;r;AtKOrBEBNGl({}+Pf
zOo)p=dFr{6{Qo9EhX-N_&2&P4cyY@a2nv=%&_0#ae@VsiA;60u*cEETk7nklga^lz
zMnmw%X$Wefr3ojP%%u?Q`~)wbAvfA^i$4T2de&a=J@;0_Z2NFNW1X3$NV0Z^(!+_&
zw{?W37lOx2?e)jgC#z0Tl6K<_In~u@noequkmj$7{(d#zjco@M?oj0o{&Jk1$zyor
z&AC4!9%o|w<w9WGl!lkMhoTBXs8Li}@RG2%g>zo2>?CV7t(hywD@T^<hGQ%4h2GF7
znX|9y9!;Pgwdc!o(Fqc$Qc*jl#s^YrKxVSw+A`eSqBex;n#qIoO?u6twfhp!*0c-k
zrd)=SWYzdt2mNSMkgYtai%9j2{2)+O$b3_QTyH?GPskgbNLckhFqn!A8vn-z`0Lx>
z<d1)Gw<5&WN-dp$Qez`Z4cv&=;(v-`Hk)$<CyTh>$ReZ<R%xtMsNEZakFyfgM*PwY
z=e!`M=_;YQPdtvX*Y^hy$LWq;y+O6lB(lY(V_{4-I*mC*k91XuU8DE$o4-hKQl-Gl
zN|i>F+%guWmaReFLu9PmAwsW{$mr7_L7@B$f?B0D_iiu*VN^Z4x`f!W0oM+YhH1?D
z5e0dZF{p2yIl4!ByxMlJ@0IL#@pgPQ{fqjW5vv>3gYR^2TicpNDTg)>Y>F!BRBqL;
z(Vgf=%&7fZ+<d}Vbequ6)<&zyC8dm(UYR=_TIFk0Qn##)j^Q(n5qorH_`$5}>7PRI
zDCu?{sx6n=|2RwWb7@?megDwHOIpU5otCMgd+dE>vURo#eqHjE7k=>W{etF1ViNTS
zy>sr1sSsq6;qOUSy;ZW%I<76(F}c^V>YYSY-N<U`^_s5iBeIA9dnIw%fEWXJ65mr#
z8%NYlJM1k)O?J6Wozw0+*-=~b%rT}JNey!IbO@@hpfd5yNH=>b0(cavSj-x{!(*Kd
zF|KE<$hU90d>db%lq*JC0@b@~R53MvcBh&;0zq3RLTt-qbbBSTc_@DWB+}CoSp@Nl
z(r^*|0(TN%{WCgl=&jER$XQao@<Mh=M@9XIj%xRWzC(XB@o7ALgBVIii0L;Vcz=P1
z3hLLSK&9`P#^Sm3xttawKjCNA+$G}-tsPg0R+36)`k1SuEhS7hZk~f;kX=Aj7e+{y
zVQxgw7a@_!zus&Q@kE*La@jQXtz1gmFF$X2&(Mjp*8~XCAlTq#kAomZNqvffK*rz?
zm#I8lP@bUyb@%5?fTv3X$K|oZ_nc|bymOW%S!&WVZA3Lux+fd$pQ;%8b|3;=tQ<P)
zE}@VPv!So};rkGXI@}O;IKkzy$bM&9=xQeJoRjCcW#JF;mO3(kXe(y4{s`|Kjd=xo
zQFA9WQifRHg<!A88<)#xr$$^^F(Myb^RvbDmna{kL&|}5?Fw=z7F~<>A;^7N>b$#*
VVs*}~^aXLb(gSPoV{IjP|F3eCRlooM

literal 2677
zcmeH{e^3-<7{{Nzy<Z%M#~ycPIn9kAa(ev(Xq5kKdK~0UjvOkKO_5-zG!3I+k~6t!
z#gCn-8xl*LCcGo;vh0QuEvDu|LA0?U6asN3;v@pBiQ_mtj=g<*U*VLgKal>7XZM|X
z_I;my_xt@k?=0#;ze21vV?zc|6a}UD0@M$MmeSpY02?>LDgaP|oYDe~GYaQGQy{yO
z1LV*&o+I-(Y_Zchd9X1cou1d0*tGX@QU_Go34jJWx&da8P!zdmf|k)F<WeauQ^*wx
zGL%u#QA(vssZgk5RH|q-4n@==O^kXG$;l?<b@CRz)k=kuRLn2X_rNG&lzM`u;z7bt
zG(({lFkq!JOof1%2}(jsWpXS@6^#oTW3haimSC|mDYi?!j@LoT$h6Cn*U95-+ZFM9
zbSa0b9Lj|C4bA%Oj?v|*`FjsXsTM!5<iUp$S0ou%u3Ek3(X_`NUu#acWMn?M!Mb_N
z)|}j@pV?Nh<Hf?AyLK17QnK&W{iUxRc=N5d%gQS%`S*@gAASFWV>QQ}bsyKC{KWO?
zsV~1e(|GpW*WWaqztGZpvF+03AFf{O?E1O8=X!6y_vXNFgTD_AkNC#?<AI6W!O0Nu
zMd21kV%pe0d@<OU1ouFyAigNcemrPKDqEH;*RHcEw(p6HPdTL2t*>%4G)E<*W{>Lg
z_jafjFJIlC=p)wdIJ-Y%hyRnayT<PM>IF4Em=cC&fQ4{{lQ)T6dzXYao|tQB20!AB
z?m!lTqPa@Rx@I^ZmydmpK!1K=_u0f2$jqiOJ11nswL|U^chF%E=k!g!gWxZ}KqIKA
zL6Frq$s*Xr<yYtWx-ABu*$_JI@h?Tt*N=cn6&;>2PW(x1HM(zp!L!~nHt;Mrn1;Y}
zL5$xSHgf|A!j3R+%WHd1$F-`tk+TS{6eHluh4l7N8G_3Qrp!}1r{~=!BLaR2g07bl
z9P1MiXo8isffxiw5KNR$th8_sm)H>Kk`bJ`fgsrv77e~Qb_9z_Lhz^Nk8I+jPBa!E
z*m_PZ;HCuDyMpUX6E`8~HT2Z$g?$~FLROpjS+Q^t!R;W|@)QDBu~3WP4BKEe1#da+
zvmlJl2SI3z4;!7HHxPIeBj2pWa`i4O7XwLQ!`_20b>!9S@FZiJ2G_}Y8x4UB1cR9f
zzTNcW0n@k>Q@p!DxsX#Qy847mSZ(E`+j6klmMNsWBi!(Bf$!wHFn}6^=wsImxv%mV
zV#U!&---;rZT3(d=TAWJOVZ$X`j8FxQ0s{>Gm9pyW=pZSgPUp*x}6@Yu}+N7o#~s4
zYb|0&@Nu|eM^IXOd^~s9qT^bu5oV2=;OWe;%`;hrPfVQuc>=&5tjvq_%rQUr%}to!
ttsy~ebn-CQ2oI3I=p*f8AI?=t)`g{{`kE&2!u?b)?EP>4{|_eU`rnV2H6Z{1

diff --git a/src/resources/four-colors-rotate-90-cw.jpg b/src/resources/four-colors-rotate-90-cw.jpg
index 15840c2269693b097a885d70f494cdb7d99ba1f7..2e2beed8e491e6b2c5f6898dfef88b64f273f239 100644
GIT binary patch
literal 2780
zcmex=<NpH&0WUXCHwH#VMurL?WcdG(A<eZSGmU}4*Ox(yfq{X8fsIj!ff>kRWME@p
zU}j`s1+y6#!kC$XVjyuK2o!*@L7YHA1{R38P)VQ=f(=r~z}U8cfnj6+|Jw}C3`~rS
zAOr=>tjr+5#=^qP%Ff2l4#FIq+?*U7TpaA|T)bRd+&n<Q&dJBm%fkm^gA4&_2k8PL
z9u9U6kP6bk{{swy9E=VOAD9`H7?=bZnFSgDA7PLOx|9_dDxiRY0!Aig7FIT(leoBn
z3bqOWozKk71avGb3(&iawLp0W7C}}aMMFn6;lM<8r9u&-#)%6#l$|yn6b-ugLB%+!
zsELzHOk6@zN>xo=LsQGd)Xdz%(#qMz)y>_*(<?Y6G%P$KGAcPGH7z|OGpo3yw5+_M
zvZ}eIwXMCQvuo1iDO0CSpD}aRqQy&=E?d50<*H4aw`|?EeaFsShYlY(dhGa#lcz3S
zzH;^2^&2;DJ$&@|$<t@gU%Y(v@zduoU%!3-@$(nRUyQ&ggaL@h(EKF`^cNE_4p`Vh
z{$gY*2V!PH7FI<=HX+AA_QXPAC8I_T5vPd@Hy-3vHV*nAnpAX=OH9S&q3TDF*T6m_
z&SOnv`3&wcguiYv@BkAglOVGogFVBKeO(&spBn%D!=<sP0W1EivHolokT_lA^`Buz
z{_pz#47v7)_TLWt&tQ`O_e%YD7mY<-f42N*;5yW$v49B+=097dv1tEF{@*LGS^%<m
z)DlF{jRx0f>Y^YsE>`O44~(BS|6xR+oBN8z%2xsyT_xof0R<gcMN+D|jBH&QL;@$i
z(m3%|gaJc|{4$Y1*LwB&Uw~>r>M*hBpVI5!G~<uQ*6+W+;rPGo{NKy|GrarxGrn{F
zXWst|`TrT-HoA(0|Nc`KhD|$2tUhT9(2@g^e*<u-7_|f`<VS;RG<6{*2jo0MjePR|
FCICQR98UlM

literal 2677
zcmeH{e^3-<7{{Nzy<Z%M#~ycPIn9kAa(ev(Xq5kKdK~0UjvOkKO_5-zG!3I+k~6t!
z#gCn-8xl*LCcGo;vh0QuEvDu|LA0?U6asN3;v@pBiQ_mtj=g<*U*VLgKal>7XZM|X
z_I;my_xt@k?=0#;ze21vV?zc|6a}UD0@M$MmeSpY02?>LDgaP|oYDe~GYaGYGzGFd
zIY16g<2f>q!xlT8lLs3E(&>3^iA{SiCv`xTod9UCqZ?ob2}O~6CTJN=LN1lkGKE~B
zAVV1y9i>#NlnR9^Mx}~Y<4{B`(!{72k(_KoUMFwiTdh<mNyYpEeGiNhMyV%gDjp;Z
zMKcs?0RvVl!&C^EnV=-JR3^ugRMEJgF&4|GX$cl9lVZEn>v$ccj7+;Md7V7Ywp|gw
zN0)M_%ArhH-_Wej?igL3n!opOlxpz<OCEeEaYd4G<*L<d9!-1f@wMi3OGf6C8?2kR
zY|Y7i`k8G7J6<f@xodaPD<%70-Cz3Jfj8fJyR5vTl7H_=_0jh~I97AqS@&`M$xmFL
zp8E2uGmU4@ef>?-`3o(r7uzmf{^9Di&aR)kd#?BPdv6Z>Hu(F{@Q82BKOUI49h?ji
zUleX(B&Lo1!xw{nNpKIO3gU~B?8k#<q_Snna_u^sV*8%B_>@CR-TEp=LvvI@YWAo;
ze{Y9s@$%LEi9TZOj<fqScKAOzyKC&8uU=5&gDGKX23QDJIC+!EwRcH)<B7S3X7D54
z=niBdD4MI3tZRnzarxNi2=wO{cArgbfy`_gvvWd5Ts!0*aR(jta8BRkI|%;r3p9d?
z8U$H=lPrQ=Tz++~uiIkqnGK=S9{*AVef<cSRMFuX<HVoDR-^mo7d-1NV*}4}gJ}pn
z7sU9TVKX;?AnXY9w!F6IbX=>N8##;MN-+YiTu5&Zl_9u{V9GqDb9&xwG9uuYAn1A-
z!LdFOfhJg48;C)01i?i4#7YbIaET3pE*Zh88wip;VbS1=V@I%<Bm{qI{>Uai>O^A!
zg01Jo0&YrRy(_rRG;tGxUPDj4Uf9=>DP*;YpA`!i5!?=PEl(kE6$`Zp&ae$uQ}CA4
zJ`2L=d=P}j_^{FGc>{qrG4jn?ELZQsaxst;Htaq4Qb%6B4o@<sX>gsax6u&DKronz
z;M+|<9x#nNF~z$ZlnXg^qN`81gw<9~x-AE*ZJ9#4JHieB7WhuC3j?Szh(31Bkozi+
zAyyoX^sUI?+hz~dasC7Zza$NQrw`e154D~MGqY&IYPJ-MJGiM9q1)-P8tcUP+?l?)
zxYi<e1RsYhb_Auh$H#MrEjq5n8e!I`37*aj+dPw1_{7BdpC<t9!OFZy&m8k}-`s@x
u-5L_qMkfz*jqm{Zi$2mm_TgNWWL;QFs;_ARFWgV{!ruSp|NmfuuKx{t4>cbE

diff --git a/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts b/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts
index 34997b01f86d..5036c8ef20bc 100644
--- a/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/ImageBitmap.spec.ts
@@ -10,17 +10,9 @@ TODO: Test ImageBitmap generated from all possible ImageBitmapSource, relevant I
 TODO: Test zero-sized copies from all sources (just make sure params cover it) (e.g. 0x0, 0x4, 4x0).
 `;
 
-import { getResourcePath } from '../../../common/framework/resources.js';
 import { makeTestGroup } from '../../../common/framework/test_group.js';
-import { raceWithRejectOnTimeout } from '../../../common/util/util.js';
 import { kTextureFormatInfo, kValidTextureFormatsForCopyE2T } from '../../format_info.js';
 import { TextureUploadingUtils, kCopySubrectInfo } from '../../util/copy_to_texture.js';
-import {
-  convertToUnorm8,
-  kImageNames,
-  kImageInfo,
-  kImageExpectedColors,
-} from '../../web_platform/util.js';
 
 import { kTestColorsAll, kTestColorsOpaque, makeTestColorsTexelView } from './util.js';
 
@@ -549,121 +541,3 @@ g.test('copy_subrect_from_2D_Canvas')
       { maxDiffULPsForFloatFormat: 1, maxDiffULPsForNormFormat: 1 }
     );
   });
-
-g.test('from_rotated_image')
-  .desc(
-    `
-        Test HTMLImageElements with rotation metadata can be copied to WebGPU texture correctly.
-
-          It creates ImageBitmap with images under Resource folder, with orientation flag set to
-          'from-image'.
-
-          Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel
-          of dst texture, and read one pixel out to compare with the manually documented expected color.
-
-          If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result
-          is flipped.
-
-          The tests covers:
-          - Image with rotation metadata
-          - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases)
-          - TODO: partial copy tests should be added
-          - TODO: all valid dstColorFormat tests should be added.
-          - TODO: all valid imageOrientation flags tests should be added
-        TODO: all valid dstColorFormat tests should be added.
-    `
-  )
-  .params(u =>
-    u //
-      .combine('imageName', kImageNames)
-      .combine('srcDoFlipYDuringCopy', [true, false])
-  )
-  .fn(async t => {
-    const { imageName, srcDoFlipYDuringCopy } = t.params;
-    const kColorFormat = 'rgba8unorm';
-
-    // Load image.
-    const image = new Image();
-    const imageUrl = getResourcePath(imageName);
-    image.src = imageUrl;
-    await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
-
-    const imageBitmap = await createImageBitmap(image, {
-      imageOrientation: 'from-image',
-    });
-
-    const width = imageBitmap.width;
-    const height = imageBitmap.height;
-
-    const dstTexture = t.createTextureTracked({
-      size: { width, height },
-      format: kColorFormat,
-      usage:
-        GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-
-    t.device.queue.copyExternalImageToTexture(
-      {
-        source: imageBitmap,
-        flipY: srcDoFlipYDuringCopy,
-      },
-      {
-        texture: dstTexture,
-      },
-      {
-        width,
-        height,
-      }
-    );
-
-    const expect = kImageInfo[imageName].display;
-    const presentColors = kImageExpectedColors.srgb;
-
-    if (srcDoFlipYDuringCopy) {
-      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
-        // Flipped top-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
-        },
-        // Flipped top-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
-        },
-        // Flipped bottom-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
-        },
-        // Flipped bottom-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.topRightColor]),
-        },
-      ]);
-    } else {
-      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
-        // Top-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
-        },
-        // Top-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.topRightColor]),
-        },
-        // Bottom-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
-        },
-        // Bottom-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
-        },
-      ]);
-    }
-  });
diff --git a/src/webgpu/web_platform/copyToTexture/image.spec.ts b/src/webgpu/web_platform/copyToTexture/image.spec.ts
index 9d90f8d0e412..7bb577ae5d07 100644
--- a/src/webgpu/web_platform/copyToTexture/image.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/image.spec.ts
@@ -2,17 +2,10 @@ export const description = `
 copyExternalImageToTexture from HTMLImageElement source.
 `;
 
-import { getResourcePath } from '../../../common/framework/resources.js';
 import { makeTestGroup } from '../../../common/framework/test_group.js';
 import { raceWithRejectOnTimeout } from '../../../common/util/util.js';
 import { kTextureFormatInfo, kValidTextureFormatsForCopyE2T } from '../../format_info.js';
 import { TextureUploadingUtils, kCopySubrectInfo } from '../../util/copy_to_texture.js';
-import {
-  convertToUnorm8,
-  kImageNames,
-  kImageInfo,
-  kImageExpectedColors,
-} from '../../web_platform/util.js';
 
 import { kTestColorsOpaque, makeTestColorsTexelView } from './util.js';
 
@@ -346,113 +339,3 @@ g.test('copy_subrect_from_2D_Canvas')
       { maxDiffULPsForFloatFormat: 1, maxDiffULPsForNormFormat: 1 }
     );
   });
-
-g.test('from_rotated_image')
-  .desc(
-    `
-    Test HTMLImageElements with rotation metadata can be copied to WebGPU texture correctly.
-
-    It creates Images with images under Resource folder.
-
-    Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel
-    of dst texture, and read one pixel out to compare with the manually documented expected color.
-
-    If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result
-    is flipped.
-
-    The tests covers:
-    - Image with rotation metadata
-    - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases)
-    - TODO: partial copy tests should be added
-    - TODO: all valid dstColorFormat tests should be added.
-  `
-  )
-  .params(u =>
-    u //
-      .combine('imageName', kImageNames)
-      .combine('srcDoFlipYDuringCopy', [true, false])
-  )
-  .fn(async t => {
-    const { imageName, srcDoFlipYDuringCopy } = t.params;
-    const kColorFormat = 'rgba8unorm';
-
-    // Load image.
-    const image = new Image();
-    const imageUrl = getResourcePath(imageName);
-    image.src = imageUrl;
-    await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
-    const width = image.width;
-    const height = image.height;
-
-    const dstTexture = t.createTextureTracked({
-      size: { width, height },
-      format: kColorFormat,
-      usage:
-        GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
-    });
-
-    t.device.queue.copyExternalImageToTexture(
-      {
-        source: image,
-        flipY: srcDoFlipYDuringCopy,
-      },
-      {
-        texture: dstTexture,
-      },
-      {
-        width,
-        height,
-      }
-    );
-
-    const expect = kImageInfo[imageName].display;
-    const presentColors = kImageExpectedColors.srgb;
-
-    if (srcDoFlipYDuringCopy) {
-      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
-        // Flipped top-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
-        },
-        // Flipped top-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
-        },
-        // Flipped bottom-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
-        },
-        // Flipped bottom-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.topRightColor]),
-        },
-      ]);
-    } else {
-      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
-        // Top-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
-        },
-        // Top-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.25 },
-          exp: convertToUnorm8(presentColors[expect.topRightColor]),
-        },
-        // Bottom-left.
-        {
-          coord: { x: width * 0.25, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
-        },
-        // Bottom-right.
-        {
-          coord: { x: width * 0.75, y: height * 0.75 },
-          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
-        },
-      ]);
-    }
-  });
diff --git a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
new file mode 100644
index 000000000000..0bb922100777
--- /dev/null
+++ b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
@@ -0,0 +1,124 @@
+export const description = `
+copyExternalImageToTexture from ImageFiles like *.png, *.jpg source.
+`;
+
+import { makeTestGroup } from '../../../common/framework/test_group.js';
+import { TextureUploadingUtils } from '../../util/copy_to_texture.js';
+import {
+  convertToUnorm8,
+  GetSourceFromImageFile,
+  kImageNames,
+  kImageInfo,
+  kImageExpectedColors,
+  kObjectTypeFromFiles,
+} from '../util.js';
+
+export const g = makeTestGroup(TextureUploadingUtils);
+
+g.test('from_orientation_metadata_file')
+  .desc(
+    `
+    Test HTMLImageElements with rotation metadata can be copied to WebGPU texture correctly.
+
+    It creates Images with images under Resource folder.
+
+    Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel
+    of dst texture, and read one pixel out to compare with the manually documented expected color.
+
+    If 'flipY' in 'GPUCopyExternalImageSourceInfo' is set to 'true', copy will ensure the result
+    is flipped.
+
+    The tests covers:
+    - Image with rotation metadata
+    - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases)
+    - TODO: partial copy tests should be added
+    - TODO: all valid dstColorFormat tests should be added.
+  `
+  )
+  .params(u =>
+    u //
+      .combine('imageName', kImageNames)
+      .combine('objectTypeFromFile', kObjectTypeFromFiles)
+      .combine('srcDoFlipYDuringCopy', [true, false])
+  )
+  .fn(async t => {
+    const { imageName, objectTypeFromFile, srcDoFlipYDuringCopy } = t.params;
+    const kColorFormat = 'rgba8unorm';
+
+    // Load image file.
+    const source = await GetSourceFromImageFile(imageName, objectTypeFromFile);
+    const width = source.width;
+    const height = source.height;
+
+    const dstTexture = t.createTextureTracked({
+      size: { width, height },
+      format: kColorFormat,
+      usage:
+        GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
+    });
+
+    t.device.queue.copyExternalImageToTexture(
+      {
+        source,
+        flipY: srcDoFlipYDuringCopy,
+      },
+      {
+        texture: dstTexture,
+      },
+      {
+        width,
+        height,
+      }
+    );
+
+    const expect = kImageInfo[imageName].display;
+    const presentColors = kImageExpectedColors.srgb;
+
+    if (srcDoFlipYDuringCopy) {
+      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
+        // Flipped top-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
+        },
+        // Flipped top-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
+        },
+        // Flipped bottom-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
+        },
+        // Flipped bottom-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.topRightColor]),
+        },
+      ]);
+    } else {
+      t.expectSinglePixelComparisonsAreOkInTexture({ texture: dstTexture }, [
+        // Top-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.topLeftColor]),
+        },
+        // Top-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.25 },
+          exp: convertToUnorm8(presentColors[expect.topRightColor]),
+        },
+        // Bottom-left.
+        {
+          coord: { x: width * 0.25, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.bottomLeftColor]),
+        },
+        // Bottom-right.
+        {
+          coord: { x: width * 0.75, y: height * 0.75 },
+          exp: convertToUnorm8(presentColors[expect.bottomRightColor]),
+        },
+      ]);
+    }
+  });
diff --git a/src/webgpu/web_platform/util.ts b/src/webgpu/web_platform/util.ts
index dd7c0ed0085c..420f5357c126 100644
--- a/src/webgpu/web_platform/util.ts
+++ b/src/webgpu/web_platform/util.ts
@@ -360,46 +360,6 @@ export const kVideoNames: readonly VideoName[] = keysOf(kVideoInfo);
 
 export const kPredefinedColorSpace = ['display-p3', 'srgb'] as const;
 
-export const kImageInfo = makeTable({
-  table: {
-    'four-colors.jpg': {
-      display: {
-        topLeftColor: 'yellow',
-        topRightColor: 'red',
-        bottomLeftColor: 'blue',
-        bottomRightColor: 'green',
-      },
-    },
-    'four-colors-rotate-90-cw.jpg': {
-      display: {
-        topLeftColor: 'blue',
-        topRightColor: 'yellow',
-        bottomLeftColor: 'green',
-        bottomRightColor: 'red',
-      },
-    },
-    'four-colors-rotate-180-cw.jpg': {
-      display: {
-        topLeftColor: 'green',
-        topRightColor: 'blue',
-        bottomLeftColor: 'red',
-        bottomRightColor: 'yellow',
-      },
-    },
-    'four-colors-rotate-270-cw.jpg': {
-      display: {
-        topLeftColor: 'red',
-        topRightColor: 'green',
-        bottomLeftColor: 'yellow',
-        bottomRightColor: 'blue',
-      },
-    },
-  },
-} as const);
-
-type ImageName = keyof typeof kImageInfo;
-export const kImageNames: readonly ImageName[] = keysOf(kImageInfo);
-
 /**
  * Starts playing a video and waits for it to be consumable.
  * Returns a promise which resolves after `callback` (which may be async) completes.
@@ -656,3 +616,124 @@ export async function captureCameraFrame(test: GPUTest): Promise<VideoFrame> {
 
   return frame;
 }
+
+export const kImageInfo = makeTable({
+  table: {
+    'four-colors.jpg': {
+      coded: {
+        topLeftColor: 'yellow',
+        topRightColor: 'red',
+        bottomLeftColor: 'blue',
+        bottomRightColor: 'green',
+      },
+      display: {
+        topLeftColor: 'yellow',
+        topRightColor: 'red',
+        bottomLeftColor: 'blue',
+        bottomRightColor: 'green',
+      },
+    },
+    'four-colors-rotate-90-cw.jpg': {
+      coded: {
+        topLeftColor: 'red',
+        topRightColor: 'green',
+        bottomLeftColor: 'yellow',
+        bottomRightColor: 'blue',
+      },
+      display: {
+        topLeftColor: 'yellow',
+        topRightColor: 'red',
+        bottomLeftColor: 'blue',
+        bottomRightColor: 'green',
+      },
+    },
+    'four-colors-rotate-180-cw.jpg': {
+      coded: {
+        topLeftColor: 'green',
+        topRightColor: 'blue',
+        bottomLeftColor: 'red',
+        bottomRightColor: 'yellow',
+      },
+      display: {
+        topLeftColor: 'yellow',
+        topRightColor: 'red',
+        bottomLeftColor: 'blue',
+        bottomRightColor: 'green',
+      },
+    },
+    'four-colors-rotate-270-cw.jpg': {
+      coded: {
+        topLeftColor: 'blue',
+        topRightColor: 'yellow',
+        bottomLeftColor: 'green',
+        bottomRightColor: 'red',
+      },
+      display: {
+        topLeftColor: 'yellow',
+        topRightColor: 'red',
+        bottomLeftColor: 'blue',
+        bottomRightColor: 'green',
+      },
+    },
+  },
+} as const);
+
+type ImageName = keyof typeof kImageInfo;
+export const kImageNames: readonly ImageName[] = keysOf(kImageInfo);
+
+type ObjectTypeFromFile = (typeof kObjectTypeFromFiles)[number];
+export const kObjectTypeFromFiles = ['imageBitmap', 'image', 'blob'] as const;
+
+/**
+ * Load image file(e.g. *.jpg) from ImageBitmap, blob or HTMLImageElement. And
+ * convert the result to valid source that GPUCopyExternalImageSource supported.
+ *
+ * @param imageName: Required image name
+ * @param objectTypeFromFile: The object to load image file, e.g. ImageBitmap, blob
+ *
+ */
+export async function GetSourceFromImageFile(
+  imageName: ImageName,
+  objectTypeFromFile: ObjectTypeFromFile
+): Promise<ImageBitmap | HTMLImageElement> {
+  const image = new Image();
+  const imageUrl = getResourcePath(imageName);
+  let imageBitmap: ImageBitmap;
+
+  if (objectTypeFromFile === 'blob') {
+    // Load image file through fetch.
+    const blob = await loadXHR(imageUrl);
+    imageBitmap = await createImageBitmap(blob, { imageOrientation: 'from-image' });
+    return imageBitmap;
+  } else {
+    // Load image file through HTMLImageElement.
+    image.src = imageUrl;
+    await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
+    if (objectTypeFromFile === 'image') {
+      return image;
+    }
+
+    imageBitmap = await createImageBitmap(image, { imageOrientation: 'from-image' });
+    return imageBitmap;
+  }
+}
+
+// Use fetch() to load image file as blob
+function loadXHR(url: string): Promise<Blob> {
+  return new Promise<Blob>((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url);
+    xhr.responseType = 'blob';
+    xhr.onerror = function () {
+      reject(new Error('Network error.'));
+    };
+    xhr.onload = function () {
+      if (xhr.status === 200) {
+        resolve(xhr.response);
+      } else {
+        reject(new Error('Loading error:' + xhr.statusText));
+      }
+    };
+    xhr.send();
+  });
+}

From 61a3b1ac41057b58edbe4a45f4b28a4c2ba7c30a Mon Sep 17 00:00:00 2001
From: shaoboyan091 <shaoboyan@microsoft.com>
Date: Mon, 6 Jan 2025 09:31:35 +0800
Subject: [PATCH 4/9] Update src/resources/README.md

Co-authored-by: Kai Ninomiya <kainino1@gmail.com>
---
 src/resources/README.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/resources/README.md b/src/resources/README.md
index 8b8f38ba2969..2bc89869a501 100644
--- a/src/resources/README.md
+++ b/src/resources/README.md
@@ -99,17 +99,17 @@ Use a image tool (e.g. "Paint" app on Windows) to create four-colors.jpg from fo
 
 // Generate jpg picture with 90 cw rotation metadata
 Use a image tool (e.g. "Paint" app on Windows) to create four-colors-hard-rotate-90-ccw.jpg and check with exiftool to ensure no orientation metadata been set.
-exiftool -Orientation#=6 four-colors.jpg -o .\four-colors-rotate-90-cw.jpg
-rm four-clors-hard-rotate-90-ccw.jpg
+exiftool -Orientation#=6 four-colors-hard-rotate-90-ccw.jpg -o four-colors-rotate-90-cw.jpg
+rm four-colors-hard-rotate-90-ccw.jpg
 
 // Generate jpg picture with 180 cw rotation metadata
 Use a image tool (e.g. "Paint" app on Windows) to create four-colors-hard-rotate-180-ccw.jpg and check with exiftool to ensure no orientation metadata been set.
-exiftool -Orientation#=3 four-colors.jpg -o .\four-colors-rotate-180-cw.jpg
-rm four-clors-hard-rotate-180-ccw.jpg
+exiftool -Orientation#=3 four-colors-hard-rotate-180-ccw.jpg -o four-colors-rotate-180-cw.jpg
+rm four-colors-hard-rotate-180-ccw.jpg
 
 // Generate jpg picture with 270 cw rotation metadata
 Use a image tool (e.g. "Paint" app on Windows) to create four-colors-hard-rotate-270-ccw.jpg and check with exiftool to ensure no orientation metadata been set.
-exiftool -Orientation#=8 four-colors.jpg -o .\four-colors-rotate-270-cw.jpg
+exiftool -Orientation#=8 four-colors-hard-rotate-270-ccw.jpg -o four-colors-rotate-270-cw.jpg
 rm four-colors-hard-rotate-270-ccw.jpg
 
 ```

From be7679a388b9f45cd868cb7c85a593c8602336f7 Mon Sep 17 00:00:00 2001
From: shaoboyan091 <shaoboyan@microsoft.com>
Date: Mon, 6 Jan 2025 09:33:16 +0800
Subject: [PATCH 5/9] Update src/webgpu/web_platform/util.ts

Co-authored-by: Kai Ninomiya <kainino1@gmail.com>
---
 src/webgpu/web_platform/util.ts | 69 +++++++--------------------------
 1 file changed, 13 insertions(+), 56 deletions(-)

diff --git a/src/webgpu/web_platform/util.ts b/src/webgpu/web_platform/util.ts
index 420f5357c126..ee4a7f1bbc19 100644
--- a/src/webgpu/web_platform/util.ts
+++ b/src/webgpu/web_platform/util.ts
@@ -617,64 +617,21 @@ export async function captureCameraFrame(test: GPUTest): Promise<VideoFrame> {
   return frame;
 }
 
+const kFourColorsInfo = {
+  display: {
+    topLeftColor: 'yellow',
+    topRightColor: 'red',
+    bottomLeftColor: 'blue',
+    bottomRightColor: 'green',
+  },
+} as const;
+
 export const kImageInfo = makeTable({
   table: {
-    'four-colors.jpg': {
-      coded: {
-        topLeftColor: 'yellow',
-        topRightColor: 'red',
-        bottomLeftColor: 'blue',
-        bottomRightColor: 'green',
-      },
-      display: {
-        topLeftColor: 'yellow',
-        topRightColor: 'red',
-        bottomLeftColor: 'blue',
-        bottomRightColor: 'green',
-      },
-    },
-    'four-colors-rotate-90-cw.jpg': {
-      coded: {
-        topLeftColor: 'red',
-        topRightColor: 'green',
-        bottomLeftColor: 'yellow',
-        bottomRightColor: 'blue',
-      },
-      display: {
-        topLeftColor: 'yellow',
-        topRightColor: 'red',
-        bottomLeftColor: 'blue',
-        bottomRightColor: 'green',
-      },
-    },
-    'four-colors-rotate-180-cw.jpg': {
-      coded: {
-        topLeftColor: 'green',
-        topRightColor: 'blue',
-        bottomLeftColor: 'red',
-        bottomRightColor: 'yellow',
-      },
-      display: {
-        topLeftColor: 'yellow',
-        topRightColor: 'red',
-        bottomLeftColor: 'blue',
-        bottomRightColor: 'green',
-      },
-    },
-    'four-colors-rotate-270-cw.jpg': {
-      coded: {
-        topLeftColor: 'blue',
-        topRightColor: 'yellow',
-        bottomLeftColor: 'green',
-        bottomRightColor: 'red',
-      },
-      display: {
-        topLeftColor: 'yellow',
-        topRightColor: 'red',
-        bottomLeftColor: 'blue',
-        bottomRightColor: 'green',
-      },
-    },
+    'four-colors.jpg': kFourColorsInfo,
+    'four-colors-rotate-90-cw.jpg': kFourColorsInfo,
+    'four-colors-rotate-180-cw.jpg': kFourColorsInfo,
+    'four-colors-rotate-270-cw.jpg': kFourColorsInfo,
   },
 } as const);
 

From 34d415037647a430a77890433735340d174ba67a Mon Sep 17 00:00:00 2001
From: shaoboyan091 <shaoboyan@microsoft.com>
Date: Mon, 6 Jan 2025 09:33:41 +0800
Subject: [PATCH 6/9] Update src/webgpu/web_platform/util.ts

Co-authored-by: Kai Ninomiya <kainino1@gmail.com>
---
 src/webgpu/web_platform/util.ts | 61 ++++++++++++---------------------
 1 file changed, 21 insertions(+), 40 deletions(-)

diff --git a/src/webgpu/web_platform/util.ts b/src/webgpu/web_platform/util.ts
index ee4a7f1bbc19..c4755dcf02a2 100644
--- a/src/webgpu/web_platform/util.ts
+++ b/src/webgpu/web_platform/util.ts
@@ -639,58 +639,39 @@ type ImageName = keyof typeof kImageInfo;
 export const kImageNames: readonly ImageName[] = keysOf(kImageInfo);
 
 type ObjectTypeFromFile = (typeof kObjectTypeFromFiles)[number];
-export const kObjectTypeFromFiles = ['imageBitmap', 'image', 'blob'] as const;
+export const kObjectTypeFromFiles = [
+  'ImageBitmap-from-Blob',
+  'ImageBitmap-from-Image',
+  'Image',
+] as const;
 
 /**
  * Load image file(e.g. *.jpg) from ImageBitmap, blob or HTMLImageElement. And
  * convert the result to valid source that GPUCopyExternalImageSource supported.
- *
- * @param imageName: Required image name
- * @param objectTypeFromFile: The object to load image file, e.g. ImageBitmap, blob
- *
  */
 export async function GetSourceFromImageFile(
   imageName: ImageName,
   objectTypeFromFile: ObjectTypeFromFile
 ): Promise<ImageBitmap | HTMLImageElement> {
-  const image = new Image();
   const imageUrl = getResourcePath(imageName);
-  let imageBitmap: ImageBitmap;
 
-  if (objectTypeFromFile === 'blob') {
-    // Load image file through fetch.
-    const blob = await loadXHR(imageUrl);
-    imageBitmap = await createImageBitmap(blob, { imageOrientation: 'from-image' });
-    return imageBitmap;
-  } else {
-    // Load image file through HTMLImageElement.
-    image.src = imageUrl;
-    await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
-    if (objectTypeFromFile === 'image') {
-      return image;
+  switch (objectTypeFromFile) {
+    case 'ImageBitmap-from-Blob': {
+      // Load image file through fetch.
+      const response = await fetch(imageUrl);
+      return createImageBitmap(await response.blob());
     }
+    case 'ImageBitmap-from-Image':
+    case 'Image': {
+      // Load image file through HTMLImageElement.
+      const image = new Image();
+      image.src = imageUrl;
+      if (objectTypeFromFile === 'Image') {
+        await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
+        return image;
+      }
 
-    imageBitmap = await createImageBitmap(image, { imageOrientation: 'from-image' });
-    return imageBitmap;
+      return createImageBitmap(image);
+    }
   }
 }
-
-// Use fetch() to load image file as blob
-function loadXHR(url: string): Promise<Blob> {
-  return new Promise<Blob>((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', url);
-    xhr.responseType = 'blob';
-    xhr.onerror = function () {
-      reject(new Error('Network error.'));
-    };
-    xhr.onload = function () {
-      if (xhr.status === 200) {
-        resolve(xhr.response);
-      } else {
-        reject(new Error('Loading error:' + xhr.statusText));
-      }
-    };
-    xhr.send();
-  });
-}

From 00a07f5885f5af815535f68b85d337ea5bc30afa Mon Sep 17 00:00:00 2001
From: shaoboyan <shaoboyan@microsoft.com>
Date: Mon, 6 Jan 2025 13:54:56 +0800
Subject: [PATCH 7/9] fix worker issue and createImageBitmap with 0 width image
 issue

---
 .../copyToTexture/image_file.spec.ts             |  2 +-
 src/webgpu/web_platform/util.ts                  | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
index 0bb922100777..8a8e83358252 100644
--- a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
@@ -46,7 +46,7 @@ g.test('from_orientation_metadata_file')
     const kColorFormat = 'rgba8unorm';
 
     // Load image file.
-    const source = await GetSourceFromImageFile(imageName, objectTypeFromFile);
+    const source = await GetSourceFromImageFile(t, imageName, objectTypeFromFile);
     const width = source.width;
     const height = source.height;
 
diff --git a/src/webgpu/web_platform/util.ts b/src/webgpu/web_platform/util.ts
index c4755dcf02a2..66a2163b7388 100644
--- a/src/webgpu/web_platform/util.ts
+++ b/src/webgpu/web_platform/util.ts
@@ -650,6 +650,7 @@ export const kObjectTypeFromFiles = [
  * convert the result to valid source that GPUCopyExternalImageSource supported.
  */
 export async function GetSourceFromImageFile(
+  test: GPUTest,
   imageName: ImageName,
   objectTypeFromFile: ObjectTypeFromFile
 ): Promise<ImageBitmap | HTMLImageElement> {
@@ -657,17 +658,30 @@ export async function GetSourceFromImageFile(
 
   switch (objectTypeFromFile) {
     case 'ImageBitmap-from-Blob': {
+      // MAINTENANCE_TODO: resource folder path when using service worker is not correct. Return
+      // the correct path to load resource in correct place.
+      // The wrong path: /out/webgpu/webworker/web_platform/copyToTexture/resources
+      if (globalThis.constructor.name === 'ServiceWorkerGlobalScope') {
+        test.skip('Try to load image resource from serivce worker but the path is not correct.');
+      }
       // Load image file through fetch.
       const response = await fetch(imageUrl);
       return createImageBitmap(await response.blob());
     }
     case 'ImageBitmap-from-Image':
     case 'Image': {
+      // Skip test if HTMLImageElement is not available, e.g. in worker.
+      if (typeof HTMLImageElement === 'undefined') {
+        test.skip(
+          'Try to use HTMLImage do image file decoding but HTMLImageElement not available.'
+        );
+      }
+
       // Load image file through HTMLImageElement.
       const image = new Image();
       image.src = imageUrl;
+      await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
       if (objectTypeFromFile === 'Image') {
-        await raceWithRejectOnTimeout(image.decode(), 5000, 'decode image timeout');
         return image;
       }
 

From d3169aea3db459a18310451460f90c57531addb9 Mon Sep 17 00:00:00 2001
From: shaoboyan091 <shaoboyan@microsoft.com>
Date: Mon, 6 Jan 2025 14:27:18 +0800
Subject: [PATCH 8/9] Update
 src/webgpu/web_platform/copyToTexture/image_file.spec.ts

Co-authored-by: Kai Ninomiya <kainino1@gmail.com>
---
 src/webgpu/web_platform/copyToTexture/image_file.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
index 8a8e83358252..fc5e3eda0f51 100644
--- a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
@@ -20,7 +20,7 @@ g.test('from_orientation_metadata_file')
     `
     Test HTMLImageElements with rotation metadata can be copied to WebGPU texture correctly.
 
-    It creates Images with images under Resource folder.
+    It creates an ImageBitmap or HTMLImageElement using images in the 'resources' folder.
 
     Then call copyExternalImageToTexture() to do a full copy to the 0 mipLevel
     of dst texture, and read one pixel out to compare with the manually documented expected color.

From 4bddbb250937fcf539712c10ecb91fc02c5fde44 Mon Sep 17 00:00:00 2001
From: Kai Ninomiya <kainino1@gmail.com>
Date: Mon, 6 Jan 2025 17:54:36 -0800
Subject: [PATCH 9/9] Apply suggestions from code review

---
 src/webgpu/web_platform/copyToTexture/image_file.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
index fc5e3eda0f51..aa9a16e16dce 100644
--- a/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
+++ b/src/webgpu/web_platform/copyToTexture/image_file.spec.ts
@@ -33,6 +33,7 @@ g.test('from_orientation_metadata_file')
     - Valid 'flipY' config in 'GPUCopyExternalImageSourceInfo' (named 'srcDoFlipYDuringCopy' in cases)
     - TODO: partial copy tests should be added
     - TODO: all valid dstColorFormat tests should be added.
+    - TODO(#4108): Make this work in service workers (see GetSourceFromImageFile)
   `
   )
   .params(u =>