| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <body> | 2 <body> |
| 3 <script> | 3 <script> |
| 4 if (window.testRunner) | 4 if (window.testRunner) |
| 5 window.testRunner.waitUntilDone(); | 5 window.testRunner.waitUntilDone(); |
| 6 | 6 |
| 7 function shouldNotBeCalled() { | 7 function shouldNotBeCalled() { |
| 8 testFailed("Promise was rejected."); | 8 testFailed("Promise was rejected."); |
| 9 finishJSTest(); | 9 finishJSTest(); |
| 10 } | 10 } |
| 11 | 11 |
| 12 var aCanvas = document.createElement('canvas'); | 12 var aCanvas = document.createElement('canvas'); |
| 13 aCanvas.setAttribute('width', '10'); | 13 aCanvas.setAttribute('width', '10'); |
| 14 aCanvas.setAttribute('height', '10'); | 14 aCanvas.setAttribute('height', '10'); |
| 15 var aCtx = aCanvas.getContext('2d'); | 15 var aCtx = aCanvas.getContext('2d'); |
| 16 aCtx.fillStyle = 'green'; | 16 aCtx.fillStyle = 'rgb(0, 255, 0)'; |
| 17 aCtx.fillRect(0, 0, 20, 20); | 17 aCtx.fillRect(0, 0, 20, 20); |
| 18 | 18 |
| 19 var bCanvas = document.createElement('canvas'); | 19 var bCanvas = document.createElement('canvas'); |
| 20 bCanvas.setAttribute('width', '10'); | 20 bCanvas.setAttribute('width', '10'); |
| 21 bCanvas.setAttribute('height', '10'); | 21 bCanvas.setAttribute('height', '10'); |
| 22 var bCtx = bCanvas.getContext('2d'); | 22 var bCtx = bCanvas.getContext('2d'); |
| 23 bCtx.fillStyle = 'red'; | 23 bCtx.fillStyle = 'red'; |
| 24 bCtx.fillRect(0, 0, 20, 20); | 24 bCtx.fillRect(0, 0, 20, 20); |
| 25 | 25 |
| 26 var canvas = document.createElement('canvas'); | 26 var canvas = document.createElement('canvas'); |
| 27 canvas.setAttribute('width', '40'); | 27 canvas.setAttribute('width', '50'); |
| 28 canvas.setAttribute('height', '30'); | 28 canvas.setAttribute('height', '30'); |
| 29 var ctx = canvas.getContext('2d'); | 29 var ctx = canvas.getContext('2d'); |
| 30 document.body.appendChild(canvas); | 30 document.body.appendChild(canvas); |
| 31 | 31 |
| 32 var image = new Image(); | 32 var image = new Image(); |
| 33 image.onload = imageLoaded; | 33 image.onload = imageLoaded; |
| 34 image.src = aCanvas.toDataURL(); | 34 image.src = aCanvas.toDataURL(); |
| 35 | 35 |
| 36 var d; | 36 var d; |
| 37 | 37 |
| 38 var imageLoaded = false; |
| 39 var blobLoaded = false; |
| 40 |
| 38 function imageLoaded() { | 41 function imageLoaded() { |
| 39 d = aCtx.getImageData(0, 0, 10, 10); | 42 imageLoaded = true; |
| 40 createImageBitmap(image).then(callback('Image'), shouldNotBeCalled); | 43 loaded(); |
| 41 createImageBitmap(d).then(callback('Data'), shouldNotBeCalled); | |
| 42 createImageBitmap(aCanvas).then(callback('Canvas'), shouldNotBeCalled); | |
| 43 } | 44 } |
| 44 | 45 |
| 45 var imageBitmapImage, imageBitmapData, imageBitmapCanvas; | 46 var xhr = new XMLHttpRequest(); |
| 46 var i = 0; | 47 xhr.open("GET", 'resources/pattern.png'); |
| 48 xhr.responseType = 'blob'; |
| 49 xhr.send(); |
| 50 xhr.onload = function() { |
| 51 blob = xhr.response; |
| 52 blobLoaded = true; |
| 53 loaded(); |
| 54 } |
| 55 |
| 56 function loaded() { |
| 57 if (imageLoaded && blobLoaded) { |
| 58 d = aCtx.getImageData(0, 0, 10, 10); |
| 59 createImageBitmap(image).then(callback('Image')); |
| 60 createImageBitmap(d).then(callback('Data')); |
| 61 createImageBitmap(aCanvas).then(callback('Canvas')); |
| 62 // The blob image has a green square at (x,y,w,h) = (10, 0, 10, 10). |
| 63 createImageBitmap(blob, 10, 0, 10, 10).then(callback('Blob')); |
| 64 } |
| 65 } |
| 66 |
| 67 var imageBitmaps = {}; |
| 68 |
| 47 function callback(name) { | 69 function callback(name) { |
| 48 var name = name; | 70 var name = name; |
| 49 return function(imageBitmap) { | 71 return function(imageBitmap) { |
| 50 switch(name) { | 72 switch(name) { |
| 51 case 'Image': | 73 case 'Image': |
| 52 imageBitmapImage = imageBitmap; | 74 imageBitmaps.image = imageBitmap; |
| 53 image.onload = draw(imageBitmapImage); | 75 image.onload = function() { |
| 76 ctx.drawImage(imageBitmaps.image, 0, 0); |
| 77 checkIfDone(); |
| 78 }; |
| 54 image.src = bCanvas.toDataURL(); | 79 image.src = bCanvas.toDataURL(); |
| 55 createImageBitmap(imageBitmapImage).then(callback('ImageBitmapImage'
, shouldNotBeCalled)); | 80 createImageBitmap(imageBitmaps.image).then(callback('ImageBitmapImag
e')); |
| 56 break; | 81 break; |
| 57 case 'Data': | 82 case 'Data': |
| 58 imageBitmapData = imageBitmap; | 83 imageBitmaps.data = imageBitmap; |
| 59 d = 0; | 84 d = 0; |
| 60 ctx.drawImage(imageBitmapData, 11, 0); | 85 ctx.drawImage(imageBitmaps.data, 11, 0); |
| 61 createImageBitmap(imageBitmapData).then(callback('ImageBitmapData',
shouldNotBeCalled)); | 86 createImageBitmap(imageBitmaps.data).then(callback('ImageBitmapData'
)); |
| 62 checkIfDone(); | 87 checkIfDone(); |
| 63 break; | 88 break; |
| 64 case 'Canvas': | 89 case 'Canvas': |
| 65 imageBitmapCanvas = imageBitmap; | 90 imageBitmaps.canvas = imageBitmap; |
| 66 aCtx.clearRect(0, 0, 10, 10); | 91 aCtx.clearRect(0, 0, 10, 10); |
| 67 ctx.drawImage(imageBitmapCanvas, 22, 0); | 92 ctx.drawImage(imageBitmaps.canvas, 22, 0); |
| 68 createImageBitmap(imageBitmapCanvas).then(callback('ImageBitmapCanva
s', shouldNotBeCalled)); | 93 createImageBitmap(imageBitmaps.canvas).then(callback('ImageBitmapCan
vas')); |
| 94 checkIfDone(); |
| 95 break; |
| 96 case 'Blob': |
| 97 imageBitmaps.blob = imageBitmap; |
| 98 blob = 0; |
| 99 ctx.drawImage(imageBitmaps.blob, 33, 0); |
| 100 createImageBitmap(imageBitmaps.blob).then(callback('ImageBitmapBlob'
)); |
| 69 checkIfDone(); | 101 checkIfDone(); |
| 70 break; | 102 break; |
| 71 case 'ImageBitmapImage': | 103 case 'ImageBitmapImage': |
| 72 imageBitmapImage = 0; | 104 imageBitmaps.image = 0; |
| 73 ctx.drawImage(imageBitmap, 0, 11); | 105 ctx.drawImage(imageBitmap, 0, 11); |
| 74 checkIfDone(); | 106 checkIfDone(); |
| 75 break; | 107 break; |
| 76 case 'ImageBitmapData': | 108 case 'ImageBitmapData': |
| 77 d = 0; | 109 d = 0; |
| 78 imageBitmapData = 0; | 110 imageBitmaps.data = 0; |
| 79 ctx.drawImage(imageBitmap, 11, 11); | 111 ctx.drawImage(imageBitmap, 11, 11); |
| 80 checkIfDone(); | 112 checkIfDone(); |
| 81 break; | 113 break; |
| 82 case 'ImageBitmapCanvas': | 114 case 'ImageBitmapCanvas': |
| 83 aCtx.clearRect(0, 0, 10, 10); | 115 aCtx.clearRect(0, 0, 10, 10); |
| 84 imageBitmapCanvas = 0; | 116 imageBitmaps.canvas = 0; |
| 85 ctx.drawImage(imageBitmap, 22, 11); | 117 ctx.drawImage(imageBitmap, 22, 11); |
| 86 checkIfDone(); | 118 checkIfDone(); |
| 87 break; | 119 break; |
| 120 case 'ImageBitmapBlob': |
| 121 aCtx.clearRect(0, 0, 10, 10); |
| 122 imageBitmaps.blob = 0; |
| 123 ctx.drawImage(imageBitmap, 33, 11); |
| 124 checkIfDone(); |
| 125 break; |
| 88 } | 126 } |
| 89 } | 127 } |
| 90 } | 128 } |
| 91 | 129 |
| 92 function draw(imageBitmap) { | 130 var checkNum = 0; |
| 93 ctx.drawImage(imageBitmap, 0, 0); | |
| 94 checkIfDone(); | |
| 95 } | |
| 96 | |
| 97 function checkIfDone() { | 131 function checkIfDone() { |
| 98 if (++i == 6 && window.testRunner) | 132 if (++checkNum == 8 && window.testRunner) |
| 99 window.testRunner.notifyDone(); | 133 window.testRunner.notifyDone(); |
| 100 } | 134 } |
| 101 | 135 |
| 102 </script> | 136 </script> |
| 103 <p>There should be 6 green squares displayed in a 2 row by 3 column grid.</p> | 137 <p>There should be 8 green squares displayed in a 2 row by 4 column grid.</p> |
| 104 </body> | 138 </body> |
| 105 </html> | 139 </html> |
| OLD | NEW |