<!DOCTYPE html>
<html lang="en">
 <head>
  <title>createPattern repeat test</title>
  <style> canvas { border:solid #000 } </style>
  <script>
   if (window.testRunner) {
     testRunner.dumpAsText(true);
     testRunner.waitUntilDone();
   }
   window.onload = function(){
    var i = new Image();
    i.src = "resources/apple.gif";
    i.onload = function() {
        var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
        var p;
    
    	//ctx.strokeWidth(1.0);
    	p = ctx.createPattern(i, "repeat");
    	ctx.fillStyle = p;
    	ctx.translate(10, 10);
    	ctx.strokeRect(0, 0, 150, 150);
    	ctx.fillRect(0, 0, 150, 150);
    
    	px = ctx.createPattern(i, "repeat-x");
    	ctx.fillStyle = px;
    	ctx.translate(0, 160);
    	ctx.strokeRect(0, 0, 150, 150);
    	ctx.fillRect(0, 0, 150, 150);
    
    	pn = ctx.createPattern(i, "no-repeat");
    	ctx.fillStyle = pn;
    	ctx.translate(160, 0);
    	ctx.strokeRect(0, 0, 150, 150);
    	ctx.fillRect(0, 0, 150, 150);
    
    	py = ctx.createPattern(i, "repeat-y");
    	ctx.fillStyle = py;
    	ctx.translate(0, -160);
    	ctx.strokeRect(0, 0, 150, 150);
    	ctx.fillRect(0, 0, 150, 150);
    	
    	if (window.testRunner)
    	    testRunner.notifyDone();
   		}
   }
  </script>
 </head>
 <body>
  <p>There should be one big square below containing four squares. Top left square should be filled with 3 rows of 2 and bit Apple images. Top right square should be 2 and a bit rows with one Apple image column along the left edge of the square. Bottom left square should be one row with three Apple images along the top of the square. Bottom right square should be one Apple image in top left corner.</p>
  <p><canvas height="330" width="330"></canvas></p>
 </body>
</html>