<!DOCTYPE html>
<html>
<head>
<style>
    canvas {
        image-rendering: pixelated;
    }
</style>
<script>
function runTest() {
  var context = document.getElementsByTagName('canvas')[0].getContext('2d');
  var forceLayout = document.body.offsetWidth;

  var domImage = document.getElementsByTagName('img')[0];
  context.drawImage(domImage, 10, 10, 80, 80);

  var newImage = new Image();
  newImage.src = domImage.src;
  context.fillStyle = context.createPattern(newImage, 'repeat');
  context.fillRect(10, 10, 180, 80);

  domImage.parentNode.removeChild(domImage);
}
</script>
</head>
<body onload='runTest()'>
Test for crbug.com/227481: This test passes if there is a green rectangle with a two blue circles.<br/>
<canvas width="200px" height="100px"></canvas>
<img style="width: 30px;" src="data:image/svg+xml,
    <svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'>
        <rect width='100' height='100' fill='green'/>
        <rect x='15' y='15' width='30' height='30' fill='blue'/>
    </svg>" >
</body>
</html>
