tests/test.display.js

   1 /* jshint expr: true */
   2 var expect = chai.expect;
   3
   4 import Base64 from '../core/base64.js';
   5 import Display from '../core/display.js';
   6 import { _forceCursorURIs, browserSupportsCursorURIs } from '../core/util/browsers.js';
   7
   8 import './assertions.js';
   9 import 'sinon';
  10 import sinonChai from '../node_modules/sinon-chai/lib/sinon-chai.js';
  11 chai.use(sinonChai);
  12
  13 describe('Display/Canvas Helper', function () {
  14     var checked_data = [
  15         0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
  16         0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
  17         0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255,
  18         0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255
  19     ];
  20     checked_data = new Uint8Array(checked_data);
  21
  22     var basic_data = [0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255];
  23     basic_data = new Uint8Array(basic_data);
  24
  25     function make_image_canvas (input_data) {
  26         var canvas = document.createElement('canvas');
  27         canvas.width = 4;
  28         canvas.height = 4;
  29         var ctx = canvas.getContext('2d');
  30         var data = ctx.createImageData(4, 4);
  31         for (var i = 0; i < checked_data.length; i++) { data.data[i] = input_data[i]; }
  32         ctx.putImageData(data, 0, 0);
  33         return canvas;
  34     }
  35
  36     function make_image_png (input_data) {
  37         var canvas = make_image_canvas(input_data);
  38         var url = canvas.toDataURL();
  39         var data = url.split(",")[1];
  40         return Base64.decode(data);
  41     }
  42
  43     describe('checking for cursor uri support', function () {
  44         it('should disable cursor URIs if there is no support', function () {
  45             _forceCursorURIs(false);
  46             var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false });
  47             expect(display._cursor_uri).to.be.false;
  48         });
  49
  50         it('should enable cursor URIs if there is support', function () {
  51             _forceCursorURIs(true);
  52             var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false });
  53             expect(display._cursor_uri).to.be.true;
  54         });
  55
  56         it('respect the cursor_uri option if there is support', function () {
  57             _forceCursorURIs(false);
  58             var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false, cursor_uri: false });
  59             expect(display._cursor_uri).to.be.false;
  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         });
  71
  72         it('should take viewport location into consideration when drawing images', function () {
  73             display.resize(4, 4);
  74             display.viewportChangeSize(2, 2);
  75             display.drawImage(make_image_canvas(basic_data), 1, 1);
  76             display.flip();
  77
  78             var expected = new Uint8Array(16);
  79             var i;
  80             for (i = 0; i < 8; i++) { expected[i] = basic_data[i]; }
  81             for (i = 8; i < 16; i++) { expected[i] = 0; }
  82             expect(display).to.have.displayed(expected);
  83         });
  84
  85         it('should resize the target canvas when resizing the viewport', function() {
  86             display.viewportChangeSize(2, 2);
  87             expect(display._target.width).to.equal(2);
  88             expect(display._target.height).to.equal(2);
  89         });
  90
  91         it('should move the viewport if necessary', function() {
  92             display.viewportChangeSize(5, 5);
  93             expect(display.absX(0)).to.equal(0);
  94             expect(display.absY(0)).to.equal(0);
  95             expect(display._target.width).to.equal(5);
  96             expect(display._target.height).to.equal(5);
  97         });
  98
  99         it('should limit the viewport to the framebuffer size', function() {
 100             display.viewportChangeSize(6, 6);
 101             expect(display._target.width).to.equal(5);
 102             expect(display._target.height).to.equal(5);
 103         });
 104
 105         it('should redraw when moving the viewport', function () {
 106             display.flip = sinon.spy();
 107             display.viewportChangePos(-1, 1);
 108             expect(display.flip).to.have.been.calledOnce;
 109         });
 110
 111         it('should redraw when resizing the viewport', function () {
 112             display.flip = sinon.spy();
 113             display.viewportChangeSize(2, 2);
 114             expect(display.flip).to.have.been.calledOnce;
 115         });
 116
 117         it('should report clipping when framebuffer > viewport', function () {
 118             var clipping = display.clippingDisplay();
 119             expect(clipping).to.be.true;
 120         });
 121
 122         it('should report not clipping when framebuffer = viewport', function () {
 123             display.viewportChangeSize(5, 5);
 124             var clipping = display.clippingDisplay();
 125             expect(clipping).to.be.false;
 126         });
 127
 128         it('should show the entire framebuffer when disabling the viewport', function() {
 129             display.set_viewport(false);
 130             expect(display.absX(0)).to.equal(0);
 131             expect(display.absY(0)).to.equal(0);
 132             expect(display._target.width).to.equal(5);
 133             expect(display._target.height).to.equal(5);
 134         });
 135
 136         it('should ignore viewport changes when the viewport is disabled', function() {
 137             display.set_viewport(false);
 138             display.viewportChangeSize(2, 2);
 139             display.viewportChangePos(1, 1);
 140             expect(display.absX(0)).to.equal(0);
 141             expect(display.absY(0)).to.equal(0);
 142             expect(display._target.width).to.equal(5);
 143             expect(display._target.height).to.equal(5);
 144         });
 145
 146         it('should show the entire framebuffer just after enabling the viewport', function() {
 147             display.set_viewport(false);
 148             display.set_viewport(true);
 149             expect(display.absX(0)).to.equal(0);
 150             expect(display.absY(0)).to.equal(0);
 151             expect(display._target.width).to.equal(5);
 152             expect(display._target.height).to.equal(5);
 153         });
 154     });
 155
 156     describe('resizing', function () {
 157         var display;
 158         beforeEach(function () {
 159             display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: false });
 160             display.resize(4, 4);
 161         });
 162
 163         it('should change the size of the logical canvas', function () {
 164             display.resize(5, 7);
 165             expect(display._fb_width).to.equal(5);
 166             expect(display._fb_height).to.equal(7);
 167         });
 168
 169         it('should keep the framebuffer data', function () {
 170             display.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
 171             display.resize(2, 2);
 172             display.flip();
 173             var expected = [];
 174             for (var i = 0; i < 4 * 2*2; i += 4) {
 175                 expected[i] = 0xff;
 176                 expected[i+1] = expected[i+2] = 0;
 177                 expected[i+3] = 0xff;
 178             }
 179             expect(display).to.have.displayed(new Uint8Array(expected));
 180         });
 181
 182         describe('viewport', function () {
 183             beforeEach(function () {
 184                 display.set_viewport(true);
 185                 display.viewportChangeSize(3, 3);
 186                 display.viewportChangePos(1, 1);
 187             });
 188
 189             it('should keep the viewport position and size if possible', function () {
 190                 display.resize(6, 6);
 191                 expect(display.absX(0)).to.equal(1);
 192                 expect(display.absY(0)).to.equal(1);
 193                 expect(display._target.width).to.equal(3);
 194                 expect(display._target.height).to.equal(3);
 195             });
 196
 197             it('should move the viewport if necessary', function () {
 198                 display.resize(3, 3);
 199                 expect(display.absX(0)).to.equal(0);
 200                 expect(display.absY(0)).to.equal(0);
 201                 expect(display._target.width).to.equal(3);
 202                 expect(display._target.height).to.equal(3);
 203             });
 204
 205             it('should shrink the viewport if necessary', function () {
 206                 display.resize(2, 2);
 207                 expect(display.absX(0)).to.equal(0);
 208                 expect(display.absY(0)).to.equal(0);
 209                 expect(display._target.width).to.equal(2);
 210                 expect(display._target.height).to.equal(2);
 211             });
 212         });
 213     });
 214
 215     describe('rescaling', function () {
 216         var display;
 217         var canvas;
 218
 219         beforeEach(function () {
 220             display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true });
 221             display.resize(4, 4);
 222             display.viewportChangeSize(3, 3);
 223             display.viewportChangePos(1, 1);
 224             canvas = display.get_target();
 225             document.body.appendChild(canvas);
 226         });
 227
 228         afterEach(function () {
 229             document.body.removeChild(canvas);
 230         });
 231
 232         it('should not change the bitmap size of the canvas', function () {
 233             display.set_scale(2.0);
 234             expect(canvas.width).to.equal(3);
 235             expect(canvas.height).to.equal(3);
 236         });
 237
 238         it('should change the effective rendered size of the canvas', function () {
 239             display.set_scale(2.0);
 240             expect(canvas.clientWidth).to.equal(6);
 241             expect(canvas.clientHeight).to.equal(6);
 242         });
 243
 244         it('should not change when resizing', function () {
 245             display.set_scale(2.0);
 246             display.resize(5, 5);
 247             expect(display.get_scale()).to.equal(2.0);
 248             expect(canvas.width).to.equal(3);
 249             expect(canvas.height).to.equal(3);
 250             expect(canvas.clientWidth).to.equal(6);
 251             expect(canvas.clientHeight).to.equal(6);
 252         });
 253     });
 254
 255     describe('autoscaling', function () {
 256         var display;
 257         var canvas;
 258
 259         beforeEach(function () {
 260             display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true });
 261             display.resize(4, 3);
 262             canvas = display.get_target();
 263             document.body.appendChild(canvas);
 264         });
 265
 266         afterEach(function () {
 267             document.body.removeChild(canvas);
 268         });
 269
 270         it('should preserve aspect ratio while autoscaling', function () {
 271             display.autoscale(16, 9);
 272             expect(canvas.clientWidth / canvas.clientHeight).to.equal(4 / 3);
 273         });
 274
 275         it('should use width to determine scale when the current aspect ratio is wider than the target', function () {
 276             display.autoscale(9, 16);
 277             expect(display.absX(9)).to.equal(4);
 278             expect(display.absY(18)).to.equal(8);
 279             expect(canvas.clientWidth).to.equal(9);
 280             expect(canvas.clientHeight).to.equal(7); // round 9 / (4 / 3)
 281         });
 282
 283         it('should use height to determine scale when the current aspect ratio is taller than the target', function () {
 284             display.autoscale(16, 9);
 285             expect(display.absX(9)).to.equal(3);
 286             expect(display.absY(18)).to.equal(6);
 287             expect(canvas.clientWidth).to.equal(12);  // 16 * (4 / 3)
 288             expect(canvas.clientHeight).to.equal(9);
 289
 290         });
 291
 292         it('should not change the bitmap size of the canvas', function () {
 293             display.autoscale(16, 9);
 294             expect(canvas.width).to.equal(4);
 295             expect(canvas.height).to.equal(3);
 296         });
 297
 298         it('should not upscale when downscaleOnly is true', function () {
 299             display.autoscale(2, 2, true);
 300             expect(display.absX(9)).to.equal(18);
 301             expect(display.absY(18)).to.equal(36);
 302             expect(canvas.clientWidth).to.equal(2);
 303             expect(canvas.clientHeight).to.equal(2);
 304
 305             display.autoscale(16, 9, true);
 306             expect(display.absX(9)).to.equal(9);
 307             expect(display.absY(18)).to.equal(18);
 308             expect(canvas.clientWidth).to.equal(4);
 309             expect(canvas.clientHeight).to.equal(3);
 310         });
 311     });
 312
 313     describe('drawing', function () {
 314
 315         // TODO(directxman12): improve the tests for each of the drawing functions to cover more than just the
 316         //                     basic cases
 317         function drawing_tests (pref_js) {
 318             var display;
 319             beforeEach(function () {
 320                 display = new Display({ target: document.createElement('canvas'), prefer_js: pref_js });
 321                 display.resize(4, 4);
 322             });
 323
 324             it('should clear the screen on #clear without a logo set', function () {
 325                 display.fillRect(0, 0, 4, 4, [0x00, 0x00, 0xff]);
 326                 display._logo = null;
 327                 display.clear();
 328                 display.resize(4, 4);
 329                 var empty = [];
 330                 for (var i = 0; i < 4 * display._fb_width * display._fb_height; i++) { empty[i] = 0; }
 331                 expect(display).to.have.displayed(new Uint8Array(empty));
 332             });
 333
 334             it('should draw the logo on #clear with a logo set', function (done) {
 335                 display._logo = { width: 4, height: 4, type: "image/png", data: make_image_png(checked_data) };
 336                 display.clear();
 337                 display.set_onFlush(function () {
 338                     expect(display).to.have.displayed(checked_data);
 339                     expect(display._fb_width).to.equal(4);
 340                     expect(display._fb_height).to.equal(4);
 341                     done();
 342                 });
 343                 display.flush();
 344             });
 345
 346             it('should not draw directly on the target canvas', function () {
 347                 display.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
 348                 display.flip();
 349                 display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
 350                 var expected = [];
 351                 for (var i = 0; i < 4 * display._fb_width * display._fb_height; i += 4) {
 352                     expected[i] = 0xff;
 353                     expected[i+1] = expected[i+2] = 0;
 354                     expected[i+3] = 0xff;
 355                 }
 356                 expect(display).to.have.displayed(new Uint8Array(expected));
 357             });
 358
 359             it('should support filling a rectangle with particular color via #fillRect', function () {
 360                 display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
 361                 display.fillRect(0, 0, 2, 2, [0xff, 0, 0]);
 362                 display.fillRect(2, 2, 2, 2, [0xff, 0, 0]);
 363                 display.flip();
 364                 expect(display).to.have.displayed(checked_data);
 365             });
 366
 367             it('should support copying an portion of the canvas via #copyImage', function () {
 368                 display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
 369                 display.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]);
 370                 display.copyImage(0, 0, 2, 2, 2, 2);
 371                 display.flip();
 372                 expect(display).to.have.displayed(checked_data);
 373             });
 374
 375             it('should support drawing images via #imageRect', function (done) {
 376                 display.imageRect(0, 0, "image/png", make_image_png(checked_data));
 377                 display.flip();
 378                 display.set_onFlush(function () {
 379                     expect(display).to.have.displayed(checked_data);
 380                     done();
 381                 });
 382                 display.flush();
 383             });
 384
 385             it('should support drawing tile data with a background color and sub tiles', function () {
 386                 display.startTile(0, 0, 4, 4, [0, 0xff, 0]);
 387                 display.subTile(0, 0, 2, 2, [0xff, 0, 0]);
 388                 display.subTile(2, 2, 2, 2, [0xff, 0, 0]);
 389                 display.finishTile();
 390                 display.flip();
 391                 expect(display).to.have.displayed(checked_data);
 392             });
 393
 394             it('should support drawing BGRX blit images with true color via #blitImage', function () {
 395                 var data = [];
 396                 for (var i = 0; i < 16; i++) {
 397                     data[i * 4] = checked_data[i * 4 + 2];
 398                     data[i * 4 + 1] = checked_data[i * 4 + 1];
 399                     data[i * 4 + 2] = checked_data[i * 4];
 400                     data[i * 4 + 3] = checked_data[i * 4 + 3];
 401                 }
 402                 display.blitImage(0, 0, 4, 4, data, 0);
 403                 display.flip();
 404                 expect(display).to.have.displayed(checked_data);
 405             });
 406
 407             it('should support drawing RGB blit images with true color via #blitRgbImage', function () {
 408                 var data = [];
 409                 for (var i = 0; i < 16; i++) {
 410                     data[i * 3] = checked_data[i * 4];
 411                     data[i * 3 + 1] = checked_data[i * 4 + 1];
 412                     data[i * 3 + 2] = checked_data[i * 4 + 2];
 413                 }
 414                 display.blitRgbImage(0, 0, 4, 4, data, 0);
 415                 display.flip();
 416                 expect(display).to.have.displayed(checked_data);
 417             });
 418
 419             it('should support drawing an image object via #drawImage', function () {
 420                 var img = make_image_canvas(checked_data);
 421                 display.drawImage(img, 0, 0);
 422                 display.flip();
 423                 expect(display).to.have.displayed(checked_data);
 424             });
 425         }
 426
 427         describe('(prefering native methods)', function () { drawing_tests.call(this, false); });
 428         describe('(prefering JavaScript)', function () { drawing_tests.call(this, true); });
 429     });
 430
 431     describe('the render queue processor', function () {
 432         var display;
 433         beforeEach(function () {
 434             display = new Display({ target: document.createElement('canvas'), prefer_js: false });
 435             display.resize(4, 4);
 436             sinon.spy(display, '_scan_renderQ');
 437         });
 438
 439         afterEach(function () {
 440             window.requestAnimationFrame = this.old_requestAnimationFrame;
 441         });
 442
 443         it('should try to process an item when it is pushed on, if nothing else is on the queue', function () {
 444             display._renderQ_push({ type: 'noop' });  // does nothing
 445             expect(display._scan_renderQ).to.have.been.calledOnce;
 446         });
 447
 448         it('should not try to process an item when it is pushed on if we are waiting for other items', function () {
 449             display._renderQ.length = 2;
 450             display._renderQ_push({ type: 'noop' });
 451             expect(display._scan_renderQ).to.not.have.been.called;
 452         });
 453
 454         it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
 455             var img = { complete: false, addEventListener: sinon.spy() }
 456             display._renderQ = [{ type: 'img', x: 3, y: 4, img: img },
 457                                 { type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
 458             display.drawImage = sinon.spy();
 459             display.fillRect = sinon.spy();
 460
 461             display._scan_renderQ();
 462             expect(display.drawImage).to.not.have.been.called;
 463             expect(display.fillRect).to.not.have.been.called;
 464             expect(img.addEventListener).to.have.been.calledOnce;
 465
 466             display._renderQ[0].img.complete = true;
 467             display._scan_renderQ();
 468             expect(display.drawImage).to.have.been.calledOnce;
 469             expect(display.fillRect).to.have.been.calledOnce;
 470             expect(img.addEventListener).to.have.been.calledOnce;
 471         });
 472
 473         it('should call callback when queue is flushed', function () {
 474             display.set_onFlush(sinon.spy());
 475             display.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
 476             expect(display.get_onFlush()).to.not.have.been.called;
 477             display.flush();
 478             expect(display.get_onFlush()).to.have.been.calledOnce;
 479         });
 480
 481         it('should draw a blit image on type "blit"', function () {
 482             display.blitImage = sinon.spy();
 483             display._renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
 484             expect(display.blitImage).to.have.been.calledOnce;
 485             expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
 486         });
 487
 488         it('should draw a blit RGB image on type "blitRgb"', function () {
 489             display.blitRgbImage = sinon.spy();
 490             display._renderQ_push({ type: 'blitRgb', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
 491             expect(display.blitRgbImage).to.have.been.calledOnce;
 492             expect(display.blitRgbImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
 493         });
 494
 495         it('should copy a region on type "copy"', function () {
 496             display.copyImage = sinon.spy();
 497             display._renderQ_push({ type: 'copy', x: 3, y: 4, width: 5, height: 6, old_x: 7, old_y: 8 });
 498             expect(display.copyImage).to.have.been.calledOnce;
 499             expect(display.copyImage).to.have.been.calledWith(7, 8, 3, 4, 5, 6);
 500         });
 501
 502         it('should fill a rect with a given color on type "fill"', function () {
 503             display.fillRect = sinon.spy();
 504             display._renderQ_push({ type: 'fill', x: 3, y: 4, width: 5, height: 6, color: [7, 8, 9]});
 505             expect(display.fillRect).to.have.been.calledOnce;
 506             expect(display.fillRect).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9]);
 507         });
 508
 509         it('should draw an image from an image object on type "img" (if complete)', function () {
 510             display.drawImage = sinon.spy();
 511             display._renderQ_push({ type: 'img', x: 3, y: 4, img: { complete: true } });
 512             expect(display.drawImage).to.have.been.calledOnce;
 513             expect(display.drawImage).to.have.been.calledWith({ complete: true }, 3, 4);
 514         });
 515     });
 516 });