third_party/WebKit/LayoutTests/svg/canvas/canvas-pattern-svg.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3  <head>
   4   <title>Test for WK113420: SVG-based patterns should be drawn correctly</title>
   5   <style> canvas { border:solid #000 } </style>
   6   <script>
   7    if (window.testRunner) {
   8      testRunner.dumpAsTextWithPixelResults();
   9      testRunner.waitUntilDone();
  10    }
  11    window.onload = function(){
  12     var i = new Image();
  13     i.src = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='10' cy='10' r='10' fill='green' /></svg>";
  14     i.onload = function() {
  15       var ctx = document.getElementsByTagName('canvas')[0].getContext('2d');
  16
  17       var pattern = ctx.createPattern(i, "repeat");
  18       ctx.fillStyle = pattern;
  19       ctx.translate(10, 10);
  20       ctx.strokeRect(0, 0, 150, 150);
  21       ctx.fillRect(0, 0, 150, 150);
  22
  23       var patternX = ctx.createPattern(i, "repeat-x");
  24       ctx.fillStyle = patternX;
  25       ctx.translate(0, 160);
  26       ctx.strokeRect(0, 0, 150, 150);
  27       ctx.fillRect(0, 0, 150, 150);
  28
  29       var patternN = ctx.createPattern(i, "no-repeat");
  30       ctx.fillStyle = patternN;
  31       ctx.translate(160, 0);
  32       ctx.strokeRect(0, 0, 150, 150);
  33       ctx.fillRect(0, 0, 150, 150);
  34
  35       var patternY = ctx.createPattern(i, "repeat-y");
  36       ctx.fillStyle = patternY;
  37       ctx.translate(0, -160);
  38       ctx.strokeRect(0, 0, 150, 150);
  39       ctx.fillRect(0, 0, 150, 150);
  40
  41       if (window.testRunner)
  42           testRunner.notifyDone();
  43     }
  44    }
  45   </script>
  46  </head>
  47  <body>
  48   <p>There should be one big square below containing four squares. Top left square should be filled with 3 rows of 3 circles. Top right square should have one column of 3 circles. The bottom left square should have one row with three circles. The bottom right square should have one circle in the top-left corner.</p>
  49   <p><canvas height="330" width="330"></canvas></p>
  50  </body>
  51 </html>