46 lines
1.2 KiB
HTML
46 lines
1.2 KiB
HTML
<!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>
|