Carry changes back from a copy of the test in WPT

There is also a test named canvas-createImageBitmap-e_srgb.html in
wpt/html/canvas/element/manual/wide-gamut-canvas. This CL carries back
three recent changes I made to that copy of the test.

1. commit 407ec471:
Run sRGB Blob tests with multiple image formats

2. commit a2c09a7b:
Add AVIF to canvas-createImageBitmap-e_srgb.html

The AVIF test images pattern-srgb.avif and pattern-srgb-transparent.avif
were generated from pattern-srgb.png and pattern-srgb-transparent.png
using the 'avifenc' program in libavif v0.8.0 with the following command
lines:

avifenc --speed 0 --yuv 420 --cicp 1/13/1 --range full \
    pattern-srgb.png pattern-srgb.avif
avifenc --speed 0 --yuv 420 --cicp 1/13/1 --range full \
    pattern-srgb-transparent.png pattern-srgb-transparent.avif

3. commit 6c2ddda1:
Generate one promise_test() for each image format

third_party/blink/tools/run_web_tests.py -t Default \
fast/canvas/color-space/canvas-createImageBitmap-e_srgb.html

Test: 
Change-Id: Ic887a9a77170c6ba18db7022180193c205954ed0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2360117Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Wan-Teh Chang <wtc@google.com>
Cr-Commit-Position: refs/heads/master@{#799940}

third_party/blink/web_tests/fast/canvas/color-space/canvas-createImageBitmap-e_srgb.html

@@ -291,32 +291,34 @@ function initializeTestCanvasTransparent(canvasColorSpace, canvasPixelFormat)
 ////////////////////////////////////////////////////////////////////////////////
 
 // HTMLImageElement - Opaque sRGB
-// File formats: Bitmap, GIF, ICO, JPEG, PNG, WEBP
-promise_test(function() {
-    return Promise.all(['bmp', 'gif', 'ico', 'jpg', 'png', 'webp'].map(
-        ext => new Promise((resolve,reject) => {
+// File formats: AVIF, Bitmap, GIF, ICO, JPEG, PNG, WEBP
+['avif', 'bmp', 'gif', 'ico', 'jpg', 'png', 'webp'].forEach(ext => {
+    promise_test(function() {
+        return new Promise((resolve,reject) => {
             var image = new Image();
             image.onload = function() {
                 resolve(image);
             }
             image.src = 'resources/pattern-srgb.' + ext;
-        }).then(testImageBitmapOpaque)));
-}, 'createImageBitmap in e-sRGB from an opaque sRGB HTMLImageElement (BMP, \
-GIF, ICO, JPG, PNG, WEBP) with resize.');
+        }).then(testImageBitmapOpaque);
+    }, 'createImageBitmap in e-sRGB from an opaque sRGB HTMLImageElement (' + ext +
+        ') with resize.');
+});
 
 // HTMLImageElement - Transparent sRGB
-// File formats: Bitmap, GIF, ICO, PNG, WEBP
-promise_test(function() {
-    return Promise.all(['bmp', 'ico', 'png', 'webp'].map(
-        ext => new Promise((resolve,reject) => {
+// File formats: AVIF, Bitmap, ICO, PNG, WEBP
+['avif', 'bmp', 'ico', 'png', 'webp'].forEach(ext => {
+    promise_test(function() {
+        return new Promise((resolve,reject) => {
             var image = new Image();
             image.onload = function() {
                 resolve(image);
             }
             image.src = 'resources/pattern-srgb-transparent.' + ext;
-        }).then(testImageBitmapFromTransparentImage)));
-}, 'createImageBitmap in e-sRGB from a transparent sRGB HTMLImageElement \
-(BMP, ICO, PNG, WEBP) with resize.');
+        }).then(testImageBitmapFromTransparentImage);
+    }, 'createImageBitmap in e-sRGB from a transparent sRGB HTMLImageElement (' + ext +
+        ') with resize.');
+});
 
 ////////////////////////////////////////////////////////////////////////////////
 
@@ -400,30 +402,36 @@ promise_test(function() {
 //////////////////////////////////////////////////////////////////////////////
 
 // Blob from file - Opaque sRGB
-promise_test(function() {
-    return new Promise((resolve, reject) => {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", 'resources/pattern-srgb.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    }).then(testImageBitmapOpaque);
-}, 'createImageBitmap in e-sRGB from an opaque sRGB Blob with resize.');
+// File formats: AVIF, Bitmap, GIF, ICO, JPEG, PNG, WEBP
+['avif', 'bmp', 'gif', 'ico', 'jpg', 'png', 'webp'].forEach(ext => {
+    promise_test(function() {
+        return new Promise((resolve, reject) => {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", 'resources/pattern-srgb.' + ext);
+            xhr.responseType = 'blob';
+            xhr.send();
+            xhr.onload = function() {
+                resolve(xhr.response);
+            };
+        }).then(testImageBitmapOpaque);
+    }, 'createImageBitmap in e-sRGB from an opaque sRGB Blob (' + ext + ') with resize.');
+});
 
 // Blob form file - Transparent sRGB
-promise_test(function() {
-    return new Promise((resolve, reject) => {
-        var xhr = new XMLHttpRequest();
-        xhr.open("GET", 'resources/pattern-srgb-transparent.png');
-        xhr.responseType = 'blob';
-        xhr.send();
-        xhr.onload = function() {
-            resolve(xhr.response);
-        };
-    }).then(testImageBitmapFromTransparentImage);
-}, 'createImageBitmap in e-sRGB from a transparent sRGB Blob with resize.');
+// File formats: AVIF, Bitmap, ICO, PNG, WEBP
+['avif', 'bmp', 'ico', 'png', 'webp'].forEach(ext => {
+    promise_test(function() {
+        return new Promise((resolve, reject) => {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", 'resources/pattern-srgb-transparent.' + ext);
+            xhr.responseType = 'blob';
+            xhr.send();
+            xhr.onload = function() {
+                resolve(xhr.response);
+            };
+        }).then(testImageBitmapFromTransparentImage);
+    }, 'createImageBitmap in e-sRGB from a transparent sRGB Blob (' + ext + ') with resize.');
+});
 
 // Color managed blob from canvas
 function testCreateImageBitmapFromColorManagedBlob(colorSpace, pixelFormat,