third_party/WebKit/LayoutTests/fast/canvas/script-tests/canvas-strokePath-cap-join.js

   1 description("Ensure correct behavior of canvas with path stroke with cap and join");
   2
   3 var canvas = document.createElement('canvas');
   4 document.body.appendChild(canvas);
   5 canvas.setAttribute('width', '700');
   6 canvas.setAttribute('height', '200');
   7 var ctx = canvas.getContext('2d');
   8
   9 ctx.miterLimit = 5;
  10 ctx.lineWidth = 15;
  11
  12 ctx.fillStyle="rgba(255, 255, 255, 1.0)";
  13 ctx.fillRect(0, 0, 700, 200);
  14
  15 ctx.strokeStyle="rgba(0, 0, 0, 1.0)";
  16 ctx.lineJoin = "miter";
  17 ctx.lineCap = "round";
  18
  19 ctx.translate(0, 50);
  20 ctx.save();
  21
  22 ctx.beginPath();
  23 ctx.moveTo(10, 100);
  24 ctx.lineTo(30, 2);
  25 ctx.lineTo(50, 100);
  26 ctx.stroke();
  27
  28 ctx.translate(60 ,0);
  29 ctx.beginPath();
  30 ctx.moveTo(10, 100);
  31 ctx.lineTo(30, 3);
  32 ctx.lineTo(50, 100);
  33 ctx.stroke();
  34
  35 ctx.translate(90 ,0);
  36 ctx.save();
  37 ctx.rotate(0.2);
  38 ctx.beginPath();
  39 ctx.moveTo(10, 100);
  40 ctx.lineTo(30, 3);
  41 ctx.lineTo(50, 100);
  42 ctx.closePath();
  43 ctx.stroke();
  44 ctx.restore();
  45
  46 ctx.restore();
  47
  48 ctx.lineJoin = "bevel";
  49 ctx.lineCap = "square";
  50
  51 ctx.translate(200, 0);
  52 ctx.save();
  53
  54 ctx.beginPath();
  55 ctx.moveTo(10, 100);
  56 ctx.lineTo(30, 2);
  57 ctx.lineTo(50, 100);
  58 ctx.stroke();
  59
  60 ctx.translate(60 ,0);
  61 ctx.beginPath();
  62 ctx.moveTo(10, 100);
  63 ctx.lineTo(30, 3);
  64 ctx.lineTo(50, 100);
  65 ctx.stroke();
  66
  67 ctx.translate(90 ,0);
  68 ctx.save();
  69 ctx.rotate(0.2);
  70 ctx.beginPath();
  71 ctx.moveTo(10, 100);
  72 ctx.lineTo(30, 3);
  73 ctx.lineTo(50, 100);
  74 ctx.closePath();
  75 ctx.stroke();
  76 ctx.restore();
  77
  78 ctx.restore();
  79
  80 ctx.lineJoin = "round";
  81 ctx.lineCap = "butt";
  82
  83 ctx.translate(200, 0);
  84 ctx.save();
  85
  86 ctx.beginPath();
  87 ctx.moveTo(10, 100);
  88 ctx.lineTo(30, 2);
  89 ctx.lineTo(50, 100);
  90 ctx.stroke();
  91
  92 ctx.translate(60 ,0);
  93 ctx.beginPath();
  94 ctx.moveTo(10, 100);
  95 ctx.lineTo(30, 3);
  96 ctx.lineTo(50, 100);
  97 ctx.stroke();
  98
  99 ctx.translate(90 ,0);
 100 ctx.save();
 101 ctx.rotate(0.2);
 102 ctx.beginPath();
 103 ctx.moveTo(10, 100);
 104 ctx.lineTo(30, 3);
 105 ctx.lineTo(50, 100);
 106 ctx.closePath();
 107 ctx.stroke();
 108 ctx.restore();
 109
 110 ctx.restore();
 111
 112 var imageData, data;
 113
 114 // Verify Join : miter, Cap : round.
 115 imageData = ctx.getImageData(30, 51, 1, 1);
 116 data = imageData.data;
 117 shouldBe('data[0]', '0');
 118
 119 imageData = ctx.getImageData(30, 49, 1, 1);
 120 data = imageData.data;
 121 shouldBe('data[0]', '255');
 122
 123 imageData = ctx.getImageData(14, 154, 1, 1);
 124 data = imageData.data;
 125 shouldBe('data[0]', '0');
 126
 127 imageData = ctx.getImageData(14, 157, 1, 1);
 128 data = imageData.data;
 129 shouldBe('data[0]', '255');
 130
 131 imageData = ctx.getImageData(89, 22, 1, 1);
 132 data = imageData.data;
 133 shouldBe('data[0]', '0');
 134
 135 imageData = ctx.getImageData(89, 12, 1, 1);
 136 data = imageData.data;
 137 shouldBe('data[0]', '255');
 138
 139 imageData = ctx.getImageData(184, 29, 1, 1);
 140 data = imageData.data;
 141 shouldBe('data[0]', '0');
 142
 143 imageData = ctx.getImageData(180, 27, 1, 1);
 144 data = imageData.data;
 145 shouldBe('data[0]', '255');
 146
 147 imageData = ctx.getImageData(132, 152, 1, 1);
 148 data = imageData.data;
 149 shouldBe('data[0]', '0');
 150
 151 imageData = ctx.getImageData(130, 157, 1, 1);
 152 data = imageData.data;
 153 shouldBe('data[0]', '255');
 154
 155 // Verify Join : bevel, Cap : square.
 156 imageData = ctx.getImageData(202, 154, 1, 1);
 157 data = imageData.data;
 158 shouldBe('data[0]', '0');
 159
 160 imageData = ctx.getImageData(201, 150, 1, 1);
 161 data = imageData.data;
 162 shouldBe('data[0]', '255');
 163
 164 imageData = ctx.getImageData(228, 52, 1, 1);
 165 data = imageData.data;
 166 shouldBe('data[0]', '0');
 167
 168 imageData = ctx.getImageData(225, 48, 1, 1);
 169 data = imageData.data;
 170 shouldBe('data[0]', '255');
 171
 172 imageData = ctx.getImageData(316, 154, 1, 1);
 173 data = imageData.data;
 174 shouldBe('data[0]', '0');
 175
 176 imageData = ctx.getImageData(316, 157, 1, 1);
 177 data = imageData.data;
 178 shouldBe('data[0]', '255');
 179
 180 imageData = ctx.getImageData(289, 52, 1, 1);
 181 data = imageData.data;
 182 shouldBe('data[0]', '0');
 183
 184 imageData = ctx.getImageData(289, 48, 1, 1);
 185 data = imageData.data;
 186 shouldBe('data[0]', '255');
 187
 188 imageData = ctx.getImageData(372, 58, 1, 1);
 189 data = imageData.data;
 190 shouldBe('data[0]', '0');
 191
 192 imageData = ctx.getImageData(373, 54, 1, 1);
 193 data = imageData.data;
 194 shouldBe('data[0]', '255');
 195
 196 imageData = ctx.getImageData(380, 159, 1, 1);
 197 data = imageData.data;
 198 shouldBe('data[0]', '0');
 199
 200 imageData = ctx.getImageData(383, 162, 1, 1);
 201 data = imageData.data;
 202 shouldBe('data[0]', '255');
 203
 204 // Verify Join : round, Cap : butt.
 205 imageData = ctx.getImageData(405, 147, 1, 1);
 206 data = imageData.data;
 207 shouldBe('data[0]', '0');
 208
 209 imageData = ctx.getImageData(405, 151, 1, 1);
 210 data = imageData.data;
 211 shouldBe('data[0]', '255');
 212
 213 imageData = ctx.getImageData(429, 46, 1, 1);
 214 data = imageData.data;
 215 shouldBe('data[0]', '0');
 216
 217 imageData = ctx.getImageData(429, 43, 1, 1);
 218 data = imageData.data;
 219 shouldBe('data[0]', '255');
 220
 221 imageData = ctx.getImageData(464, 146, 1, 1);
 222 data = imageData.data;
 223 shouldBe('data[0]', '0');
 224
 225 imageData = ctx.getImageData(464, 150, 1, 1);
 226 data = imageData.data;
 227 shouldBe('data[0]', '255');
 228
 229 imageData = ctx.getImageData(489, 46, 1, 1);
 230 data = imageData.data;
 231 shouldBe('data[0]', '0');
 232
 233 imageData = ctx.getImageData(489, 43, 1, 1);
 234 data = imageData.data;
 235 shouldBe('data[0]', '255');
 236
 237 imageData = ctx.getImageData(534, 151, 1, 1);
 238 data = imageData.data;
 239 shouldBe('data[0]', '0');
 240
 241 imageData = ctx.getImageData(531, 153, 1, 1);
 242 data = imageData.data;
 243 shouldBe('data[0]', '255');
 244
 245 imageData = ctx.getImageData(579, 52, 1, 1);
 246 data = imageData.data;
 247 shouldBe('data[0]', '0');
 248
 249 imageData = ctx.getImageData(579, 48, 1, 1);
 250 data = imageData.data;
 251 shouldBe('data[0]', '255');
 252