<!DOCTYPE html>
<html>
<head>
    <style>
        .small-box {
            width: 100px;
            height: 100px;
        }
        .large-box {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <img class="small-box non-intrinsic">
    <img class="large-box non-intrinsic">
    <canvas class="small-box non-intrinsic"></canvas>
    <br>
    <img class="small-box intrinsic">
    <img class="large-box intrinsic">
    <canvas class="small-box intrinsic"></canvas>
    <script>
        window.Test = {
            _imageData: [
                {
                    url: "data:image/svg+xml;utf8, \
                        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'> \
                            <rect width='100%' height='100%' fill='green'/> \
                        </svg>",
                    selector: "non-intrinsic",
                    image: null
                },
                {
                    url: "data:image/svg+xml;utf8, \
                        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' width='100' height='100'> \
                        <rect width='100%' height='100%' fill='green'/> \
                        </svg>",
                    selector: "intrinsic",
                    image: null
                }
            ],
          
            _loadImage: function(imageDatum) {
                var image = new Image();
            
                image.onload = function() {
                    imageDatum.image = image;
                };
                image.src = imageDatum.url;
                
                var elements = document.querySelectorAll("img." + imageDatum.selector);
                for (var i = 0; i <	elements.length; i++)
                    elements[i].src = imageDatum.url;
            },
            
            _loadImages: function() {
                var self = this;                
                this._imageData.forEach(function(imageDatum) {
                    self._loadImage(imageDatum);
                });
            },

            _darwImage: function(imageDatum) {
                var canvas = document.querySelector("canvas." + imageDatum.selector);
                var ctx = canvas.getContext("2d");
                ctx.drawImage(imageDatum.image, 0, 0, canvas.width, canvas.height);
            },

            _areImagesLoaded : function() {
                var loaded = true;
                this._imageData.forEach(function(imageDatum) {
                    loaded &= imageDatum.image != null;
                });
                console.log(loaded);
                return loaded;
            },
        
            _darwImages: function() {
                if (!this._areImagesLoaded())
                    return;

                var self = this;
                this._imageData.forEach(function(imageDatum) {
                    self._darwImage(imageDatum);
                });
                
                clearInterval(this._intervalId);
                
                if (window.testRunner)
                  testRunner.notifyDone();
            },
        
            run: function() {
                if (window.testRunner)
                    testRunner.waitUntilDone();
                this._loadImages();
                this._intervalId = setInterval(this._darwImages.bind(this), 10);
            }
        };
        window.Test.run();
    </script>
</body>
</html>