Fix promises in tranferFromImageBitmap-ToBlob-offscreen.html

The test previously used promises incorrectly:
testTransferFromImageBitmapToBlobOffscreen did not return the promise
produced by convertToBlob up to promise_test, which caused the assertion
(inside testCanvas) to flakiy escape promise_test. In addition, the test
did not wait for pngImage to load before drawing it to canvas.

This change also fixes the name of the test to be more accurate
(transferToBlob -> convertToBlob).

Author: Hexcles

imagebitmap-renderingcontext/tranferFromImageBitmap-ToBlob-offscreen.html

@@ -15,21 +15,29 @@
 }
 
 promise_test(function() {
-    function testTransferFromImageBitmapToBlobOffscreen(greenImage) {
+    function transferFromImageBitmapToBlobOffscreen(greenImage) {
         var bitmapCanvas = new OffscreenCanvas(width,height);
         var bitmapCtx = bitmapCanvas.getContext('bitmaprenderer');
         bitmapCtx.transferFromImageBitmap(greenImage);
 
+        return bitmapCanvas.convertToBlob();
+    }
+
+    function drawBlobToCanvas(blob) {
         // Make sure the bitmap renderer canvas is filled correctly.
         var pngImage = new Image();
-        bitmapCanvas.convertToBlob().then(function(blob){
-          pngImage.src = URL.createObjectURL(blob);
-          var myCanvasToTest = document.createElement('canvas');
-          myCanvasToTest.width = width;
-          myCanvasToTest.height = height;
-          var myCtxToTest = myCanvasToTest.getContext('2d');
-          myCtxToTest.drawImage(pngImage, 0, 0);
-          testCanvas(myCtxToTest, 0, 255, 0, 255);
+        var myCanvasToTest = document.createElement('canvas');
+        myCanvasToTest.width = width;
+        myCanvasToTest.height = height;
+
+        // Wait for the blob img to load.
+        return new Promise(function(resolve) {
+            pngImage.src = URL.createObjectURL(blob);
+            pngImage.onload = function() {
+                var myCtxToTest = myCanvasToTest.getContext('2d');
+                myCtxToTest.drawImage(pngImage, 0, 0);
+                resolve(myCtxToTest);
+            };
         });
     }
 
@@ -40,11 +48,13 @@
     greenCtx.fillStyle = '#0f0';
     greenCtx.fillRect(0, 0, width, height);
 
-    return Promise.all([
-        createImageBitmap(greenCanvas),
-    ]).then(([greenImage]) => {
-        testTransferFromImageBitmapToBlobOffscreen(greenImage);
-    });
-},'Test that transferToBlob works and produce the expected image');
+    return createImageBitmap(greenCanvas).then(
+        greenImage => transferFromImageBitmapToBlobOffscreen(greenImage)
+    ).then(
+        blob => drawBlobToCanvas(blob)
+    ).then(
+        ctx => testCanvas(ctx, 0, 255, 0, 255)
+    );
+},'Test that convertToBlob works and produce the expected image');
 
 </script>