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