src/third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-immutable.html

   1 <html>
   2 <body>
   3 <script>
   4 if (window.testRunner)
   5     window.testRunner.waitUntilDone();
   6
   7 function shouldNotBeCalled() {
   8     testFailed("Promise was rejected.");
   9     finishJSTest();
  10 }
  11
  12 var aCanvas = document.createElement('canvas');
  13 aCanvas.setAttribute('width', '10');
  14 aCanvas.setAttribute('height', '10');
  15 var aCtx = aCanvas.getContext('2d');
  16 aCtx.fillStyle = 'rgb(0, 255, 0)';
  17 aCtx.fillRect(0, 0, 20, 20);
  18
  19 var bCanvas = document.createElement('canvas');
  20 bCanvas.setAttribute('width', '10');
  21 bCanvas.setAttribute('height', '10');
  22 var bCtx = bCanvas.getContext('2d');
  23 bCtx.fillStyle = 'red';
  24 bCtx.fillRect(0, 0, 20, 20);
  25
  26 var canvas = document.createElement('canvas');
  27 canvas.setAttribute('width', '50');
  28 canvas.setAttribute('height', '30');
  29 var ctx = canvas.getContext('2d');
  30 document.body.appendChild(canvas);
  31
  32 var image = new Image();
  33 image.onload = imageLoaded;
  34 image.src = aCanvas.toDataURL();
  35
  36 var d;
  37
  38 var imageLoaded = false;
  39 var blobLoaded = false;
  40
  41 function imageLoaded() {
  42     imageLoaded = true;
  43     loaded();
  44 }
  45
  46 var xhr = new XMLHttpRequest();
  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
  69 function callback(name) {
  70     var name = name;
  71     return function(imageBitmap) {
  72         switch(name) {
  73         case 'Image':
  74             imageBitmaps.image = imageBitmap;
  75             image.onload = function() {
  76                 ctx.drawImage(imageBitmaps.image, 0, 0);
  77                 createImageBitmap(imageBitmaps.image).then(callback('ImageBitmapImage'));
  78                 checkIfDone();
  79             };
  80             image.src = bCanvas.toDataURL();
  81             break;
  82         case 'Data':
  83             imageBitmaps.data = imageBitmap;
  84             d = 0;
  85             ctx.drawImage(imageBitmaps.data, 11, 0);
  86             createImageBitmap(imageBitmaps.data).then(callback('ImageBitmapData'));
  87             checkIfDone();
  88             break;
  89         case 'Canvas':
  90             imageBitmaps.canvas = imageBitmap;
  91             aCtx.clearRect(0, 0, 10, 10);
  92             ctx.drawImage(imageBitmaps.canvas, 22, 0);
  93             createImageBitmap(imageBitmaps.canvas).then(callback('ImageBitmapCanvas'));
  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'));
 101             checkIfDone();
 102             break;
 103         case 'ImageBitmapImage':
 104             imageBitmaps.image = 0;
 105             ctx.drawImage(imageBitmap, 0, 11);
 106             checkIfDone();
 107             break;
 108         case 'ImageBitmapData':
 109             d = 0;
 110             imageBitmaps.data = 0;
 111             ctx.drawImage(imageBitmap, 11, 11);
 112             checkIfDone();
 113             break;
 114         case 'ImageBitmapCanvas':
 115             aCtx.clearRect(0, 0, 10, 10);
 116             imageBitmaps.canvas = 0;
 117             ctx.drawImage(imageBitmap, 22, 11);
 118             checkIfDone();
 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;
 126         }
 127     }
 128 }
 129
 130 var checkNum = 0;
 131 function checkIfDone() {
 132     if (++checkNum == 8 && window.testRunner)
 133         window.testRunner.notifyDone();
 134 }
 135
 136 </script>
 137 <p>There should be 8 green squares displayed in a 2 row by 4 column grid.</p>
 138 </body>
 139 </html>