third_party/WebKit/LayoutTests/fast/canvas/canvas-pattern-modify.js

   1 // Based on http://philip.html5.org/tests/canvas/suite/tests/2d.pattern.modify.canvas1.html
   2
   3 description("This test checks if pattern changes after the source canvas is modified. See https://bugs.webkit.org/show_bug.cgi?id=20578 .");
   4
   5 function dataToArray(data) {
   6     var result = new Array(data.length)
   7     for (var i = 0; i < data.length; i++)
   8         result[i] = data[i];
   9     return result;
  10 }
  11
  12 function getPixel(ctx, x, y) {
  13     var data = ctx.getImageData(x,y,1,1);
  14     if (!data) // getImageData failed, which should never happen
  15         return [-1,-1,-1,-1];
  16     return dataToArray(data.data);
  17 }
  18
  19 function pixelShouldBe(ctx, x, y, colour) {
  20     shouldBe("getPixel(ctx, " + [x, y] +")", "["+colour+"]");
  21 }
  22
  23 function createCanvasImage(width, height, colour) {
  24     var c = document.createElement("canvas");
  25     c.width = width;
  26     c.height = height;
  27     var context = c.getContext("2d");
  28     context.fillStyle = colour;
  29     context.fillRect(0,0,width,height);
  30     return c;
  31 }
  32
  33 var canvas = createCanvasImage(100, 50, '#fff');
  34 var ctx = canvas.getContext('2d');
  35
  36 var patternCanvas = createCanvasImage(100, 50, '#0f0');
  37 var pattern = ctx.createPattern(patternCanvas, 'no-repeat');
  38
  39 // Modify the original canvas after we create a pattern.
  40 var patternCtx = patternCanvas.getContext('2d');
  41 patternCtx.fillStyle = '#f00';
  42 patternCtx.fillRect(0, 0, 100, 50);
  43
  44 ctx.fillStyle = pattern;
  45 ctx.fillRect(0, 0, 100, 50);
  46
  47 pixelShouldBe(ctx, 1, 1, [0, 255, 0, 255]);
  48 pixelShouldBe(ctx, 98, 1, [0, 255, 0, 255]);
  49 pixelShouldBe(ctx, 1, 48, [0, 255, 0, 255]);
  50 pixelShouldBe(ctx, 98, 48, [0, 255, 0, 255]);