LayoutTests/fast/canvas/script-tests/canvas-scale-strokePath-shadow.js

   1 description("Ensure correct behavior of canvas with path stroke + 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) < 20)
  23         print("PASS " + a + " is around " + b , "green")
  24     else
  25         print("FAIL " + a + " is not around " + b + " (actual: " + evalA + ")", "red");
  26 }
  27
  28 var canvas = document.createElement('canvas');
  29 document.body.appendChild(canvas);
  30 canvas.setAttribute('width', '600');
  31 canvas.setAttribute('height', '600');
  32 var ctx = canvas.getContext('2d');
  33
  34 ctx.scale(2, 2);
  35 ctx.shadowOffsetX = 100;
  36 ctx.shadowOffsetY = 100;
  37 ctx.strokeStyle = 'rgba(0, 0, 255, 1)';
  38 ctx.lineWidth = 5;
  39
  40 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  41 ctx.beginPath();
  42 ctx.moveTo(50, 50);
  43 ctx.lineTo(100, 50);
  44 ctx.lineTo(100, 100);
  45 ctx.lineTo(50, 100);
  46 ctx.lineTo(50, 50);
  47 ctx.stroke();
  48
  49 ctx.shadowColor = 'rgba(255, 0, 0, 0.3)';
  50 ctx.beginPath();
  51 ctx.moveTo(50, 150);
  52 ctx.lineTo(100, 150);
  53 ctx.lineTo(100, 200);
  54 ctx.lineTo(50, 200);
  55 ctx.lineTo(50, 150);
  56 ctx.stroke();
  57
  58 ctx.shadowColor = 'rgba(255, 0, 0, 1.0)';
  59 ctx.shadowBlur = 10;
  60 ctx.beginPath();
  61 ctx.moveTo(150, 50);
  62 ctx.lineTo(200, 50);
  63 ctx.lineTo(200, 100);
  64 ctx.lineTo(150, 100);
  65 ctx.lineTo(150, 50);
  66 ctx.stroke();
  67
  68 ctx.shadowColor = 'rgba(255, 0, 0, 0.6)';
  69 ctx.beginPath();
  70 ctx.moveTo(150, 150);
  71 ctx.lineTo(200, 150);
  72 ctx.lineTo(200, 200);
  73 ctx.lineTo(150, 200);
  74 ctx.lineTo(150, 150);
  75 ctx.stroke();
  76
  77 var d; // imageData.data
  78
  79 // Verify solid shadow.
  80 d = ctx.getImageData(250, 200, 1, 1).data;
  81 shouldBe('d[0]', '255');
  82 shouldBe('d[1]', '0');
  83 shouldBe('d[2]', '0');
  84 shouldBe('d[3]', '255');
  85
  86 d = ctx.getImageData(300, 290, 1, 1).data;
  87 shouldBe('d[0]', '255');
  88 shouldBe('d[1]', '0');
  89 shouldBe('d[2]', '0');
  90 shouldBe('d[3]', '255');
  91
  92 d = ctx.getImageData(200, 250, 1, 1).data;
  93 shouldBe('d[0]', '255');
  94 shouldBe('d[1]', '0');
  95 shouldBe('d[2]', '0');
  96 shouldBe('d[3]', '255');
  97
  98 // Verify solid alpha shadow.
  99 d = ctx.getImageData(201, 405, 1, 1).data;
 100 shouldBe('d[0]', '255');
 101 shouldBe('d[1]', '0');
 102 shouldBe('d[2]', '0');
 103 shouldBeAround('d[3]', '76');
 104
 105 d = ctx.getImageData(201, 500, 1, 1).data;
 106 shouldBe('d[0]', '255');
 107 shouldBe('d[1]', '0');
 108 shouldBe('d[2]', '0');
 109 shouldBeAround('d[3]', '76');
 110
 111 d = ctx.getImageData(300, 499, 1, 1).data;
 112 shouldBe('d[0]', '255');
 113 shouldBe('d[1]', '0');
 114 shouldBe('d[2]', '0');
 115 shouldBeAround('d[3]', '76');
 116
 117 // Verify blurry shadow.
 118 d = ctx.getImageData(398, 210, 1, 1).data;
 119 shouldBe('d[0]', '255');
 120 shouldBe('d[1]', '0');
 121 shouldBe('d[2]', '0');
 122 shouldBeAround('d[3]', '200');
 123
 124 d = ctx.getImageData(508, 250, 1, 1).data;
 125 shouldBe('d[0]', '255');
 126 shouldBe('d[1]', '0');
 127 shouldBe('d[2]', '0');
 128 shouldBeAround('d[3]', '49');
 129
 130 d = ctx.getImageData(450, 198, 1, 1).data;
 131 shouldBe('d[0]', '255');
 132 shouldBe('d[1]', '0');
 133 shouldBe('d[2]', '0');
 134 shouldBeAround('d[3]', '199');
 135
 136 // Verify blurry alpha shadow.
 137 d = ctx.getImageData(505, 450, 1, 1).data;
 138 shouldBe('d[0]', '255');
 139 shouldBe('d[1]', '0');
 140 shouldBe('d[2]', '0');
 141 shouldBeAround('d[3]', '70');
 142
 143 d = ctx.getImageData(505, 450, 1, 1).data;
 144 shouldBe('d[0]', '255');
 145 shouldBe('d[1]', '0');
 146 shouldBe('d[2]', '0');
 147 shouldBeAround('d[3]', '70');
 148
 149 d = ctx.getImageData(450, 405, 1, 1).data;
 150 shouldBe('d[0]', '255');
 151 shouldBe('d[1]', '0');
 152 shouldBe('d[2]', '0');
 153 shouldBeAround('d[3]', '69');