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

   1 description("Ensure correct behavior of canvas with image shadow. A square with a cut-out top-right corner should be displayed with solid shadow (top) and blur shadow (bottom).");
   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 shouldNotBe(a, b)
  14 {
  15     var evalA;
  16     try {
  17         evalA = eval(a);
  18     } catch(e) {
  19         evalA = e;
  20     }
  21
  22     if (evalA != b)
  23         print("PASS " + a + " should not be " + b + " and it's not.", "green")
  24     else
  25         print("FAIL " + a + " should not be " + b + " but it is.", "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 = 'green';
  39 aCtx.arc(100, 100, 150, 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', '600');
  51 canvas.setAttribute('height', '600');
  52 var ctx = canvas.getContext('2d');
  53
  54 function drawImageToCanvasAndCheckPixels() {
  55     ctx.shadowOffsetX = 250;
  56     ctx.shadowColor = 'rgba(240, 50, 50, 1.0)';
  57     ctx.drawImage(img, 50, 50);
  58
  59     ctx.shadowOffsetX = 250;
  60     ctx.shadowBlur = 6;
  61     ctx.shadowColor = 'rgba(50, 50, 200, 0.9)';
  62     ctx.shadowColor = 'rgba(0, 0, 255, 1.0)';
  63     ctx.drawImage(img, 50, 300);
  64
  65     checkPixels();
  66 }
  67
  68 function checkPixels() {
  69     var imageData, data;
  70
  71     // Verify solid shadow.
  72     imageData = ctx.getImageData(260, 300, 1, 1);
  73     d = imageData.data;
  74     shouldBe('d[0]', '0');
  75     shouldBe('d[1]', '0');
  76     shouldBe('d[2]', '0');
  77     shouldBe('d[3]', '0');
  78
  79     imageData = ctx.getImageData(350, 100, 1, 1);
  80     d = imageData.data;
  81     shouldBe('d[0]', '240');
  82     shouldBe('d[1]', '50');
  83     shouldBe('d[2]', '50');
  84     shouldBe('d[3]', '255');
  85
  86     imageData = ctx.getImageData(400, 200, 1, 1);
  87     d = imageData.data;
  88     shouldBe('d[0]', '240');
  89     shouldBe('d[1]', '50');
  90     shouldBe('d[2]', '50');
  91     shouldBe('d[3]', '255');
  92
  93     imageData = ctx.getImageData(490, 65, 1, 1);
  94     d = imageData.data;
  95     shouldBe('d[0]', '0');
  96     shouldBe('d[1]', '0');
  97     shouldBe('d[2]', '0');
  98     shouldBe('d[3]', '0');
  99
 100     imageData = ctx.getImageData(485, 65, 1, 1);
 101     d = imageData.data;
 102     shouldBe('d[0]', '0');
 103     shouldBe('d[1]', '0');
 104     shouldBe('d[2]', '0');
 105     shouldBe('d[3]', '0');
 106
 107     // Verify blurry shadow.
 108     imageData = ctx.getImageData(260, 400, 1, 1);
 109     d = imageData.data;
 110     shouldBe('d[0]', '0');
 111     shouldBe('d[1]', '0');
 112     shouldBe('d[2]', '0');
 113     shouldBe('d[3]', '0');
 114
 115     imageData = ctx.getImageData(350, 300, 1, 1);
 116     d = imageData.data;
 117     shouldBe('d[0]', '0');
 118     shouldBe('d[1]', '0');
 119     shouldBe('d[2]', '255');
 120     shouldNotBe('d[3]', '255');
 121
 122     imageData = ctx.getImageData(300, 400, 1, 1);
 123     d = imageData.data;
 124     shouldBe('d[0]', '0');
 125     shouldBe('d[1]', '0');
 126     shouldBe('d[2]', '255');
 127     shouldNotBe('d[3]', '255');
 128
 129     imageData = ctx.getImageData(300, 500, 1, 1);
 130     d = imageData.data;
 131     shouldBe('d[0]', '0');
 132     shouldBe('d[1]', '0');
 133     shouldBe('d[2]', '255');
 134     shouldNotBe('d[3]', '255');
 135
 136     imageData = ctx.getImageData(400, 500, 1, 1);
 137     d = imageData.data;
 138     shouldBe('d[0]', '0');
 139     shouldBe('d[1]', '0');
 140     shouldBe('d[2]', '255');
 141     shouldNotBe('d[3]', '255');
 142
 143     imageData = ctx.getImageData(400, 400, 1, 1);
 144     d = imageData.data;
 145     shouldBe('d[0]', '0');
 146     shouldBe('d[1]', '0');
 147     shouldBe('d[2]', '255');
 148
 149     imageData = ctx.getImageData(490, 315, 1, 1);
 150     d = imageData.data;
 151     shouldBe('d[0]', '0');
 152     shouldBe('d[1]', '0');
 153     shouldBe('d[2]', '0');
 154     shouldBe('d[3]', '0');
 155
 156     imageData = ctx.getImageData(485, 320, 1, 1);
 157     d = imageData.data;
 158     shouldBe('d[0]', '0');
 159     shouldBe('d[1]', '0');
 160     shouldBe('d[2]', '0');
 161     shouldBe('d[3]', '0');
 162
 163     finishJSTest();
 164 }
 165
 166 window.jsTestIsAsync = true;