drawing-rectangles-to-the-canvas.yaml (13624B)
1 - name: 2d.clearRect.basic 2 desc: clearRect clears to transparent black 3 code: | 4 ctx.fillStyle = '#f00'; 5 ctx.fillRect(0, 0, 100, 50); 6 ctx.clearRect(0, 0, 100, 50); 7 @assert pixel 50,25 == 0,0,0,0; 8 expected: clear 9 10 - name: 2d.clearRect.path 11 desc: clearRect does not affect the current path 12 code: | 13 ctx.fillStyle = '#0f0'; 14 ctx.beginPath(); 15 ctx.rect(0, 0, 100, 50); 16 ctx.clearRect(0, 0, 16, 16); 17 ctx.fill(); 18 @assert pixel 50,25 == 0,255,0,255; 19 expected: green 20 21 - name: 2d.clearRect.zero 22 desc: clearRect of zero pixels has no effect 23 code: | 24 ctx.fillStyle = '#0f0'; 25 ctx.fillRect(0, 0, 100, 50); 26 ctx.clearRect(0, 0, 100, 0); 27 ctx.clearRect(0, 0, 0, 50); 28 ctx.clearRect(0, 0, 0, 0); 29 @assert pixel 50,25 == 0,255,0,255; 30 expected: green 31 32 - name: 2d.clearRect.negative 33 desc: clearRect of negative sizes works 34 code: | 35 ctx.fillStyle = '#f00'; 36 ctx.fillRect(0, 0, 100, 50); 37 ctx.clearRect(0, 0, 50, 25); 38 ctx.clearRect(100, 0, -50, 25); 39 ctx.clearRect(0, 50, 50, -25); 40 ctx.clearRect(100, 50, -50, -25); 41 @assert pixel 25,12 == 0,0,0,0; 42 @assert pixel 75,12 == 0,0,0,0; 43 @assert pixel 25,37 == 0,0,0,0; 44 @assert pixel 75,37 == 0,0,0,0; 45 expected: clear 46 47 - name: 2d.clearRect.transform 48 desc: clearRect is affected by transforms 49 code: | 50 ctx.fillStyle = '#f00'; 51 ctx.fillRect(0, 0, 100, 50); 52 ctx.scale(10, 10); 53 ctx.translate(0, 5); 54 ctx.clearRect(0, -5, 10, 5); 55 @assert pixel 50,25 == 0,0,0,0; 56 expected: clear 57 58 - name: 2d.clearRect.globalalpha 59 desc: clearRect is not affected by globalAlpha 60 code: | 61 ctx.fillStyle = '#f00'; 62 ctx.fillRect(0, 0, 100, 50); 63 ctx.globalAlpha = 0.1; 64 ctx.clearRect(0, 0, 100, 50); 65 @assert pixel 50,25 == 0,0,0,0; 66 expected: clear 67 68 - name: 2d.clearRect.globalcomposite 69 desc: clearRect is not affected by globalCompositeOperation 70 code: | 71 ctx.fillStyle = '#f00'; 72 ctx.fillRect(0, 0, 100, 50); 73 ctx.globalCompositeOperation = 'destination-atop'; 74 ctx.clearRect(0, 0, 100, 50); 75 @assert pixel 50,25 == 0,0,0,0; 76 expected: clear 77 78 - name: 2d.clearRect.clip 79 desc: clearRect is affected by clipping regions 80 code: | 81 ctx.fillStyle = '#0f0'; 82 ctx.fillRect(0, 0, 100, 50); 83 ctx.beginPath(); 84 ctx.rect(0, 0, 16, 16); 85 ctx.clip(); 86 ctx.clearRect(0, 0, 100, 50); 87 ctx.fillStyle = '#0f0'; 88 ctx.fillRect(0, 0, 16, 16); 89 @assert pixel 50,25 == 0,255,0,255; 90 expected: green 91 92 - name: 2d.clearRect.shadow 93 desc: clearRect does not draw shadows 94 code: | 95 ctx.fillStyle = '#0f0'; 96 ctx.fillRect(0, 0, 100, 50); 97 ctx.shadowColor = '#f00'; 98 ctx.shadowBlur = 0; 99 ctx.shadowOffsetX = 0; 100 ctx.shadowOffsetY = 50; 101 ctx.clearRect(0, -50, 100, 50); 102 @assert pixel 50,25 == 0,255,0,255; 103 expected: green 104 105 - name: 2d.clearRect.nonfinite 106 desc: clearRect() with Infinity/NaN is ignored 107 code: | 108 ctx.fillStyle = '#0f0'; 109 ctx.fillRect(0, 0, 100, 50); 110 @nonfinite ctx.clearRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>); 111 @assert pixel 50,25 == 0,255,0,255; 112 expected: green 113 114 115 - name: 2d.fillRect.basic 116 desc: fillRect works 117 code: | 118 ctx.fillStyle = '#0f0'; 119 ctx.fillRect(0, 0, 100, 50); 120 @assert pixel 50,25 == 0,255,0,255; 121 expected: green 122 123 - name: 2d.fillRect.path 124 desc: fillRect does not affect the current path 125 code: | 126 ctx.beginPath(); 127 ctx.rect(0, 0, 100, 50); 128 ctx.fillStyle = '#f00'; 129 ctx.fillRect(0, 0, 16, 16); 130 ctx.fillStyle = '#0f0'; 131 ctx.fill(); 132 @assert pixel 50,25 == 0,255,0,255; 133 expected: green 134 135 - name: 2d.fillRect.zero 136 desc: fillRect of zero pixels has no effect 137 code: | 138 ctx.fillStyle = '#0f0'; 139 ctx.fillRect(0, 0, 100, 50); 140 ctx.fillStyle = '#f00'; 141 ctx.fillRect(0, 0, 100, 0); 142 ctx.fillRect(0, 0, 0, 50); 143 ctx.fillRect(0, 0, 0, 0); 144 @assert pixel 50,25 == 0,255,0,255; 145 expected: green 146 147 - name: 2d.fillRect.negative 148 desc: fillRect of negative sizes works 149 code: | 150 ctx.fillStyle = '#f00'; 151 ctx.fillRect(0, 0, 100, 50); 152 ctx.fillStyle = '#0f0'; 153 ctx.fillRect(0, 0, 50, 25); 154 ctx.fillRect(100, 0, -50, 25); 155 ctx.fillRect(0, 50, 50, -25); 156 ctx.fillRect(100, 50, -50, -25); 157 @assert pixel 25,12 == 0,255,0,255; 158 @assert pixel 75,12 == 0,255,0,255; 159 @assert pixel 25,37 == 0,255,0,255; 160 @assert pixel 75,37 == 0,255,0,255; 161 expected: green 162 163 - name: 2d.fillRect.transform 164 desc: fillRect is affected by transforms 165 code: | 166 ctx.scale(10, 10); 167 ctx.translate(0, 5); 168 ctx.fillStyle = '#0f0'; 169 ctx.fillRect(0, -5, 10, 5); 170 @assert pixel 50,25 == 0,255,0,255; 171 expected: green 172 173 # don't bother testing globalalpha, globalcomposite because they're already heavily used by other test cases 174 175 - name: 2d.fillRect.clip 176 desc: fillRect is affected by clipping regions 177 code: | 178 ctx.fillStyle = '#0f0'; 179 ctx.fillRect(0, 0, 100, 50); 180 ctx.beginPath(); 181 ctx.rect(0, 0, 16, 16); 182 ctx.clip(); 183 ctx.fillStyle = '#f00'; 184 ctx.fillRect(0, 0, 100, 50); 185 ctx.fillStyle = '#0f0'; 186 ctx.fillRect(0, 0, 16, 16); 187 @assert pixel 50,25 == 0,255,0,255; 188 expected: green 189 190 - name: 2d.fillRect.shadow 191 desc: fillRect draws shadows 192 code: | 193 ctx.fillStyle = '#f00'; 194 ctx.fillRect(0, 0, 100, 50); 195 ctx.shadowColor = '#0f0'; 196 ctx.shadowBlur = 0; 197 ctx.shadowOffsetX = 0; 198 ctx.shadowOffsetY = 50; 199 ctx.fillRect(0, -50, 100, 50); 200 @assert pixel 50,25 == 0,255,0,255; 201 expected: green 202 203 - name: 2d.fillRect.nonfinite 204 desc: fillRect() with Infinity/NaN is ignored 205 code: | 206 ctx.fillStyle = '#0f0'; 207 ctx.fillRect(0, 0, 100, 50); 208 ctx.fillStyle = '#f00'; 209 @nonfinite ctx.fillRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>); 210 @assert pixel 50,25 == 0,255,0,255; 211 expected: green 212 213 214 - name: 2d.strokeRect.basic 215 desc: strokeRect works 216 code: | 217 ctx.strokeStyle = '#0f0'; 218 ctx.lineWidth = 50; 219 ctx.strokeRect(25, 24, 50, 2); 220 @assert pixel 50,25 == 0,255,0,255; 221 expected: green 222 223 - name: 2d.strokeRect.path 224 desc: strokeRect does not affect the current path 225 code: | 226 ctx.beginPath(); 227 ctx.rect(0, 0, 100, 50); 228 ctx.strokeStyle = '#f00'; 229 ctx.lineWidth = 5; 230 ctx.strokeRect(0, 0, 16, 16); 231 ctx.fillStyle = '#0f0'; 232 ctx.fill(); 233 @assert pixel 50,25 == 0,255,0,255; 234 expected: green 235 236 - name: 2d.strokeRect.zero.1 237 desc: strokeRect of 0x0 pixels draws nothing 238 code: | 239 ctx.strokeStyle = '#f00'; 240 ctx.lineWidth = 250; 241 ctx.strokeRect(50, 25, 0, 0); 242 @assert pixel 50,25 == 0,0,0,0; 243 expected: clear 244 245 - name: 2d.strokeRect.zero.2 246 desc: strokeRect of 0x0 pixels draws nothing, including caps and joins 247 code: | 248 ctx.strokeStyle = '#f00'; 249 ctx.lineWidth = 250; 250 ctx.lineCap = 'round'; 251 ctx.lineJoin = 'round'; 252 ctx.strokeRect(50, 25, 0, 0); 253 @assert pixel 50,25 == 0,0,0,0; 254 expected: clear 255 256 - name: 2d.strokeRect.zero.3 257 desc: strokeRect of Nx0 pixels draws a straight line 258 code: | 259 ctx.strokeStyle = '#0f0'; 260 ctx.lineWidth = 50; 261 ctx.strokeRect(0, 25, 100, 0); 262 @assert pixel 50,25 == 0,255,0,255; 263 expected: green 264 265 - name: 2d.strokeRect.zero.4 266 desc: strokeRect of Nx0 pixels draws a closed line with no caps 267 code: | 268 ctx.strokeStyle = '#f00'; 269 ctx.lineWidth = 250; 270 ctx.lineCap = 'round'; 271 ctx.strokeRect(100, 25, 100, 0); 272 @assert pixel 50,25 == 0,0,0,0; 273 expected: clear 274 275 - name: 2d.strokeRect.zero.5 276 desc: strokeRect of Nx0 pixels draws a closed line with joins 277 code: | 278 ctx.strokeStyle = '#0f0'; 279 ctx.lineWidth = 250; 280 ctx.lineJoin = 'round'; 281 ctx.strokeRect(100, 25, 100, 0); 282 @assert pixel 50,25 == 0,255,0,255; 283 expected: green 284 285 - name: 2d.strokeRect.negative 286 desc: strokeRect of negative sizes works 287 code: | 288 ctx.fillStyle = '#f00'; 289 ctx.fillRect(0, 0, 100, 50); 290 ctx.strokeStyle = '#0f0'; 291 ctx.lineWidth = 25; 292 ctx.strokeRect(12, 12, 26, 1); 293 ctx.strokeRect(88, 12, -26, 1); 294 ctx.strokeRect(12, 38, 26, -1); 295 ctx.strokeRect(88, 38, -26, -1); 296 @assert pixel 25,12 == 0,255,0,255; 297 @assert pixel 75,12 == 0,255,0,255; 298 @assert pixel 25,37 == 0,255,0,255; 299 @assert pixel 75,37 == 0,255,0,255; 300 expected: green 301 302 - name: 2d.strokeRect.transform 303 desc: fillRect is affected by transforms 304 code: | 305 ctx.scale(10, 10); 306 ctx.translate(0, 5); 307 ctx.strokeStyle = '#0f0'; 308 ctx.lineWidth = 5; 309 ctx.strokeRect(2.5, -2.6, 5, 0.2); 310 @assert pixel 50,25 == 0,255,0,255; 311 expected: green 312 313 - name: 2d.strokeRect.globalalpha 314 desc: strokeRect is affected by globalAlpha 315 code: | 316 ctx.globalAlpha = 0; 317 ctx.strokeStyle = '#f00'; 318 ctx.lineWidth = 50; 319 ctx.strokeRect(25, 24, 50, 2); 320 @assert pixel 50,25 == 0,0,0,0; 321 expected: clear 322 323 - name: 2d.strokeRect.globalcomposite 324 desc: strokeRect is not affected by globalCompositeOperation 325 code: | 326 ctx.globalCompositeOperation = 'source-in'; 327 ctx.strokeStyle = '#f00'; 328 ctx.lineWidth = 50; 329 ctx.strokeRect(25, 24, 50, 2); 330 @assert pixel 50,25 == 0,0,0,0; 331 expected: clear 332 333 - name: 2d.strokeRect.clip 334 desc: strokeRect is affected by clipping regions 335 code: | 336 ctx.fillStyle = '#0f0'; 337 ctx.fillRect(0, 0, 100, 50); 338 ctx.beginPath(); 339 ctx.rect(0, 0, 16, 16); 340 ctx.clip(); 341 ctx.strokeStyle = '#f00'; 342 ctx.lineWidth = 50; 343 ctx.strokeRect(0, 0, 100, 50); 344 ctx.fillStyle = '#0f0'; 345 ctx.fillRect(0, 0, 16, 16); 346 @assert pixel 50,25 == 0,255,0,255; 347 expected: green 348 349 - name: 2d.strokeRect.shadow 350 desc: strokeRect draws shadows 351 code: | 352 ctx.fillStyle = '#f00'; 353 ctx.fillRect(0, 0, 100, 50); 354 ctx.fillStyle = '#f00'; 355 ctx.shadowColor = '#0f0'; 356 ctx.shadowBlur = 0; 357 ctx.shadowOffsetX = 0; 358 ctx.shadowOffsetY = 50; 359 ctx.strokeStyle = '#f00'; 360 ctx.lineWidth = 50; 361 ctx.strokeRect(0, -75, 100, 50); 362 @assert pixel 50,25 == 0,255,0,255; 363 expected: green 364 365 - name: 2d.strokeRect.nonfinite 366 desc: strokeRect() with Infinity/NaN is ignored 367 code: | 368 ctx.fillStyle = '#0f0'; 369 ctx.fillRect(0, 0, 100, 50); 370 ctx.strokeStyle = '#f00'; 371 ctx.lineWidth = 150; 372 @nonfinite ctx.strokeRect(<0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>); 373 @assert pixel 50,25 == 0,255,0,255; 374 expected: green 375 376 - name: 2d.fillStyle.colorObject 377 desc: ctx.fillStyle works with color objects 378 canvas_types: ['HtmlCanvas'] 379 code: | 380 ctx.fillStyle = {r: 1, g: 0, b: 0}; 381 ctx.fillRect(0, 0, 100, 50); 382 @assert pixel 50,25 == 255,0,0,255; 383 ctx.fillStyle = {r: 0, g: 0, b: 1}; 384 ctx.fillRect(0, 0, 100, 50); 385 @assert pixel 50,25 == 0,0,255,255; 386 ctx.fillStyle = {r: 0.2, g: 0.4, b: 0.6}; 387 ctx.fillRect(0, 0, 100, 50); 388 @assert pixel 50,25 == 51,102,153,255; 389 ctx.fillStyle = {r: 0, g: 1, b: 0}; 390 ctx.fillRect(0, 0, 100, 50); 391 @assert pixel 50,25 == 0,255,0,255; 392 ctx.fillStyle = {r: -1, g: 0, b: 0}; 393 ctx.fillRect(0, 0, 100, 50); 394 @assert pixel 50,25 == 0,0,0,255; 395 ctx.fillStyle = {r: 0, g: 2, b: 0}; 396 ctx.fillRect(0, 0, 100, 50); 397 @assert pixel 50,25 == 0,255,0,255; 398 expected: green 399 400 - name: 2d.fillStyle.colorObject.transparency 401 desc: ctx.fillStyle with color objects has transparency 402 canvas_types: ['HtmlCanvas'] 403 code: | 404 ctx.fillStyle = {r: 0, g: 1, b: 0, a: 0}; 405 ctx.fillRect(0, 0, 100, 50); 406 @assert pixel 50,25 == 0,0,0,0; 407 ctx.clearRect(0, 0, 100, 50); 408 ctx.fillStyle = {r: 0, g: 1, b: 0, a: -1}; 409 ctx.fillRect(0, 0, 100, 50); 410 @assert pixel 50,25 == 0,0,0,0; 411 ctx.clearRect(0, 0, 100, 50); 412 ctx.fillStyle = {r: 0, g: 1, b: 0, a: 0.5}; 413 ctx.fillRect(0, 0, 100, 50); 414 @assert pixel 50,25 == 0,255,0,128; 415 ctx.clearRect(0, 0, 100, 50); 416 ctx.fillStyle = {r: 0, g: 1, b: 0, a: 1}; 417 ctx.fillRect(0, 0, 100, 50); 418 @assert pixel 50,25 == 0,255,0,255; 419 expected: green 420 421 - name: 2d.strokeStyle.colorObject 422 desc: ctx.strokeStyle works with color objects 423 canvas_types: ['HtmlCanvas'] 424 code: | 425 ctx.lineWidth = 50; 426 ctx.strokeStyle = {r: 1, g: 0, b: 0}; 427 ctx.strokeRect(25, 24, 50, 2); 428 @assert pixel 50,25 == 255,0,0,255; 429 ctx.strokeStyle = {r: 0, g: 0, b: 1}; 430 ctx.strokeRect(25, 24, 50, 2); 431 @assert pixel 50,25 == 0,0,255,255; 432 ctx.strokeStyle = {r: 0.2, g: 0.4, b: 0.6}; 433 ctx.strokeRect(25, 24, 50, 2); 434 @assert pixel 50,25 == 51,102,153,255; 435 ctx.strokeStyle = {r: 0, g: 1, b: 0}; 436 ctx.strokeRect(25, 24, 50, 2); 437 @assert pixel 50,25 == 0,255,0,255; 438 ctx.strokeStyle = {r: -1, g: 0, b: 0}; 439 ctx.strokeRect(25, 24, 50, 2); 440 @assert pixel 50,25 == 0,0,0,255; 441 ctx.strokeStyle = {r: 0, g: 2, b: 0}; 442 ctx.strokeRect(25, 24, 50, 2); 443 @assert pixel 50,25 == 0,255,0,255; 444 expected: green 445 446 - name: 2d.strokeStyle.colorObject.transparency 447 desc: ctx.strokeStyle with color objects has transparency 448 canvas_types: ['HtmlCanvas'] 449 code: | 450 ctx.lineWidth = 50; 451 ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 0}; 452 ctx.strokeRect(25, 24, 50, 2); 453 @assert pixel 50,25 == 0,0,0,0; 454 ctx.strokeStyle = {r: 0, g: 1, b: 0, a: -1}; 455 ctx.strokeRect(25, 24, 50, 2); 456 @assert pixel 50,25 == 0,0,0,0; 457 ctx.clearRect(0, 0, 100, 50); 458 ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 0.5}; 459 ctx.strokeRect(25, 24, 50, 2); 460 @assert pixel 50,25 == 0,255,0,128; 461 ctx.clearRect(0, 0, 100, 50); 462 ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 1}; 463 ctx.strokeRect(25, 24, 50, 2); 464 @assert pixel 50,25 == 0,255,0,255; 465 expected: green