<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
</head>
<body>
  <img id="container" src="">
  <script>
    if (window.testRunner)
      testRunner.waitUntilDone();

    var canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 200;
    var context = canvas.getContext('2d');
    
    context.fillStyle = "red";
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    var image = new Image();
    image.src = "resources/image-with-nested-data-uri-images.svg";

    // We need to wait till the image is loaded.
    image.onload = function() {
      // But we need to wait a little more till its sub-resources are loaded
      setTimeout(function () {
        context.drawImage(image, 0, 0, canvas.width, canvas.height);
        var img = document.getElementById("container");
        img.src = canvas.toDataURL();
        var forceLayout = document.body.offsetWidth;
        // Then we need to wait a litlle more till the page layout is complete
        setTimeout(function () {
          testRunner.notifyDone();
        }, 200);
      }, 200);
    }    
  </script>
</body>
</html>