Load data URI images in an async way according to spec (take 3)

chrome/test/data/extensions/api_test/automation/tests/tabs/image_data.js

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 var allTests = [
   function testGetImageData() {
     var image = rootNode.find({ role: RoleType.image });
     image.addEventListener(EventType.imageFrameUpdated, function() {
       assertEq(image.imageDataUrl.substr(0, 22), 'data:image/png;base64,');
       var imgElement = document.createElement('img');
       imgElement.src = image.imageDataUrl;
       var canvas = document.createElement('canvas');
       canvas.setAttribute('width', 2);
       canvas.setAttribute('height', 3);
       var context = canvas.getContext('2d');
-      context.drawImage(imgElement, 0, 0);
-      var imageData = context.getImageData(0, 0, 2, 3);
-      // Check image data in RGBA format.
-      // Top row: red
-      assertEq(imageData.data[0], 0xFF);
-      assertEq(imageData.data[1], 0x00);
-      assertEq(imageData.data[2], 0x00);
-      assertEq(imageData.data[3], 0xFF);
-      assertEq(imageData.data[4], 0xFF);
-      assertEq(imageData.data[5], 0x00);
-      assertEq(imageData.data[6], 0x00);
-      assertEq(imageData.data[7], 0xFF);
-      // Middle row: green
-      assertEq(imageData.data[8], 0x00);
-      assertEq(imageData.data[9], 0xFF);
-      assertEq(imageData.data[10], 0x00);
-      assertEq(imageData.data[11], 0xFF);
-      assertEq(imageData.data[12], 0x00);
-      assertEq(imageData.data[13], 0xFF);
-      assertEq(imageData.data[14], 0x00);
-      assertEq(imageData.data[15], 0xFF);
-      // Last row: blue
-      assertEq(imageData.data[16], 0x00);
-      assertEq(imageData.data[17], 0x00);
-      assertEq(imageData.data[18], 0xFF);
-      assertEq(imageData.data[19], 0xFF);
-      assertEq(imageData.data[20], 0x00);
-      assertEq(imageData.data[21], 0x00);
-      assertEq(imageData.data[22], 0xFF);
-      assertEq(imageData.data[23], 0xFF);
-      chrome.test.succeed();
+      imgElement.onload = function() {
+        context.drawImage(imgElement, 0, 0);
+        var imageData = context.getImageData(0, 0, 2, 3);
+        // Check image data in RGBA format.
+        // Top row: red
+        assertEq(imageData.data[0], 0xFF);
+        assertEq(imageData.data[1], 0x00);
+        assertEq(imageData.data[2], 0x00);
+        assertEq(imageData.data[3], 0xFF);
+        assertEq(imageData.data[4], 0xFF);
+        assertEq(imageData.data[5], 0x00);
+        assertEq(imageData.data[6], 0x00);
+        assertEq(imageData.data[7], 0xFF);
+        // Middle row: green
+        assertEq(imageData.data[8], 0x00);
+        assertEq(imageData.data[9], 0xFF);
+        assertEq(imageData.data[10], 0x00);
+        assertEq(imageData.data[11], 0xFF);
+        assertEq(imageData.data[12], 0x00);
+        assertEq(imageData.data[13], 0xFF);
+        assertEq(imageData.data[14], 0x00);
+        assertEq(imageData.data[15], 0xFF);
+        // Last row: blue
+        assertEq(imageData.data[16], 0x00);
+        assertEq(imageData.data[17], 0x00);
+        assertEq(imageData.data[18], 0xFF);
+        assertEq(imageData.data[19], 0xFF);
+        assertEq(imageData.data[20], 0x00);
+        assertEq(imageData.data[21], 0x00);
+        assertEq(imageData.data[22], 0xFF);
+        assertEq(imageData.data[23], 0xFF);
+        chrome.test.succeed();
+      };
     }, true);
     image.getImageData(0, 0);
   }
 ];
 
 setUpAndRunTests(allTests, 'image_data.html');