| OLD | NEW |
| (Empty) |
| 1 description("Ensure correct behavior of canvas with path stroke with cap and joi
n"); | |
| 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 | |
| OLD | NEW |