third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-pattern-set-transform.js

   1 description("Test for supporting setTransform on canvas patterns");
   2
   3 function pixelValueAt(context, x, y) {
   4     var imageData = context.getImageData(x, y, 1, 1);
   5     return imageData.data;
   6 }
   7
   8 function pixelToString(p) {
   9     return "[" + p[0] + ", " + p[1] + ", " + p[2] + ", " + p[3] + "]"
  10 }
  11
  12 function pixelShouldBe(context, x, y, expectedPixelString) {
  13     var pixel = pixelValueAt(context, x, y);
  14     var expectedPixel = eval(expectedPixelString);
  15
  16     var pixelString = "pixel " + x + ", " + y;
  17     if (areArraysEqual(pixel, expectedPixel)) {
  18         testPassed(pixelString + " is " + pixelToString(pixel));
  19     } else {
  20         testFailed(pixelString + " should be " + pixelToString(expectedPixel) + " was " + pixelToString(pixel));
  21     }
  22 }
  23
  24 function fillWithColor(context, canvas, color1, color2) {
  25     context.save();
  26     context.fillStyle = color1;
  27     context.fillRect(0, 0, canvas.width / 2, canvas.height);
  28     context.fillStyle = color2;
  29     context.fillRect(canvas.width / 2, 0, canvas.width / 2, canvas.height);
  30     context.restore();
  31 }
  32
  33 var canvas = document.createElement("canvas");
  34 canvas.height = 100;
  35 canvas.width = 100;
  36 canvas.style.height = "100";
  37 canvas.style.width = "100";
  38
  39 document.body.appendChild(canvas);
  40
  41 var patternImage = document.createElement("canvas");
  42 patternImage.height = 10;
  43 patternImage.width = 20;
  44 var patternImageCtx = patternImage.getContext('2d');
  45 fillWithColor(patternImageCtx, patternImage, "red", "green");
  46 var greenPixel = pixelValueAt(patternImageCtx, 10, 0);
  47
  48
  49 var ctx = canvas.getContext('2d');
  50 var pattern = ctx.createPattern(patternImage, "repeat-x");
  51 var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  52 var matrix = svgElement.createSVGMatrix();
  53 matrix = matrix.translate(10, 0);
  54 pattern.setTransform(matrix);
  55
  56 fillWithColor(ctx, canvas, "blue", "blue");
  57
  58 ctx.fillStyle = pattern;
  59 ctx.translate(20, 20);
  60 ctx.fillRect(0, 0, 10, 10);
  61 pixelShouldBe(ctx, 20, 20, "greenPixel");