1- name: 2d.drawImage.3arg 2 testing: 3 - 2d.drawImage.defaultsource 4 - 2d.drawImage.defaultdest 5 images: 6 - red.png 7 - green.png 8 code: | 9 ctx.drawImage(document.getElementById('green.png'), 0, 0); 10 ctx.drawImage(document.getElementById('red.png'), -100, 0); 11 ctx.drawImage(document.getElementById('red.png'), 100, 0); 12 ctx.drawImage(document.getElementById('red.png'), 0, -50); 13 ctx.drawImage(document.getElementById('red.png'), 0, 50); 14 15 @assert pixel 0,0 ==~ 0,255,0,255; 16 @assert pixel 99,0 ==~ 0,255,0,255; 17 @assert pixel 0,49 ==~ 0,255,0,255; 18 @assert pixel 99,49 ==~ 0,255,0,255; 19 expected: green 20 21- name: 2d.drawImage.5arg 22 testing: 23 - 2d.drawImage.defaultsource 24 images: 25 - red.png 26 - green.png 27 code: | 28 ctx.fillStyle = '#f00'; 29 ctx.fillRect(0, 0, 100, 50); 30 ctx.drawImage(document.getElementById('green.png'), 50, 0, 50, 50); 31 ctx.drawImage(document.getElementById('red.png'), 0, 0, 50, 50); 32 ctx.fillStyle = '#0f0'; 33 ctx.fillRect(0, 0, 50, 50); 34 35 @assert pixel 0,0 ==~ 0,255,0,255; 36 @assert pixel 99,0 ==~ 0,255,0,255; 37 @assert pixel 0,49 ==~ 0,255,0,255; 38 @assert pixel 99,49 ==~ 0,255,0,255; 39 expected: green 40 41- name: 2d.drawImage.9arg.basic 42 testing: 43 - 2d.drawImage.paint 44 images: 45 - green.png 46 code: | 47 ctx.fillStyle = '#f00'; 48 ctx.fillRect(0, 0, 100, 50); 49 ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50); 50 @assert pixel 0,0 ==~ 0,255,0,255; 51 @assert pixel 99,0 ==~ 0,255,0,255; 52 @assert pixel 0,49 ==~ 0,255,0,255; 53 @assert pixel 99,49 ==~ 0,255,0,255; 54 expected: green 55 56- name: 2d.drawImage.9arg.sourcepos 57 testing: 58 - 2d.drawImage.paint 59 images: 60 - rgrg-256x256.png 61 code: | 62 ctx.fillStyle = '#f00'; 63 ctx.fillRect(0, 0, 100, 50); 64 ctx.drawImage(document.getElementById('rgrg-256x256.png'), 140, 20, 100, 50, 0, 0, 100, 50); 65 @assert pixel 0,0 ==~ 0,255,0,255; 66 @assert pixel 99,0 ==~ 0,255,0,255; 67 @assert pixel 0,49 ==~ 0,255,0,255; 68 @assert pixel 99,49 ==~ 0,255,0,255; 69 expected: green 70 71- name: 2d.drawImage.9arg.sourcesize 72 testing: 73 - 2d.drawImage.paint 74 images: 75 - rgrg-256x256.png 76 code: | 77 ctx.fillStyle = '#f00'; 78 ctx.fillRect(0, 0, 100, 50); 79 ctx.drawImage(document.getElementById('rgrg-256x256.png'), 0, 0, 256, 256, 0, 0, 100, 50); 80 ctx.fillStyle = '#0f0'; 81 ctx.fillRect(0, 0, 51, 26); 82 ctx.fillRect(49, 24, 51, 26); 83 @assert pixel 0,0 ==~ 0,255,0,255; 84 @assert pixel 99,0 ==~ 0,255,0,255; 85 @assert pixel 0,49 ==~ 0,255,0,255; 86 @assert pixel 99,49 ==~ 0,255,0,255; 87 @assert pixel 20,20 ==~ 0,255,0,255; 88 @assert pixel 80,20 ==~ 0,255,0,255; 89 @assert pixel 20,30 ==~ 0,255,0,255; 90 @assert pixel 80,30 ==~ 0,255,0,255; 91 expected: green 92 93- name: 2d.drawImage.9arg.destpos 94 testing: 95 - 2d.drawImage.paint 96 images: 97 - red.png 98 - green.png 99 code: | 100 ctx.fillStyle = '#f00'; 101 ctx.fillRect(0, 0, 100, 50); 102 ctx.drawImage(document.getElementById('green.png'), 0, 0, 100, 50, 0, 0, 100, 50); 103 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -100, 0, 100, 50); 104 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 100, 50); 105 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -50, 100, 50); 106 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 50); 107 @assert pixel 0,0 ==~ 0,255,0,255; 108 @assert pixel 99,0 ==~ 0,255,0,255; 109 @assert pixel 0,49 ==~ 0,255,0,255; 110 @assert pixel 99,49 ==~ 0,255,0,255; 111 expected: green 112 113- name: 2d.drawImage.9arg.destsize 114 testing: 115 - 2d.drawImage.paint 116 images: 117 - red.png 118 - green.png 119 code: | 120 ctx.fillStyle = '#f00'; 121 ctx.fillRect(0, 0, 100, 50); 122 ctx.drawImage(document.getElementById('green.png'), 1, 1, 1, 1, 0, 0, 100, 50); 123 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, -50, 0, 50, 50); 124 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 100, 0, 50, 50); 125 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, -25, 100, 25); 126 ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50, 0, 50, 100, 25); 127 @assert pixel 0,0 ==~ 0,255,0,255; 128 @assert pixel 99,0 ==~ 0,255,0,255; 129 @assert pixel 0,49 ==~ 0,255,0,255; 130 @assert pixel 99,49 ==~ 0,255,0,255; 131 expected: green 132 133- name: 2d.drawImage.canvas 134 testing: 135 - 2d.drawImage.paint 136 code: | 137 var canvas2 = document.createElement('canvas'); 138 canvas2.width = 100; 139 canvas2.height = 50; 140 var ctx2 = canvas2.getContext('2d'); 141 ctx2.fillStyle = '#0f0'; 142 ctx2.fillRect(0, 0, 100, 50); 143 144 ctx.fillStyle = '#f00'; 145 ctx.drawImage(canvas2, 0, 0); 146 147 @assert pixel 0,0 ==~ 0,255,0,255; 148 @assert pixel 99,0 ==~ 0,255,0,255; 149 @assert pixel 0,49 ==~ 0,255,0,255; 150 @assert pixel 99,49 ==~ 0,255,0,255; 151 152 ctx.drawImage(document.createElement('canvas'), 0, 0); 153 154 @assert pixel 0,0 ==~ 0,255,0,255; 155 @assert pixel 99,0 ==~ 0,255,0,255; 156 @assert pixel 0,49 ==~ 0,255,0,255; 157 @assert pixel 99,49 ==~ 0,255,0,255; 158 expected: green 159 160- name: 2d.drawImage.self.1 161 testing: 162 - 2d.drawImage.self 163 code: | 164 ctx.fillStyle = '#0f0'; 165 ctx.fillRect(0, 0, 50, 50); 166 ctx.fillStyle = '#f00'; 167 ctx.fillRect(50, 0, 50, 50); 168 ctx.drawImage(canvas, 50, 0); 169 170 @assert pixel 0,0 ==~ 0,255,0,255; 171 @assert pixel 99,0 ==~ 0,255,0,255; 172 @assert pixel 0,49 ==~ 0,255,0,255; 173 @assert pixel 99,49 ==~ 0,255,0,255; 174 expected: green 175 176- name: 2d.drawImage.self.2 177 testing: 178 - 2d.drawImage.self 179 code: | 180 ctx.fillStyle = '#0f0'; 181 ctx.fillRect(0, 1, 100, 49); 182 ctx.fillStyle = '#f00'; 183 ctx.fillRect(0, 0, 100, 1); 184 ctx.drawImage(canvas, 0, 1); 185 ctx.fillStyle = '#0f0'; 186 ctx.fillRect(0, 0, 100, 2); 187 188 @assert pixel 0,0 ==~ 0,255,0,255; 189 @assert pixel 99,0 ==~ 0,255,0,255; 190 @assert pixel 0,49 ==~ 0,255,0,255; 191 @assert pixel 99,49 ==~ 0,255,0,255; 192 expected: green 193 194- name: 2d.drawImage.null 195 testing: 196 - 2d.drawImage.IDL 197 code: | 198 @assert throws TypeError ctx.drawImage(null, 0, 0); 199 200- name: 2d.drawImage.wrongtype 201 desc: Incorrect image types in drawImage do not match any defined overloads, so 202 WebIDL throws a TypeError 203 notes: &bindings Defined in "Web IDL" (draft) 204 testing: 205 - 2d.drawImage.IDL 206 code: | 207 @assert throws TypeError ctx.drawImage(undefined, 0, 0); 208 @assert throws TypeError ctx.drawImage(0, 0, 0); 209 @assert throws TypeError ctx.drawImage("", 0, 0); 210 @assert throws TypeError ctx.drawImage(document.createElement('p'), 0, 0); 211 212- name: 2d.drawImage.floatsource 213 testing: 214 - 2d.drawImage.paint 215 images: 216 - green.png 217 code: | 218 ctx.drawImage(document.getElementById('green.png'), 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50); 219 @assert pixel 50,25 ==~ 0,255,0,255; 220 expected: green 221 222- name: 2d.drawImage.zerosource 223 desc: drawImage with zero-sized source rectangle draws nothing without exception 224 testing: 225 - 2d.drawImage.zerosource 226 images: 227 - red.png 228 code: | 229 ctx.fillStyle = '#0f0'; 230 ctx.fillRect(0, 0, 100, 50); 231 ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 1, 0, 0, 100, 50); 232 ctx.drawImage(document.getElementById('red.png'), 10, 10, 1, 0, 0, 0, 100, 50); 233 ctx.drawImage(document.getElementById('red.png'), 10, 10, 0, 0, 0, 0, 100, 50); 234 @assert pixel 50,25 ==~ 0,255,0,255; 235 expected: green 236 237- name: 2d.drawImage.zerosource.image 238 desc: drawImage with zero-sized source rectangle from image draws nothing without exception 239 testing: 240 - 2d.drawImage.zerosource 241 images: 242 - red-zerowidth.svg 243 - red-zeroheight.svg 244 - red-zerosize.svg 245 code: | 246 ctx.fillStyle = '#0f0'; 247 ctx.fillRect(0, 0, 100, 50); 248 ctx.drawImage(document.getElementById('red-zerowidth.svg'), 0, 0, 100, 50); 249 ctx.drawImage(document.getElementById('red-zeroheight.svg'), 0, 0, 100, 50); 250 ctx.drawImage(document.getElementById('red-zerosize.svg'), 0, 0, 100, 50); 251 @assert pixel 50,25 == 0,255,0,255; 252 expected: green 253 254- name: 2d.drawImage.negativesource 255 desc: Negative source width/height represents the correct rectangle 256 testing: 257 - 2d.drawImage.direction 258 mozilla: {throws: !!null ''} 259 images: 260 - ggrr-256x256.png 261 code: | 262 ctx.fillStyle = '#f00'; 263 ctx.fillRect(0, 0, 100, 50); 264 ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, -100, 50, 0, 0, 50, 50); 265 ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, -100, -50, 50, 0, 50, 50); 266 @assert pixel 1,1 ==~ 0,255,0,255; 267 @assert pixel 1,48 ==~ 0,255,0,255; 268 @assert pixel 98,1 ==~ 0,255,0,255; 269 @assert pixel 98,48 ==~ 0,255,0,255; 270 @assert pixel 48,1 ==~ 0,255,0,255; 271 @assert pixel 48,48 ==~ 0,255,0,255; 272 @assert pixel 51,1 ==~ 0,255,0,255; 273 @assert pixel 51,48 ==~ 0,255,0,255; 274 @assert pixel 25,25 ==~ 0,255,0,255; 275 @assert pixel 75,25 ==~ 0,255,0,255; 276 expected: green 277 278- name: 2d.drawImage.negativedest 279 desc: Negative destination width/height represents the correct rectangle 280 testing: 281 - 2d.drawImage.direction 282 mozilla: {throws: !!null ''} 283 images: 284 - ggrr-256x256.png 285 code: | 286 ctx.fillStyle = '#f00'; 287 ctx.fillRect(0, 0, 100, 50); 288 ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 78, 50, 50, 0, 50, 50, -50); 289 ctx.drawImage(document.getElementById('ggrr-256x256.png'), 100, 128, 50, -50, 100, 50, -50, -50); 290 @assert pixel 1,1 ==~ 0,255,0,255; 291 @assert pixel 1,48 ==~ 0,255,0,255; 292 @assert pixel 98,1 ==~ 0,255,0,255; 293 @assert pixel 98,48 ==~ 0,255,0,255; 294 @assert pixel 48,1 ==~ 0,255,0,255; 295 @assert pixel 48,48 ==~ 0,255,0,255; 296 @assert pixel 51,1 ==~ 0,255,0,255; 297 @assert pixel 51,48 ==~ 0,255,0,255; 298 @assert pixel 25,25 ==~ 0,255,0,255; 299 @assert pixel 75,25 ==~ 0,255,0,255; 300 expected: green 301 302- name: 2d.drawImage.negativedir 303 desc: Negative dimensions do not affect the direction of the image 304 testing: 305 - 2d.drawImage.direction 306 mozilla: {throws: !!null ''} 307 images: 308 - ggrr-256x256.png 309 code: | 310 ctx.fillStyle = '#f00'; 311 ctx.fillRect(0, 0, 100, 50); 312 ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 178, 50, -100, 0, 0, 50, 100); 313 ctx.drawImage(document.getElementById('ggrr-256x256.png'), 0, 78, 50, 100, 50, 100, 50, -100); 314 @assert pixel 1,1 ==~ 0,255,0,255; 315 @assert pixel 1,48 ==~ 0,255,0,255; 316 @assert pixel 98,1 ==~ 0,255,0,255; 317 @assert pixel 98,48 ==~ 0,255,0,255; 318 @assert pixel 48,1 ==~ 0,255,0,255; 319 @assert pixel 48,48 ==~ 0,255,0,255; 320 @assert pixel 51,1 ==~ 0,255,0,255; 321 @assert pixel 51,48 ==~ 0,255,0,255; 322 @assert pixel 25,25 ==~ 0,255,0,255; 323 @assert pixel 75,25 ==~ 0,255,0,255; 324 expected: green 325 326- name: 2d.drawImage.outsidesource 327 DISABLED: fix this to match the current spec (transparent black outside source) 328 testing: 329 - 2d.drawImage.outsidesource 330 mozilla: {throws: !!null ''} 331 images: 332 - green.png 333 - red.png 334 code: | 335 ctx.drawImage(document.getElementById('green.png'), 10.5, 10.5, 89.5, 39.5, 0, 0, 100, 50); 336 ctx.drawImage(document.getElementById('green.png'), 5.5, 5.5, -5.5, -5.5, 0, 0, 100, 50); 337 ctx.drawImage(document.getElementById('green.png'), 100, 50, -5, -5, 0, 0, 100, 50); 338 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), -0.001, 0, 100, 50, 0, 0, 100, 50); 339 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, -0.001, 100, 50, 0, 0, 100, 50); 340 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 100.001, 50, 0, 0, 100, 50); 341 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 100, 50.001, 0, 0, 100, 50); 342 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 50, 0, 50.001, 50, 0, 0, 100, 50); @moz-todo 343 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, -5, 5, 0, 0, 100, 50); 344 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 0, 0, 5, -5, 0, 0, 100, 50); 345 @assert throws INDEX_SIZE_ERR ctx.drawImage(document.getElementById('red.png'), 110, 60, -20, -20, 0, 0, 100, 50); 346 @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo 347 expected: green 348 349- name: 2d.drawImage.incomplete.nosrc 350 testing: 351 - 2d.drawImage.incomplete.image 352 mozilla: {throws: !!null ''} 353 code: | 354 ctx.fillStyle = '#0f0'; 355 ctx.fillRect(0, 0, 100, 50); 356 var img = new Image(); 357 ctx.drawImage(img, 0, 0); 358 @assert pixel 50,25 ==~ 0,255,0,255; 359 expected: green 360 361- name: 2d.drawImage.incomplete.immediate 362 testing: 363 - 2d.drawImage.incomplete.image 364 images: 365 - red.png 366 code: | 367 ctx.fillStyle = '#0f0'; 368 ctx.fillRect(0, 0, 100, 50); 369 var img = new Image(); 370 img.src = '../images/red.png'; 371 // This triggers the "update the image data" algorithm. 372 // The image will not go to the "completely available" state 373 // until a fetch task in the networking task source is processed, 374 // so the image must not be fully decodable yet: 375 ctx.drawImage(img, 0, 0); 376 @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo 377 expected: green 378 379- name: 2d.drawImage.incomplete.reload 380 testing: 381 - 2d.drawImage.incomplete.image 382 images: 383 - yellow.png 384 - red.png 385 code: | 386 ctx.fillStyle = '#0f0'; 387 ctx.fillRect(0, 0, 100, 50); 388 var img = document.getElementById('yellow.png'); 389 img.src = '../images/red.png'; 390 // This triggers the "update the image data" algorithm, 391 // and resets the image to the "unavailable" state. 392 // The image will not go to the "completely available" state 393 // until a fetch task in the networking task source is processed, 394 // so the image must not be fully decodable yet: 395 ctx.drawImage(img, 0, 0); 396 @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo 397 expected: green 398 399- name: 2d.drawImage.incomplete.emptysrc 400 testing: 401 - 2d.drawImage.incomplete.image 402 images: 403 - red.png 404 mozilla: {throws: !!null ''} 405 code: | 406 ctx.fillStyle = '#0f0'; 407 ctx.fillRect(0, 0, 100, 50); 408 var img = document.getElementById('red.png'); 409 img.src = ""; 410 ctx.drawImage(img, 0, 0); 411 @assert pixel 50,25 ==~ 0,255,0,255; 412 expected: green 413 414- name: 2d.drawImage.incomplete.removedsrc 415 testing: 416 - 2d.drawImage.incomplete.image 417 images: 418 - red.png 419 mozilla: {throws: !!null ''} 420 code: | 421 ctx.fillStyle = '#0f0'; 422 ctx.fillRect(0, 0, 100, 50); 423 var img = document.getElementById('red.png'); 424 img.removeAttribute('src'); 425 ctx.drawImage(img, 0, 0); 426 @assert pixel 50,25 ==~ 0,255,0,255; 427 expected: green 428 429- name: 2d.drawImage.broken 430 testing: 431 - 2d.drawImage.incomplete.image 432 images: 433 - broken.png 434 code: | 435 ctx.fillStyle = '#0f0'; 436 ctx.fillRect(0, 0, 100, 50); 437 var img = document.getElementById('broken.png'); 438 ctx.drawImage(img, 0, 0); 439 @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo 440 expected: green 441 442- name: 2d.drawImage.nonexistent 443 testing: 444 - 2d.drawImage.incomplete.image 445 images: 446 - not-found-at-all.png 447 code: | 448 var img = document.getElementById('not-found-at-all.png'); 449 @assert throws INVALID_STATE_ERR ctx.drawImage(img, 0, 0); 450 451- name: 2d.drawImage.zerocanvas 452 desc: drawImage with zero-sized canvas as the source shoud throw exception 453 testing: 454 - 2d.drawImage.zerocanvas 455 code: | 456 var canvas2 = document.createElement('canvas'); 457 canvas2.width = 0; 458 canvas2.height = 50; 459 @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0); 460 461 canvas2.width = 50; 462 canvas2.height = 0; 463 @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0); 464 465 canvas2.width = 0; 466 canvas2.height = 0; 467 @assert throws INVALID_STATE_ERR ctx.drawImage(canvas2, 0, 0); 468 469- name: 2d.drawImage.svg 470 desc: drawImage() of an SVG image 471 testing: 472 - 2d.drawImage.svg 473 images: 474 - green.svg 475 code: | 476 ctx.drawImage(document.getElementById('green.svg'), 0, 0); 477 @assert pixel 50,25 ==~ 0,255,0,255; 478 expected: green 479 480- name: 2d.drawImage.animated.gif 481 desc: drawImage() of an animated GIF draws the first frame 482 testing: 483 - 2d.drawImage.animated.image 484 images: 485 - anim-gr.gif 486 code: | 487 deferTest(); 488 step_timeout(t.step_func_done(function () { 489 ctx.drawImage(document.getElementById('anim-gr.gif'), 0, 0); 490 @assert pixel 50,25 ==~ 0,255,0,255; 491 }), 500); 492 expected: green 493 494- name: 2d.drawImage.animated.apng 495 desc: drawImage() of an APNG with no poster frame draws the first frame 496 testing: 497 - 2d.drawImage.animated.image 498 images: 499 - anim-gr.png 500 code: | 501 deferTest(); 502 step_timeout(t.step_func_done(function () { 503 ctx.drawImage(document.getElementById('anim-gr.png'), 0, 0); 504 @assert pixel 50,25 ==~ 0,255,0,255; 505 }), 500); 506 expected: green 507 508- name: 2d.drawImage.animated.poster 509 desc: drawImage() of an APNG draws the poster frame 510 testing: 511 - 2d.drawImage.animated.image 512 images: 513 - anim-poster-gr.png 514 code: | 515 ctx.drawImage(document.getElementById('anim-poster-gr.png'), 0, 0); 516 @assert pixel 50,25 ==~ 0,255,0,255; @moz-todo 517 expected: green 518 519- name: 2d.drawImage.path 520 testing: 521 - 2d.drawImage.unaffect 522 images: 523 - red.png 524 code: | 525 ctx.fillStyle = '#0f0'; 526 ctx.rect(0, 0, 100, 50); 527 ctx.drawImage(document.getElementById('red.png'), 0, 0); 528 ctx.fill(); 529 @assert pixel 50,25 ==~ 0,255,0,255; 530 expected: green 531 532- name: 2d.drawImage.transform 533 testing: 534 - 2d.drawImage.subject 535 images: 536 - red.png 537 code: | 538 ctx.fillStyle = '#0f0'; 539 ctx.fillRect(0, 0, 100, 50); 540 ctx.translate(100, 0); 541 ctx.drawImage(document.getElementById('red.png'), 0, 0); 542 @assert pixel 50,25 ==~ 0,255,0,255; 543 expected: green 544 545# TODO: drawImage shadows 546 547- name: 2d.drawImage.alpha 548 testing: 549 - 2d.drawImage.subject 550 images: 551 - red.png 552 code: | 553 ctx.fillStyle = '#0f0'; 554 ctx.fillRect(0, 0, 100, 50); 555 ctx.globalAlpha = 0; 556 ctx.drawImage(document.getElementById('red.png'), 0, 0); 557 @assert pixel 50,25 ==~ 0,255,0,255; 558 expected: green 559 560- name: 2d.drawImage.clip 561 testing: 562 - 2d.drawImage.subject 563 images: 564 - red.png 565 code: | 566 ctx.fillStyle = '#0f0'; 567 ctx.fillRect(0, 0, 100, 50); 568 ctx.rect(-10, -10, 1, 1); 569 ctx.clip(); 570 ctx.drawImage(document.getElementById('red.png'), 0, 0); 571 @assert pixel 50,25 ==~ 0,255,0,255; 572 expected: green 573 574- name: 2d.drawImage.composite 575 testing: 576 - 2d.drawImage.subject 577 images: 578 - red.png 579 code: | 580 ctx.fillStyle = '#0f0'; 581 ctx.fillRect(0, 0, 100, 50); 582 ctx.globalCompositeOperation = 'destination-over'; 583 ctx.drawImage(document.getElementById('red.png'), 0, 0); 584 @assert pixel 50,25 ==~ 0,255,0,255; 585 expected: green 586 587- name: 2d.drawImage.nowrap 588 desc: Stretched images do not get pixels wrapping around the edges 589 images: 590 - redtransparent.png 591 code: | 592 ctx.fillStyle = '#0f0'; 593 ctx.fillRect(0, 0, 100, 50); 594 ctx.drawImage(document.getElementById('redtransparent.png'), -1950, 0, 2000, 50); 595 @assert pixel 45,25 ==~ 0,255,0,255; 596 @assert pixel 50,25 ==~ 0,255,0,255; 597 @assert pixel 55,25 ==~ 0,255,0,255; 598 expected: green 599 600- name: 2d.drawImage.nonfinite 601 desc: drawImage() with Infinity/NaN is ignored 602 testing: 603 - 2d.nonfinite 604 images: 605 - red.png 606 code: | 607 ctx.fillStyle = '#0f0'; 608 ctx.fillRect(0, 0, 100, 50); 609 var red = document.getElementById('red.png'); 610 @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>); 611 @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>); 612 @nonfinite ctx.drawImage(<red>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <0 Infinity -Infinity NaN>, <100 Infinity -Infinity NaN>, <50 Infinity -Infinity NaN>); 613 @assert pixel 50,25 == 0,255,0,255; 614 expected: green 615 616 617 618
