| <!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> |
