Canvas: Blank data uri for image in browser_test

[Solomon Kinard]

Hi,

Why does canvas appear blank in a browser test? The bytes are non-zero, but pasting it into a browser yields a blank image. getBase64Image() in devtools outside of a test works fine.

Example in Gerrit that yields a blank image (crrev.com/c/3648386)

$ browser_tests FaviconApiTest.Extension

Inline example that yields a blank image:

// Directly load favicon from source.
async function whyIsTheCanvasBlank() {
  const port = (await chrome.test.getConfig()).testServer.port;
  const url =
      `http://www.example.com:${port}/extensions/favicon/favicon.ico`;
  const image = new Image();
  image.src = url;
  image.onload = function() {
    const dataUri = getBase64Image(image);
    console.log(dataUri);
  }
}

// Always a blank image, but why?
function getBase64Image(img) {
  var canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return canvas.toDataURL();
}

I've worked around this in crrev.com/c/3648136, but it's unclear why canvas isn't working as expected in a test.

[Ken Russell]

My best guess is that browser_tests is running with the browser's graphics stack stubbed out. Not sure though, and not sure what command line arguments browser_tests might take to affect this behavior. Most of our team's tests are run either in content_shell on top of SwiftShader, or in the full Chromium browser on physical machines with GPUs, to test the code paths that are shipped.

Hopefully the canvas team will have more insight tomorrow.

-Ken