<!DOCTYPE html>
<html>
<style>
canvas, svg {
image-rendering: pixelated;
}
</style>
<body>
<canvas id="canvas"></canvas>
<script>
if (window.testRunner)
testRunner.waitUntilDone();
var canvas = document.getElementById("canvas");
canvas.width = 150;
canvas.height = 150;
var context = canvas.getContext("2d");
context.strokeStyle = "green";
context.lineWidth = 50;
context.strokeRect(0,0,150,150);
var svgImage = new Image();
svgImage.onload = function() {
context.globalAlpha = 0.2;
context.drawImage(svgImage, 25, 25);
testRunner.notifyDone();
};
svgImage.src = "data:image/svg+xml, \
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> \
<rect width='100%' height='100%' style='fill:none;stroke:green;stroke-width:50%;'/> \
<rect x='25%' y='25%' width='50%' height='50%' fill='green' fill-opacity='0.2'/> \
</svg>";
</script>
</body>
</html>
