third_party/WebKit/LayoutTests/fast/canvas/canvas-createImageBitmap-createPattern.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 createPattern with ImageBitmaps.");
  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 shouldNotBeCalled() {
  29     testFailed("createImageBitmap promise rejected.");
  30     finishJSTest();
  31 }
  32
  33 function shouldBeRed(x, y) {
  34     d = ctx.getImageData(x, y, 1, 1).data;
  35     shouldBeTrue("d[0] == 255");
  36     shouldBeTrue("d[1] == 0");
  37     shouldBeTrue("d[2] == 0");
  38     shouldBeTrue("d[3] == 255");
  39 }
  40
  41 function shouldBeGreen(x, y) {
  42     d = ctx.getImageData(x, y, 1, 1).data;
  43     shouldBeTrue("d[0] == 0");
  44     shouldBeTrue("d[1] == 255");
  45     shouldBeTrue("d[2] == 0");
  46     shouldBeTrue("d[3] == 255");
  47 }
  48
  49 function shouldBeBlue(x, y) {
  50     d = ctx.getImageData(x, y, 1, 1).data;
  51     shouldBeTrue("d[0] == 0");
  52     shouldBeTrue("d[1] == 0");
  53     shouldBeTrue("d[2] == 255");
  54     shouldBeTrue("d[3] == 255");
  55 }
  56
  57 function shouldBeBlack(x, y) {
  58     d = ctx.getImageData(x, y, 1, 1).data;
  59     shouldBeTrue("d[0] == 0");
  60     shouldBeTrue("d[1] == 0");
  61     shouldBeTrue("d[2] == 0");
  62     shouldBeTrue("d[3] == 255");
  63 }
  64
  65 function shouldBeClear(x, y) {
  66     // should be transparent black pixels
  67     d = ctx.getImageData(x, y, 1, 1).data;
  68     shouldBeTrue("d[0] == 0");
  69     shouldBeTrue("d[1] == 0");
  70     shouldBeTrue("d[2] == 0");
  71     shouldBeTrue("d[3] == 0");
  72 }
  73
  74 var checks = { red: shouldBeRed,
  75                green: shouldBeGreen,
  76                blue: shouldBeBlue,
  77                black: shouldBeBlack,
  78                clear: shouldBeClear };
  79
  80 function checkQuad(x, y, top_left, top_right, bottom_left, bottom_right) {
  81     checks[top_left](x, y);
  82     checks[top_right](x + 1, y);
  83     checks[bottom_left](x, y + 1);
  84     checks[bottom_right](x + 1, y + 1);
  85 }
  86
  87 function drawPattern(ctx) {
  88     // Draw a four-color pattern
  89     ctx.beginPath();
  90     ctx.fillStyle = "rgb(255, 0, 0)";
  91     ctx.fillRect(0, 0, 10, 10);
  92     ctx.fillStyle = "rgb(0, 255, 0)";
  93     ctx.fillRect(10, 0, 10, 10);
  94     ctx.fillStyle = "rgb(0, 0, 255)";
  95     ctx.fillRect(0, 10, 10, 10);
  96     ctx.fillStyle = "rgb(0, 0, 0)";
  97     ctx.fillRect(10, 10, 10, 10);
  98 }
  99
 100 function clearContext(context) {
 101     context.clearRect(0, 0, 50, 50);
 102 }
 103
 104 var bitmap;
 105 var image;
 106 var testBitmap; // this is an ImageBitmap that is uncropped. We use this to test createImageBitmap(testBitmap)
 107 var d;          // image.imageData
 108 var elements;
 109
 110 var imageWidth = 20;
 111 var imageHeight = 20;
 112
 113 // Draw to an auxillary canvas.
 114 var aCanvas = document.createElement("canvas");
 115 aCanvas.width = imageWidth;
 116 aCanvas.height = imageHeight;
 117 var aCtx = aCanvas.getContext("2d");
 118 drawPattern(aCtx);
 119
 120 var canvas = document.createElement("canvas");
 121 canvas.setAttribute("width", "50");
 122 canvas.setAttribute("height", "50");
 123 var ctx = canvas.getContext("2d");
 124
 125 image = new Image();
 126 image.onload = imageLoaded;
 127 image.src = aCanvas.toDataURL();
 128
 129 var imageLoaded = false;
 130 var imageBitmapLoaded = false;
 131
 132 function imageLoaded() {
 133     createImageBitmap(image).then(imageBitmapLoadedCallback, shouldNotBeCalled);
 134     d = aCtx.getImageData(0, 0, 20, 20);
 135     imageLoaded = true;
 136     loaded();
 137 }
 138
 139 function imageBitmapLoadedCallback(imageBitmap) {
 140     testBitmap = imageBitmap;
 141
 142     shouldBe("testBitmap.width", "imageWidth");
 143     shouldBe("testBitmap.height", "imageHeight");
 144
 145     // width and height are readonly
 146     testBitmap.width = 42;
 147     testBitmap.height = 42;
 148     shouldBe("testBitmap.width", "imageWidth");
 149     shouldBe("testBitmap.height", "imageHeight");
 150
 151     imageBitmapLoaded = true;
 152     loaded();
 153 }
 154
 155 function loaded() {
 156     if (imageLoaded && imageBitmapLoaded) {
 157         ctx.fillStyle = ctx.createPattern(testBitmap, "repeat");
 158         ctx.fillRect(10, 10, 30, 30);
 159
 160         // Check each pixel quad at each corner.  The filled pattern
 161         // is 3x3 squares of different colors, so there are four rows
 162         // of four corners.
 163
 164         checkQuad(9, 9, "clear", "clear", "clear", "black");
 165         checkQuad(19, 9, "clear", "clear", "black", "blue");
 166         checkQuad(29, 9, "clear", "clear", "blue", "black");
 167         checkQuad(39, 9, "clear", "clear", "black", "clear");
 168
 169         checkQuad(9, 19, "clear", "black", "clear", "green");
 170         checkQuad(19, 19, "black", "blue", "green", "red");
 171         checkQuad(29, 19, "blue", "black", "red", "green");
 172         checkQuad(39, 19, "black", "clear", "green", "clear");
 173
 174         checkQuad(9, 29, "clear", "green", "clear", "black");
 175         checkQuad(19, 29, "green", "red", "black", "blue");
 176         checkQuad(29, 29, "red", "green", "blue", "black");
 177         checkQuad(39, 29, "green", "clear", "black", "clear");
 178
 179         checkQuad(9, 39, "clear", "black", "clear", "clear");
 180         checkQuad(19, 39, "black", "blue", "clear", "clear");
 181         checkQuad(29, 39, "blue", "black", "clear", "clear");
 182         checkQuad(39, 39, "black", "clear", "clear", "clear");
 183
 184         finishJSTest();
 185     }
 186 }
 187 </script>
 188 </body>
 189 </html>