105 lines
3.4 KiB
HTML
105 lines
3.4 KiB
HTML
<!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>
|