third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-recursive.html

   1 <html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 </head>
   5 <body>
   6 <script>
   7 description("Ensure correct behavior of drawImage with ImageBitmaps constructed from ImageBitmaps that are constructed from images (not pinned to memory) and canvases (pinned to memory).");
   8
   9 window.jsTestIsAsync = true;
  10
  11 function shouldBeFilled(x, y, w, h) {
  12     shouldBeGreen(x+2, y+2);
  13     shouldBeGreen(x+w-2, y+h-2);
  14     shouldBeGreen(x+w/2, y+h/2);
  15     shouldBeClear(x-2, y-2);
  16     shouldBeClear(x+w+2, y+h+2);
  17 }
  18 function shouldBeGreen(x, y) {
  19     d = ctx.getImageData(x, y, 1, 1).data;
  20     shouldBeTrue("d[0] == 0");
  21     shouldBeTrue("d[1] == 255");
  22     shouldBeTrue("d[2] == 0");
  23     shouldBeTrue("d[3] == 255");
  24 }
  25 function shouldBeClear(x, y) {
  26     // should be transparent black pixels
  27     d = ctx.getImageData(x, y, 1, 1).data;
  28     shouldBeTrue("d[0] == 0");
  29     shouldBeTrue("d[1] == 0");
  30     shouldBeTrue("d[2] == 0");
  31     shouldBeTrue("d[3] == 0");
  32 }
  33 function shouldNotBeCalled() {
  34     testFailed("Promise was rejected.");
  35     finishJSTest();
  36 }
  37 function clearContext(context) {
  38     context.clearRect(0, 0, 50, 50);
  39 }
  40
  41 var image;
  42 var imageWidth = 20;
  43 var imageHeight = 20;
  44
  45 var aCanvas = document.createElement("canvas");
  46 aCanvas.width = imageWidth;
  47 aCanvas.height = imageHeight;
  48 var aCtx = aCanvas.getContext("2d");
  49 aCtx.fillStyle = 'rgb(0, 255, 0)';
  50 aCtx.fillRect(0, 0, 20, 20);
  51
  52 var canvas = document.createElement("canvas");
  53 canvas.setAttribute("width", "50");
  54 canvas.setAttribute("height", "50");
  55 var ctx = canvas.getContext("2d");
  56
  57 image = new Image();
  58 image.onload = imageLoaded;
  59 image.src = aCanvas.toDataURL();
  60
  61 function imageLoaded() {
  62     var bitmapFromImage, bitmapFromCanvas;
  63     var p1 = createImageBitmap(image, -10, -10, 20, 20).then(function(imageBitmap) { bitmapFromImage = imageBitmap });
  64     var p2 = createImageBitmap(aCanvas, 10, 10, 20, 20).then(function(imageBitmap) { bitmapFromCanvas = imageBitmap });
  65     Promise.all([p1, p2]).then(function() {
  66         checkBitmaps(bitmapFromImage, bitmapFromCanvas);
  67     }, shouldNotBeCalled);
  68 }
  69
  70 function checkBitmaps(bitmapFromImage, bitmapFromCanvas) {
  71     var funcs = [];
  72     var p1 = createImageBitmap(bitmapFromImage).then(function(imageBitmap) {
  73         funcs[0] = checkDrawnToRect(imageBitmap, 10, 10, 10, 10);
  74     });
  75     var p2 = createImageBitmap(bitmapFromImage, -10, -10, 30, 30).then(function(imageBitmap) {
  76         funcs[1] = checkDrawnToRect(imageBitmap, 20, 20, 10, 10);
  77     });
  78     var p3 = createImageBitmap(bitmapFromImage, 10, 10, 20, 20).then(function(imageBitmap) {
  79         funcs[2] = checkDrawnToRect(imageBitmap, 0, 0, 10, 10);
  80     });
  81     var p4 = createImageBitmap(bitmapFromCanvas).then(function(imageBitmap) {
  82         funcs[3] = checkDrawnToRect(imageBitmap, 0, 0, 10, 10);
  83     });
  84     var p5 = createImageBitmap(bitmapFromCanvas, -15, -10, 35, 40).then(function(imageBitmap) {
  85         funcs[4] = checkDrawnToRect(imageBitmap, 15, 10, 10, 10);
  86     });
  87     var p6 = createImageBitmap(bitmapFromCanvas, 5, 5, 10, 10).then(function(imageBitmap) {
  88         funcs[5] = checkDrawnToRect(imageBitmap, 0, 0, 5, 5);
  89     });
  90     Promise.all([p1, p2, p3, p4, p5, p6]).then(function() {
  91         for (var i = 0; i < funcs.length; ++i)
  92             funcs[i]();
  93         finishJSTest();
  94     }, shouldNotBeCalled);
  95 }
  96
  97 function checkDrawnToRect(bitmap, x, y, w, h) {
  98     // x, y, w, h are the expected location of the green square
  99     var imageBitmap = bitmap;
 100     var x1 = x;
 101     var y1 = y;
 102     var w1 = w;
 103     var h1 = h;
 104     return function() {
 105         clearContext(ctx);
 106         ctx.drawImage(imageBitmap, 0, 0);
 107         shouldBeFilled(x1, y1, w1, h1);
 108
 109         clearContext(ctx);
 110         ctx.drawImage(imageBitmap, 10, 10, 40, 40);
 111         // scale up w and h as necessary
 112         var w2 = w1 * 40.0 / imageBitmap.width;
 113         var h2 = h1 * 40.0 / imageBitmap.height;
 114         // x and y are transformed
 115         var x2 = x1 * w2 / w1 + 10;
 116         var y2 = y1 * h2 / h1 + 10;
 117         shouldBeFilled(x2, y2, w2, h2);
 118
 119         clearContext(ctx);
 120         ctx.drawImage(imageBitmap, 0, 0, 50, 50);
 121         // scale up w and h as necessary
 122         var w3 = w1 * 50.0 / imageBitmap.width;
 123         var h3 = h1 * 50.0 / imageBitmap.height;
 124         // x and y are transformed
 125         var x3 = x1 * w3 / w1;
 126         var y3 = y1 * h3 / h1;
 127         shouldBeFilled(x3, y3, w3, h3);
 128
 129         clearContext(ctx);
 130         ctx.drawImage(imageBitmap, x1, y1, w1, h1, 0, 0, 50, 50);
 131         shouldBeFilled(0, 0, 50, 50);
 132     }
 133 }
 134
 135 </script>
 136 </body>
 137 </html>