| <html> |
| <body> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function shouldNotBeCalled() { |
| testFailed("Promise was rejected."); |
| finishJSTest(); |
| } |
| |
| var aCanvas = document.createElement('canvas'); |
| aCanvas.setAttribute('width', '10'); |
| aCanvas.setAttribute('height', '10'); |
| var aCtx = aCanvas.getContext('2d'); |
| aCtx.fillStyle = 'rgb(0, 255, 0)'; |
| aCtx.fillRect(0, 0, 20, 20); |
| |
| var bCanvas = document.createElement('canvas'); |
| bCanvas.setAttribute('width', '10'); |
| bCanvas.setAttribute('height', '10'); |
| var bCtx = bCanvas.getContext('2d'); |
| bCtx.fillStyle = 'red'; |
| bCtx.fillRect(0, 0, 20, 20); |
| |
| var canvas = document.createElement('canvas'); |
| canvas.setAttribute('width', '50'); |
| canvas.setAttribute('height', '30'); |
| var ctx = canvas.getContext('2d'); |
| document.body.appendChild(canvas); |
| |
| var image = new Image(); |
| image.onload = imageLoaded; |
| image.src = aCanvas.toDataURL(); |
| |
| var d; |
| |
| var imageLoaded = false; |
| var blobLoaded = false; |
| |
| function imageLoaded() { |
| imageLoaded = true; |
| loaded(); |
| } |
| |
| var xhr = new XMLHttpRequest(); |
| xhr.open("GET", 'resources/pattern.png'); |
| xhr.responseType = 'blob'; |
| xhr.send(); |
| xhr.onload = function() { |
| blob = xhr.response; |
| blobLoaded = true; |
| loaded(); |
| } |
| |
| function loaded() { |
| if (imageLoaded && blobLoaded) { |
| d = aCtx.getImageData(0, 0, 10, 10); |
| createImageBitmap(image).then(callback('Image')); |
| createImageBitmap(d).then(callback('Data')); |
| createImageBitmap(aCanvas).then(callback('Canvas')); |
| // The blob image has a green square at (x,y,w,h) = (10, 0, 10, 10). |
| createImageBitmap(blob, 10, 0, 10, 10).then(callback('Blob')); |
| } |
| } |
| |
| var imageBitmaps = {}; |
| |
| function callback(name) { |
| var name = name; |
| return function(imageBitmap) { |
| switch(name) { |
| case 'Image': |
| imageBitmaps.image = imageBitmap; |
| image.onload = function() { |
| ctx.drawImage(imageBitmaps.image, 0, 0); |
| createImageBitmap(imageBitmaps.image).then(callback('ImageBitmapImage')); |
| checkIfDone(); |
| }; |
| image.src = bCanvas.toDataURL(); |
| break; |
| case 'Data': |
| imageBitmaps.data = imageBitmap; |
| d = 0; |
| ctx.drawImage(imageBitmaps.data, 11, 0); |
| createImageBitmap(imageBitmaps.data).then(callback('ImageBitmapData')); |
| checkIfDone(); |
| break; |
| case 'Canvas': |
| imageBitmaps.canvas = imageBitmap; |
| aCtx.clearRect(0, 0, 10, 10); |
| ctx.drawImage(imageBitmaps.canvas, 22, 0); |
| createImageBitmap(imageBitmaps.canvas).then(callback('ImageBitmapCanvas')); |
| checkIfDone(); |
| break; |
| case 'Blob': |
| imageBitmaps.blob = imageBitmap; |
| blob = 0; |
| ctx.drawImage(imageBitmaps.blob, 33, 0); |
| createImageBitmap(imageBitmaps.blob).then(callback('ImageBitmapBlob')); |
| checkIfDone(); |
| break; |
| case 'ImageBitmapImage': |
| imageBitmaps.image = 0; |
| ctx.drawImage(imageBitmap, 0, 11); |
| checkIfDone(); |
| break; |
| case 'ImageBitmapData': |
| d = 0; |
| imageBitmaps.data = 0; |
| ctx.drawImage(imageBitmap, 11, 11); |
| checkIfDone(); |
| break; |
| case 'ImageBitmapCanvas': |
| aCtx.clearRect(0, 0, 10, 10); |
| imageBitmaps.canvas = 0; |
| ctx.drawImage(imageBitmap, 22, 11); |
| checkIfDone(); |
| break; |
| case 'ImageBitmapBlob': |
| aCtx.clearRect(0, 0, 10, 10); |
| imageBitmaps.blob = 0; |
| ctx.drawImage(imageBitmap, 33, 11); |
| checkIfDone(); |
| break; |
| } |
| } |
| } |
| |
| var checkNum = 0; |
| function checkIfDone() { |
| if (++checkNum == 8 && window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| </script> |
| <p>There should be 8 green squares displayed in a 2 row by 4 column grid.</p> |
| </body> |
| </html> |
