third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-drawImage-video.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 </head>
   6 <body>
   7 <script>
   8
   9 description("Ensure correct behavior of drawImage with ImageBitmaps from video elements.");
  10 window.jsTestIsAsync = true;
  11
  12 function jsWrapperClass(node)
  13 {
  14     // returns the ClassName of node
  15     if (!node)
  16         return "[null]";
  17     var string = Object.prototype.toString.apply(node);
  18
  19     // string will be of the form [object ClassName]
  20     return string.substr(8, string.length - 9);
  21 }
  22
  23 function shouldBeType(expression, className)
  24 {
  25     shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
  26 }
  27
  28 function shouldBeOpaque(x, y) {
  29     d = ctx.getImageData(x, y, 1, 1).data;
  30     shouldBeTrue("d[3] == 255");
  31 }
  32
  33 function shouldBeClear(x, y) {
  34     // should be transparent black pixels
  35     d = ctx.getImageData(x, y, 1, 1).data;
  36     shouldBeTrue("d[0] == 0");
  37     shouldBeTrue("d[1] == 0");
  38     shouldBeTrue("d[2] == 0");
  39     shouldBeTrue("d[3] == 0");
  40 }
  41
  42 function clearContext() {
  43     ctx.clearRect(0, 0, 500, 500);
  44 }
  45
  46 var bitmap;
  47 var video;
  48
  49 var canvas = document.createElement("canvas");
  50 canvas.setAttribute("width", "500");
  51 canvas.setAttribute("height", "500");
  52 var ctx = canvas.getContext("2d");
  53
  54 video = document.createElement("video");
  55 video.addEventListener("canplaythrough", videoLoaded, false);
  56 video.src = "../../compositing/resources/video.ogv";
  57
  58 function videoLoaded() {
  59     var imageBitmaps = {};
  60     var p1 = createImageBitmap(video).then(function (image) { imageBitmaps.noCrop = image });
  61     var p2 = createImageBitmap(video,  0, 0, 100, 100).then(function (image) { imageBitmaps.crop = image });
  62     var p3 = createImageBitmap(video,  50, 50, 100, 100).then(function (image) { imageBitmaps.cropRight = image });
  63     var p4 = createImageBitmap(video,  100, 100, 100, 100).then(function (image) { imageBitmaps.cropCenter = image });
  64     var p5 = createImageBitmap(video, -100, -100, 600, 600).then(function (image) { imageBitmaps.overCrop = image });
  65     var p6 = createImageBitmap(video, 100, 100, 500, 500).then(function (image) { imageBitmaps.overCropRight = image });
  66     var p7 = createImageBitmap(video, 100, 100, -100, -100).then(function (image) { imageBitmaps.negativeCrop = image });
  67     var p8 = createImageBitmap(video, -300, -300, 300, 300).then(function (image) { imageBitmaps.empty = image });
  68     var p9 = createImageBitmap(video, 400, 300, 300, 300).then(function (image) { imageBitmaps.emptyTwo = image });
  69
  70     Promise.all([p1, p2, p3, p4, p5, p6, p7, p8, p9]).then(function() {
  71         checkNoCrop(imageBitmaps.noCrop);
  72         checkCrop(imageBitmaps.crop);
  73         checkCrop(imageBitmaps.cropRight);
  74         checkCrop(imageBitmaps.cropCenter);
  75         checkOverCrop(imageBitmaps.overCrop);
  76         checkOverCropRight(imageBitmaps.overCropRight);
  77         checkCrop(imageBitmaps.negativeCrop);
  78         checkEmpty(imageBitmaps.empty);
  79         checkEmpty(imageBitmaps.emptyTwo);
  80         finishJSTest();
  81     }, function() {
  82         testFailed("Promise was rejected.");
  83         finishJSTest();
  84     });
  85 }
  86
  87 function checkNoCrop(imageBitmap) {
  88     bitmap = imageBitmap;
  89     shouldBeType("bitmap", "ImageBitmap");
  90
  91     // should be drawn to (0, 0), (352, 288)
  92     clearContext();
  93     ctx.drawImage(imageBitmap, 0, 0);
  94     shouldBeOpaque(10, 10);
  95     shouldBeOpaque(100, 100);
  96     shouldBeOpaque(300, 50);
  97     shouldBeOpaque(350, 280);
  98     shouldBeClear(360, 40);
  99     shouldBeClear(80, 290);
 100
 101     // shrunk to (0, 0), (100, 100)
 102     clearContext(ctx);
 103     ctx.drawImage(imageBitmap, 0, 0, 100, 100);
 104     shouldBeOpaque(40, 40);
 105     shouldBeOpaque(90, 90);
 106     shouldBeClear(10, 110);
 107     shouldBeClear(110, 10);
 108     shouldBeClear(110, 110);
 109
 110     // shrunk to (100, 100), (250, 200)
 111     clearContext(ctx);
 112     ctx.drawImage(imageBitmap, 100, 100, 150, 100);
 113     shouldBeClear(90, 90);
 114     shouldBeOpaque(110, 110);
 115     shouldBeOpaque(240, 190);
 116     shouldBeClear(110, 210);
 117     shouldBeClear(260, 110);
 118     shouldBeClear(260, 210);
 119
 120     // black should be drawn to (100, 100), (200, 200)
 121     clearContext(ctx);
 122     ctx.drawImage(imageBitmap, 100, 100, 100, 100, 100, 100, 100, 100);
 123     shouldBeClear(90, 90);
 124     shouldBeOpaque(110, 110);
 125     shouldBeOpaque(190, 190);
 126     shouldBeClear(10, 210);
 127     shouldBeClear(210, 10);
 128     shouldBeClear(210, 210);
 129
 130     // nothing should be drawn
 131     clearContext(ctx);
 132     ctx.drawImage(imageBitmap, 400, 300, 200, 200, 100, 100, 100, 100);
 133     shouldBeClear(10, 10);
 134     shouldBeClear(80, 80);
 135     shouldBeClear(150, 150);
 136     shouldBeClear(210, 210);
 137 }
 138
 139 function checkCrop(imageBitmap) {
 140     bitmap = imageBitmap;
 141     shouldBeType("bitmap", "ImageBitmap");
 142
 143     // should be drawn to (0, 0), (100, 100)
 144     clearContext();
 145     ctx.drawImage(imageBitmap, 0, 0);
 146     shouldBeOpaque(10, 10);
 147     shouldBeOpaque(90, 90);
 148     shouldBeClear(110, 110);
 149     shouldBeClear(210, 210);
 150 }
 151
 152 function checkOverCrop(imageBitmap) {
 153     bitmap = imageBitmap;
 154     shouldBeType("bitmap", "ImageBitmap");
 155
 156     // should be drawn to (100, 100), (452, 388)
 157     clearContext();
 158     ctx.drawImage(imageBitmap, 0, 0);
 159     shouldBeClear(10, 10);
 160     shouldBeClear(90, 90);
 161     shouldBeOpaque(110, 110);
 162     shouldBeOpaque(300, 200);
 163     shouldBeOpaque(450, 380);
 164     shouldBeClear(500, 50);
 165     shouldBeClear(50, 350);
 166     shouldBeClear(460, 390);
 167
 168     // should be drawn to (50, 50), (226, 194)
 169     clearContext();
 170     ctx.drawImage(imageBitmap, 0, 0, 300, 300);
 171     shouldBeClear(10, 10);
 172     shouldBeClear(40, 40);
 173     shouldBeOpaque(60, 60);
 174     shouldBeOpaque(220, 190);
 175     shouldBeClear(230, 50);
 176     shouldBeClear(50, 200);
 177     shouldBeClear(230, 200);
 178 }
 179
 180 function checkOverCropRight(imageBitmap) {
 181     bitmap = imageBitmap;
 182     shouldBeType("bitmap", "ImageBitmap");
 183
 184     // should be drawn to (0, 0), (252, 188)
 185     clearContext();
 186     ctx.drawImage(imageBitmap, 0, 0);
 187     shouldBeOpaque(10, 10);
 188     shouldBeOpaque(100, 100);
 189     shouldBeOpaque(200, 50);
 190     shouldBeOpaque(50, 150);
 191     shouldBeOpaque(250, 180);
 192     shouldBeClear(360, 40);
 193     shouldBeClear(80, 190);
 194     shouldBeClear(260, 190);
 195 }
 196
 197 function checkEmpty(imageBitmap) {
 198     bitmap = imageBitmap;
 199     shouldBeType("bitmap", "ImageBitmap");
 200
 201     // nothing should be drawn
 202     clearContext();
 203     ctx.drawImage(imageBitmap, 0, 0);
 204     shouldBeClear(10, 10);
 205     shouldBeClear(90, 90);
 206     shouldBeClear(110, 110);
 207     shouldBeClear(210, 210);
 208 }
 209
 210 </script>
 211 </body>
 212 </html>