third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-createPattern-fillRect-shadow.js

   1 description("Ensure correct behavior of canvas with createPattern + fillRect with shadow.");
   2
   3 function print(message, color)
   4 {
   5     var paragraph = document.createElement("div");
   6     paragraph.appendChild(document.createTextNode(message));
   7     paragraph.style.fontFamily = "monospace";
   8     if (color)
   9         paragraph.style.color = color;
  10     document.getElementById("console").appendChild(paragraph);
  11 }
  12
  13 function shouldBeAround(a, b)
  14  {
  15      var evalA;
  16      try {
  17          evalA = eval(a);
  18      } catch(e) {
  19          evalA = e;
  20      }
  21
  22      if (Math.abs(evalA - b) < 10)
  23          print("PASS " + a + " is around " + b , "green")
  24      else
  25          print("FAIL " + a + " is not around " + b + " (actual: " + evalA + ")", "red");
  26  }
  27
  28 // Create auxiliary canvas to draw to and create an image from.
  29 // This is done instead of simply loading an image from the file system
  30 // because that would throw a SECURITY_ERR DOM Exception.
  31 var aCanvas = document.createElement('canvas');
  32 aCanvas.setAttribute('width', '200');
  33 aCanvas.setAttribute('height', '200');
  34 var aCtx = aCanvas.getContext('2d');
  35
  36 // Draw a circle on the same canvas.
  37 aCtx.beginPath();
  38 aCtx.fillStyle = 'blue';
  39 aCtx.arc(100, 100, 100, 0, Math.PI*2, false);
  40 aCtx.fill();
  41
  42 // Create the image object to be drawn on the master canvas.
  43 var img = new Image();
  44 img.onload = drawImageToCanvasAndCheckPixels;
  45 img.src = aCanvas.toDataURL(); // set a data URI of the base64 enconded image as the source
  46
  47 // Create master canvas.
  48 var canvas = document.createElement('canvas');
  49 document.body.appendChild(canvas);
  50 canvas.setAttribute('width', '700');
  51 canvas.setAttribute('height', '1100');
  52 var ctx = canvas.getContext('2d');
  53
  54 function drawImageToCanvasAndCheckPixels() {
  55     ctx.shadowOffsetX = 250;
  56     ctx.fillStyle = ctx.createPattern(img, 'repeat');
  57
  58     ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  59     ctx.fillRect(50, 50, 200, 200);
  60
  61     ctx.shadowColor = 'rgba(255, 0, 0, 0.2)';
  62     ctx.fillRect(50, 300, 200, 200);
  63
  64     ctx.shadowBlur = 10;
  65     ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  66     ctx.fillRect(50, 550, 200, 200);
  67
  68     ctx.shadowColor = 'rgba(255, 0, 0, 0.2)';
  69     ctx.fillRect(50, 800, 200, 200);
  70
  71     checkPixels();
  72 }
  73
  74 function checkPixels() {
  75     var imageData, data;
  76
  77     // Verify solid shadow.
  78     imageData = ctx.getImageData(300, 50, 1, 1);
  79     d = imageData.data;
  80     shouldBe('d[0]', '255');
  81     shouldBe('d[1]', '0');
  82     shouldBe('d[2]', '0');
  83     shouldBe('d[3]', '255');
  84
  85     imageData = ctx.getImageData(300, 249, 1, 1);
  86     d = imageData.data;
  87     shouldBe('d[0]', '255');
  88     shouldBe('d[1]', '0');
  89     shouldBe('d[2]', '0');
  90     shouldBe('d[3]', '255');
  91
  92     imageData = ctx.getImageData(490, 240, 1, 1);
  93     d = imageData.data;
  94     shouldBe('d[0]', '255');
  95     shouldBe('d[1]', '0');
  96     shouldBe('d[2]', '0');
  97     shouldBe('d[3]', '255');
  98
  99     // Verify solid alpha shadow.
 100     imageData = ctx.getImageData(310, 350, 1, 1);
 101     d = imageData.data;
 102     shouldBe('d[0]', '255');
 103     shouldBe('d[1]', '0');
 104     shouldBe('d[2]', '0');
 105     shouldBeAround('d[3]', '51');
 106
 107     imageData = ctx.getImageData(490, 490, 1, 1);
 108     d = imageData.data;
 109     shouldBe('d[0]', '255');
 110     shouldBe('d[1]', '0');
 111     shouldBe('d[2]', '0');
 112     shouldBeAround('d[3]', '51');
 113
 114     imageData = ctx.getImageData(300, 499, 1, 1);
 115     d = imageData.data;
 116     shouldBe('d[0]', '255');
 117     shouldBe('d[1]', '0');
 118     shouldBe('d[2]', '0');
 119     shouldBeAround('d[3]', '51');
 120
 121     // Verify blurry shadow.
 122     imageData = ctx.getImageData(310, 550, 1, 1);
 123     d = imageData.data;
 124     shouldBe('d[0]', '255');
 125     shouldBe('d[1]', '0');
 126     shouldBe('d[2]', '0');
 127     shouldBeAround('d[3]', '141');
 128
 129     imageData = ctx.getImageData(490, 750, 1, 1);
 130     d = imageData.data;
 131     shouldBe('d[0]', '255');
 132     shouldBe('d[1]', '0');
 133     shouldBe('d[2]', '0');
 134     shouldBeAround('d[3]', '113');
 135
 136     imageData = ctx.getImageData(499, 499, 1, 1);
 137     d = imageData.data;
 138     shouldBe('d[0]', '255');
 139     shouldBe('d[1]', '0');
 140     shouldBe('d[2]', '0');
 141     shouldBeAround('d[3]', '51');
 142
 143     // Verify blurry alpha shadow.
 144     imageData = ctx.getImageData(300, 850, 1, 1);
 145     d = imageData.data;
 146     shouldBe('d[0]', '255');
 147     shouldBe('d[1]', '0');
 148     shouldBe('d[2]', '0');
 149     shouldBeAround('d[3]', '29');
 150
 151     imageData = ctx.getImageData(500, 875, 1, 1);
 152     d = imageData.data;
 153     shouldBe('d[0]', '255');
 154     shouldBe('d[1]', '0');
 155     shouldBe('d[2]', '0');
 156     shouldBeAround('d[3]', '23');
 157
 158     imageData = ctx.getImageData(300, 900, 1, 1);
 159     d = imageData.data;
 160     shouldBe('d[0]', '255');
 161     shouldBe('d[1]', '0');
 162     shouldBe('d[2]', '0');
 163     shouldBeAround('d[3]', '29');
 164
 165     finishJSTest();
 166 }
 167
 168 window.jsTestIsAsync = true;