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

   1 description("Ensure correct behavior of canvas with drawImage+shadow after scaling. A blue and red checkered pattern should be displayed.");
   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.width = 10;
  33 aCanvas.height = 10;
  34 aCanvas.setAttribute('height', '10');
  35 var aCtx = aCanvas.getContext('2d');
  36 aCtx.fillStyle = 'rgba(0, 0, 255, 1)';
  37 aCtx.fillRect(0, 0, 50, 50);
  38
  39 // Create the image object to be drawn on the master canvas.
  40 var img = new Image();
  41 img.onload = drawImageToCanvasAndCheckPixels;
  42 img.src = aCanvas.toDataURL(); // set a data URI of the base64 encoded image as the source
  43
  44 aCanvas.width = 10;
  45 aCtx.fillStyle = 'rgba(0, 0, 255, 0.5)';
  46 aCtx.fillRect(0, 0, 50, 50);
  47 // Create the image object to be drawn on the master canvas.
  48 var transparentImg = new Image();
  49 transparentImg.onload = drawImageToCanvasAndCheckPixels;
  50 transparentImg.src = aCanvas.toDataURL(); // set a data URI of the base64 encoded image as the source
  51
  52 // Create master canvas.
  53 var canvas = document.createElement('canvas');
  54 document.body.appendChild(canvas);
  55 canvas.setAttribute('width', '150');
  56 canvas.setAttribute('height', '110');
  57 var ctx = canvas.getContext('2d');
  58
  59 var imagesLoaded = 0;
  60
  61 function drawImageToCanvasAndCheckPixels() {
  62     imagesLoaded = imagesLoaded + 1;
  63     if (imagesLoaded == 2) {
  64         ctx.scale(2, 2);
  65         ctx.shadowOffsetX = 20;
  66         ctx.shadowOffsetY = 20;
  67         ctx.fillStyle = 'rgba(0, 0, 255, 1)';
  68
  69         ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  70         ctx.drawImage(img, 10, 10);
  71
  72         ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';
  73         ctx.drawImage(img, 10, 30);
  74
  75         ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  76         ctx.shadowBlur = 10;
  77         ctx.drawImage(img, 30, 10);
  78
  79         ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';
  80         ctx.drawImage(img, 30, 30);
  81
  82         ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  83         ctx.drawImage(transparentImg, 50, 10);
  84
  85         ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';
  86         ctx.drawImage(transparentImg, 50, 30);
  87
  88         checkPixels();
  89     }
  90 }
  91
  92 var d; // imageData.data
  93
  94 function checkPixels() {
  95
  96     // Verify solid shadow.
  97     d = ctx.getImageData(40, 40, 1, 1).data;
  98     shouldBe('d[0]', '255');
  99     shouldBe('d[1]', '0');
 100     shouldBe('d[2]', '0');
 101     shouldBe('d[3]', '255');
 102
 103     d = ctx.getImageData(59, 59, 1, 1).data;
 104     shouldBe('d[0]', '255');
 105     shouldBe('d[1]', '0');
 106     shouldBe('d[2]', '0');
 107     shouldBe('d[3]', '255');
 108
 109     // Verify solid alpha shadow.
 110     d = ctx.getImageData(41, 81, 1, 1).data;
 111     shouldBe('d[0]', '255');
 112     shouldBe('d[1]', '0');
 113     shouldBe('d[2]', '0');
 114     shouldBeAround('d[3]', '76');
 115
 116     d = ctx.getImageData(59, 99, 1, 1).data;
 117     shouldBe('d[0]', '255');
 118     shouldBe('d[1]', '0');
 119     shouldBe('d[2]', '0');
 120     shouldBeAround('d[3]', '76');
 121
 122     // Verify blurry shadow.
 123     d = ctx.getImageData(90, 39, 1, 1).data;
 124     shouldBe('d[0]', '255');
 125     shouldBe('d[1]', '0');
 126     shouldBe('d[2]', '0');
 127     shouldBeAround('d[3]', '114');
 128
 129     d = ctx.getImageData(90, 60, 1, 1).data;
 130     shouldBe('d[0]', '255');
 131     shouldBe('d[1]', '0');
 132     shouldBe('d[2]', '0');
 133     shouldBeAround('d[3]', '114');
 134
 135     d = ctx.getImageData(79, 50, 1, 1).data;
 136     shouldBe('d[0]', '255');
 137     shouldBe('d[1]', '0');
 138     shouldBe('d[2]', '0');
 139     shouldBeAround('d[3]', '114');
 140
 141     d = ctx.getImageData(100, 50, 1, 1).data;
 142     shouldBe('d[0]', '255');
 143     shouldBe('d[1]', '0');
 144     shouldBe('d[2]', '0');
 145     shouldBeAround('d[3]', '114');
 146
 147     // Verify blurry alpha shadow.
 148     d = ctx.getImageData(90, 79, 1, 1).data;
 149     shouldBe('d[0]', '255');
 150     shouldBe('d[1]', '0');
 151     shouldBe('d[2]', '0');
 152     shouldBeAround('d[3]', '34');
 153
 154     d = ctx.getImageData(90, 100, 1, 1).data;
 155     shouldBe('d[0]', '255');
 156     shouldBe('d[1]', '0');
 157     shouldBe('d[2]', '0');
 158     shouldBeAround('d[3]', '34');
 159
 160     d = ctx.getImageData(79, 90, 1, 1).data;
 161     shouldBe('d[0]', '255');
 162     shouldBe('d[1]', '0');
 163     shouldBe('d[2]', '0');
 164     shouldBeAround('d[3]', '34');
 165
 166     d = ctx.getImageData(100, 90, 1, 1).data;
 167     shouldBe('d[0]', '255');
 168     shouldBe('d[1]', '0');
 169     shouldBe('d[2]', '0');
 170     shouldBeAround('d[3]', '34');
 171
 172     // Verify blurry shadow of image with alpha
 173     d = ctx.getImageData(130, 39, 1, 1).data;
 174     shouldBe('d[0]', '255');
 175     shouldBe('d[1]', '0');
 176     shouldBe('d[2]', '0');
 177     shouldBeAround('d[3]', '57');
 178
 179     d = ctx.getImageData(130, 60, 1, 1).data;
 180     shouldBe('d[0]', '255');
 181     shouldBe('d[1]', '0');
 182     shouldBe('d[2]', '0');
 183     shouldBeAround('d[3]', '57');
 184
 185     d = ctx.getImageData(119, 50, 1, 1).data;
 186     shouldBe('d[0]', '255');
 187     shouldBe('d[1]', '0');
 188     shouldBe('d[2]', '0');
 189     shouldBeAround('d[3]', '57');
 190
 191     d = ctx.getImageData(140, 50, 1, 1).data;
 192     shouldBe('d[0]', '255');
 193     shouldBe('d[1]', '0');
 194     shouldBe('d[2]', '0');
 195     shouldBeAround('d[3]', '57');
 196
 197     // Verify blurry alpha shadow of image with alpha.
 198     d = ctx.getImageData(130, 79, 1, 1).data;
 199     shouldBe('d[0]', '255');
 200     shouldBe('d[1]', '0');
 201     shouldBe('d[2]', '0');
 202     shouldBeAround('d[3]', '17');
 203
 204     d = ctx.getImageData(130, 100, 1, 1).data;
 205     shouldBe('d[0]', '255');
 206     shouldBe('d[1]', '0');
 207     shouldBe('d[2]', '0');
 208     shouldBeAround('d[3]', '17');
 209
 210     d = ctx.getImageData(119, 90, 1, 1).data;
 211     shouldBe('d[0]', '255');
 212     shouldBe('d[1]', '0');
 213     shouldBe('d[2]', '0');
 214     shouldBeAround('d[3]', '17');
 215
 216     d = ctx.getImageData(140, 90, 1, 1).data;
 217     shouldBe('d[0]', '255');
 218     shouldBe('d[1]', '0');
 219     shouldBe('d[2]', '0');
 220     shouldBeAround('d[3]', '17');
 221     finishJSTest();
 222 }
 223
 224 window.jsTestIsAsync = true;