tests/test.display.js

   1 // requires local modules: util, base64, display
   2 // requires test modules: assertions
   3 /* jshint expr: true */
   4 var expect = chai.expect;
   5
   6 describe('Display/Canvas Helper', function () {
   7     var checked_data = [
   8         0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
   9         0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
  10         0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
  11         0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255
  12     ];
  13     checked_data = new Uint8Array(checked_data);
  14
  15     var basic_data = [0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255];
  16     basic_data = new Uint8Array(basic_data);
  17
  18     function make_image_canvas (input_data) {
  19         var canvas = document.createElement('canvas');
  20         canvas.width = 4;
  21         canvas.height = 4;
  22         var ctx = canvas.getContext('2d');
  23         var data = ctx.createImageData(4, 4);
  24         for (var i = 0; i < checked_data.length; i++) { data.data[i] = input_data[i]; }
  25         ctx.putImageData(data, 0, 0);
  26         return canvas;
  27     }
  28
  29     describe('checking for cursor uri support', function () {
  30         beforeEach(function () {
  31             this._old_change_cursor = Display.changeCursor;
  32         });
  33
  34         it('should disable cursor URIs if there is no support', function () {
  35             Display.changeCursor = function(target) {
  36                 target.style.cursor = undefined;
  37             };
  38             var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false });
  39             expect(display._cursor_uri).to.be.false;
  40         });
  41
  42         it('should enable cursor URIs if there is support', function () {
  43             Display.changeCursor = function(target) {
  44                 target.style.cursor = 'pointer';
  45             };
  46             var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false });
  47             expect(display._cursor_uri).to.be.true;
  48         });
  49
  50         it('respect the cursor_uri option if there is support', function () {
  51             Display.changeCursor = function(target) {
  52                 target.style.cursor = 'pointer';
  53             };
  54             var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false, cursor_uri: false });
  55             expect(display._cursor_uri).to.be.false;
  56         });
  57
  58         afterEach(function () {
  59             Display.changeCursor = this._old_change_cursor;
  60         });
  61     });
  62
  63     describe('viewport handling', function () {
  64         var display;
  65         beforeEach(function () {
  66             display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true });
  67             display.resize(5, 5);
  68             display.viewportChangeSize(3, 3);
  69             display.viewportChangePos(1, 1);
  70             display.getCleanDirtyReset();
  71         });
  72
  73         it('should take viewport location into consideration when drawing images', function () {
  74             display.set_width(4);
  75             display.set_height(4);
  76             display.viewportChangeSize(2, 2);
  77             display.drawImage(make_image_canvas(basic_data), 1, 1);
  78
  79             var expected = new Uint8Array(16);
  80             var i;
  81             for (i = 0; i < 8; i++) { expected[i] = basic_data[i]; }
  82             for (i = 8; i < 16; i++) { expected[i] = 0; }
  83             expect(display).to.have.displayed(expected);
  84         });
  85
  86         it('should redraw the left side when shifted left', function () {
  87             display.viewportChangePos(-1, 0);
  88             var cdr = display.getCleanDirtyReset();
  89             expect(cdr.cleanBox).to.deep.equal({ x: 1, y: 1, w: 2, h: 3 });
  90             expect(cdr.dirtyBoxes).to.have.length(1);
  91             expect(cdr.dirtyBoxes[0]).to.deep.equal({ x: 0, y: 1, w: 2, h: 3 });
  92         });
  93
  94         it('should redraw the right side when shifted right', function () {
  95             display.viewportChangePos(1, 0);
  96             var cdr = display.getCleanDirtyReset();
  97             expect(cdr.cleanBox).to.deep.equal({ x: 2, y: 1, w: 2, h: 3 });
  98             expect(cdr.dirtyBoxes).to.have.length(1);
  99             expect(cdr.dirtyBoxes[0]).to.deep.equal({ x: 4, y: 1, w: 1, h: 3 });
 100         });
 101
 102         it('should redraw the top part when shifted up', function () {
 103             display.viewportChangePos(0, -1);
 104             var cdr = display.getCleanDirtyReset();
 105             expect(cdr.cleanBox).to.deep.equal({ x: 1, y: 1, w: 3, h: 2 });
 106             expect(cdr.dirtyBoxes).to.have.length(1);
 107             expect(cdr.dirtyBoxes[0]).to.deep.equal({ x: 1, y: 0, w: 3, h: 1 });
 108         });
 109
 110         it('should redraw the bottom part when shifted down', function () {
 111             display.viewportChangePos(0, 1);
 112             var cdr = display.getCleanDirtyReset();
 113             expect(cdr.cleanBox).to.deep.equal({ x: 1, y: 2, w: 3, h: 2 });
 114             expect(cdr.dirtyBoxes).to.have.length(1);
 115             expect(cdr.dirtyBoxes[0]).to.deep.equal({ x: 1, y: 4, w: 3, h: 1 });
 116         });
 117
 118         it('should reset the entire viewport to being clean after calculating the clean/dirty boxes', function () {
 119             display.viewportChangePos(0, 1);
 120             var cdr1 = display.getCleanDirtyReset();
 121             var cdr2 = display.getCleanDirtyReset();
 122             expect(cdr1).to.not.deep.equal(cdr2);
 123             expect(cdr2.cleanBox).to.deep.equal({ x: 1, y: 2, w: 3, h: 3 });
 124             expect(cdr2.dirtyBoxes).to.be.empty;
 125         });
 126
 127         it('should simply mark the whole display area as dirty if not using viewports', function () {
 128             display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: false });
 129             display.resize(5, 5);
 130             var cdr = display.getCleanDirtyReset();
 131             expect(cdr.cleanBox).to.deep.equal({ x: 0, y: 0, w: 0, h: 0 });
 132             expect(cdr.dirtyBoxes).to.have.length(1);
 133             expect(cdr.dirtyBoxes[0]).to.deep.equal({ x: 0, y: 0, w: 5, h: 5 });
 134         });
 135     });
 136
 137     describe('resizing', function () {
 138         var display;
 139         beforeEach(function () {
 140             display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true });
 141             display.resize(4, 3);
 142         });
 143
 144         it('should change the size of the logical canvas', function () {
 145             display.resize(5, 7);
 146             expect(display._fb_width).to.equal(5);
 147             expect(display._fb_height).to.equal(7);
 148         });
 149
 150         it('should update the viewport dimensions', function () {
 151             sinon.spy(display, 'viewportChangeSize');
 152             display.resize(2, 2);
 153             expect(display.viewportChangeSize).to.have.been.calledOnce;
 154         });
 155     });
 156
 157     describe('drawing', function () {
 158
 159         // TODO(directxman12): improve the tests for each of the drawing functions to cover more than just the
 160         //                     basic cases
 161         function drawing_tests (pref_js) {
 162             var display;
 163             beforeEach(function () {
 164                 display = new Display({ target: document.createElement('canvas'), prefer_js: pref_js });
 165                 display.resize(4, 4);
 166             });
 167
 168             it('should clear the screen on #clear without a logo set', function () {
 169                 display.fillRect(0, 0, 4, 4, [0x00, 0x00, 0xff]);
 170                 display._logo = null;
 171                 display.clear();
 172                 display.resize(4, 4);
 173                 var empty = [];
 174                 for (var i = 0; i < 4 * display._fb_width * display._fb_height; i++) { empty[i] = 0; }
 175                 expect(display).to.have.displayed(new Uint8Array(empty));
 176             });
 177
 178             it('should draw the logo on #clear with a logo set', function (done) {
 179                 display._logo = { width: 4, height: 4, data: make_image_canvas(checked_data).toDataURL() };
 180                 display._drawCtx._act_drawImg = display._drawCtx.drawImage;
 181                 display._drawCtx.drawImage = function (img, x, y) {
 182                     this._act_drawImg(img, x, y);
 183                     expect(display).to.have.displayed(checked_data);
 184                     done();
 185                 };
 186                 display.clear();
 187                 expect(display._fb_width).to.equal(4);
 188                 expect(display._fb_height).to.equal(4);
 189             });
 190
 191             it('should support filling a rectangle with particular color via #fillRect', function () {
 192                 display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
 193                 display.fillRect(0, 0, 2, 2, [0xff, 0, 0]);
 194                 display.fillRect(2, 2, 2, 2, [0xff, 0, 0]);
 195                 expect(display).to.have.displayed(checked_data);
 196             });
 197
 198             it('should support copying an portion of the canvas via #copyImage', function () {
 199                 display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
 200                 display.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]);
 201                 display.copyImage(0, 0, 2, 2, 2, 2);
 202                 expect(display).to.have.displayed(checked_data);
 203             });
 204
 205             it('should support drawing tile data with a background color and sub tiles', function () {
 206                 display.startTile(0, 0, 4, 4, [0, 0xff, 0]);
 207                 display.subTile(0, 0, 2, 2, [0xff, 0, 0]);
 208                 display.subTile(2, 2, 2, 2, [0xff, 0, 0]);
 209                 display.finishTile();
 210                 expect(display).to.have.displayed(checked_data);
 211             });
 212
 213             it('should support drawing BGRX blit images with true color via #blitImage', function () {
 214                 var data = [];
 215                 for (var i = 0; i < 16; i++) {
 216                     data[i * 4] = checked_data[i * 4 + 2];
 217                     data[i * 4 + 1] = checked_data[i * 4 + 1];
 218                     data[i * 4 + 2] = checked_data[i * 4];
 219                     data[i * 4 + 3] = checked_data[i * 4 + 3];
 220                 }
 221                 display.blitImage(0, 0, 4, 4, data, 0);
 222                 expect(display).to.have.displayed(checked_data);
 223             });
 224
 225             it('should support drawing RGB blit images with true color via #blitRgbImage', function () {
 226                 var data = [];
 227                 for (var i = 0; i < 16; i++) {
 228                     data[i * 3] = checked_data[i * 4];
 229                     data[i * 3 + 1] = checked_data[i * 4 + 1];
 230                     data[i * 3 + 2] = checked_data[i * 4 + 2];
 231                 }
 232                 display.blitRgbImage(0, 0, 4, 4, data, 0);
 233                 expect(display).to.have.displayed(checked_data);
 234             });
 235
 236             it('should support drawing blit images from a data URL via #blitStringImage', function (done) {
 237                 var img_url = make_image_canvas(checked_data).toDataURL();
 238                 display._drawCtx._act_drawImg = display._drawCtx.drawImage;
 239                 display._drawCtx.drawImage = function (img, x, y) {
 240                     this._act_drawImg(img, x, y);
 241                     expect(display).to.have.displayed(checked_data);
 242                     done();
 243                 };
 244                 display.blitStringImage(img_url, 0, 0);
 245             });
 246
 247             it('should support drawing solid colors with color maps', function () {
 248                 display._true_color = false;
 249                 display.set_colourMap({ 0: [0xff, 0, 0], 1: [0, 0xff, 0] });
 250                 display.fillRect(0, 0, 4, 4, [1]);
 251                 display.fillRect(0, 0, 2, 2, [0]);
 252                 display.fillRect(2, 2, 2, 2, [0]);
 253                 expect(display).to.have.displayed(checked_data);
 254             });
 255
 256             it('should support drawing blit images with color maps', function () {
 257                 display._true_color = false;
 258                 display.set_colourMap({ 1: [0xff, 0, 0], 0: [0, 0xff, 0] });
 259                 var data = [1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1].map(function (elem) { return [elem]; });
 260                 display.blitImage(0, 0, 4, 4, data, 0);
 261                 expect(display).to.have.displayed(checked_data);
 262             });
 263
 264             it('should support drawing an image object via #drawImage', function () {
 265                 var img = make_image_canvas(checked_data);
 266                 display.drawImage(img, 0, 0);
 267                 expect(display).to.have.displayed(checked_data);
 268             });
 269         }
 270
 271         describe('(prefering native methods)', function () { drawing_tests.call(this, false); });
 272         describe('(prefering JavaScript)', function () { drawing_tests.call(this, true); });
 273     });
 274
 275     describe('the render queue processor', function () {
 276         var display;
 277         beforeEach(function () {
 278             display = new Display({ target: document.createElement('canvas'), prefer_js: false });
 279             display.resize(4, 4);
 280             sinon.spy(display, '_scan_renderQ');
 281             this.old_requestAnimFrame = window.requestAnimFrame;
 282             window.requestAnimFrame = function (cb) {
 283                 this.next_frame_cb = cb;
 284             }.bind(this);
 285             this.next_frame = function () { this.next_frame_cb(); };
 286         });
 287
 288         afterEach(function () {
 289             window.requestAnimFrame = this.old_requestAnimFrame;
 290         });
 291
 292         it('should try to process an item when it is pushed on, if nothing else is on the queue', function () {
 293             display.renderQ_push({ type: 'noop' });  // does nothing
 294             expect(display._scan_renderQ).to.have.been.calledOnce;
 295         });
 296
 297         it('should not try to process an item when it is pushed on if we are waiting for other items', function () {
 298             display._renderQ.length = 2;
 299             display.renderQ_push({ type: 'noop' });
 300             expect(display._scan_renderQ).to.not.have.been.called;
 301         });
 302
 303         it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
 304             var img = { complete: false };
 305             display._renderQ = [{ type: 'img', x: 3, y: 4, img: img },
 306                                 { type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
 307             display.drawImage = sinon.spy();
 308             display.fillRect = sinon.spy();
 309
 310             display._scan_renderQ();
 311             expect(display.drawImage).to.not.have.been.called;
 312             expect(display.fillRect).to.not.have.been.called;
 313
 314             display._renderQ[0].img.complete = true;
 315             this.next_frame();
 316             expect(display.drawImage).to.have.been.calledOnce;
 317             expect(display.fillRect).to.have.been.calledOnce;
 318         });
 319
 320         it('should draw a blit image on type "blit"', function () {
 321             display.blitImage = sinon.spy();
 322             display.renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
 323             expect(display.blitImage).to.have.been.calledOnce;
 324             expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
 325         });
 326
 327         it('should draw a blit RGB image on type "blitRgb"', function () {
 328             display.blitRgbImage = sinon.spy();
 329             display.renderQ_push({ type: 'blitRgb', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
 330             expect(display.blitRgbImage).to.have.been.calledOnce;
 331             expect(display.blitRgbImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
 332         });
 333
 334         it('should copy a region on type "copy"', function () {
 335             display.copyImage = sinon.spy();
 336             display.renderQ_push({ type: 'copy', x: 3, y: 4, width: 5, height: 6, old_x: 7, old_y: 8 });
 337             expect(display.copyImage).to.have.been.calledOnce;
 338             expect(display.copyImage).to.have.been.calledWith(7, 8, 3, 4, 5, 6);
 339         });
 340
 341         it('should fill a rect with a given color on type "fill"', function () {
 342             display.fillRect = sinon.spy();
 343             display.renderQ_push({ type: 'fill', x: 3, y: 4, width: 5, height: 6, color: [7, 8, 9]});
 344             expect(display.fillRect).to.have.been.calledOnce;
 345             expect(display.fillRect).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9]);
 346         });
 347
 348         it('should draw an image from an image object on type "img" (if complete)', function () {
 349             display.drawImage = sinon.spy();
 350             display.renderQ_push({ type: 'img', x: 3, y: 4, img: { complete: true } });
 351             expect(display.drawImage).to.have.been.calledOnce;
 352             expect(display.drawImage).to.have.been.calledWith({ complete: true }, 3, 4);
 353         });
 354     });
 355 });