X-Git-Url: https://git.proxmox.com/?a=blobdiff_plain;f=tests%2Ftest.display.js;h=e3810effa9f98ecc45a27cf06e7242df16cad421;hb=651c23ece37c1749936d2eb97939d121887720b9;hp=fac0febc431a48897fba73af7a83c9555f34ef0d;hpb=4a818a7dddb4e53e0ca7f80a7889d0dae7545769;p=mirror_novnc.git diff --git a/tests/test.display.js b/tests/test.display.js index fac0feb..e3810ef 100644 --- a/tests/test.display.js +++ b/tests/test.display.js @@ -1,66 +1,43 @@ -/* jshint expr: true */ -var expect = chai.expect; +const expect = chai.expect; import Base64 from '../core/base64.js'; import Display from '../core/display.js'; -import { _forceCursorURIs, browserSupportsCursorURIs } from '../core/util/browsers.js'; import sinon from '../vendor/sinon.js'; describe('Display/Canvas Helper', function () { - var checked_data = [ + const checked_data = new Uint8Array([ 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255 - ]; - checked_data = new Uint8Array(checked_data); + ]); - var basic_data = [0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]; - basic_data = new Uint8Array(basic_data); + const basic_data = new Uint8Array([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]); function make_image_canvas (input_data) { - var canvas = document.createElement('canvas'); + const canvas = document.createElement('canvas'); canvas.width = 4; canvas.height = 4; - var ctx = canvas.getContext('2d'); - var data = ctx.createImageData(4, 4); - for (var i = 0; i < checked_data.length; i++) { data.data[i] = input_data[i]; } + const ctx = canvas.getContext('2d'); + const data = ctx.createImageData(4, 4); + for (let i = 0; i < checked_data.length; i++) { data.data[i] = input_data[i]; } ctx.putImageData(data, 0, 0); return canvas; } function make_image_png (input_data) { - var canvas = make_image_canvas(input_data); - var url = canvas.toDataURL(); - var data = url.split(",")[1]; + const canvas = make_image_canvas(input_data); + const url = canvas.toDataURL(); + const data = url.split(",")[1]; return Base64.decode(data); } - describe('checking for cursor uri support', function () { - it('should disable cursor URIs if there is no support', function () { - _forceCursorURIs(false); - var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false }); - expect(display._cursor_uri).to.be.false; - }); - - it('should enable cursor URIs if there is support', function () { - _forceCursorURIs(true); - var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false }); - expect(display._cursor_uri).to.be.true; - }); - - it('respect the cursor_uri option if there is support', function () { - _forceCursorURIs(false); - var display = new Display({ target: document.createElement('canvas'), prefer_js: true, viewport: false, cursor_uri: false }); - expect(display._cursor_uri).to.be.false; - }); - }); - describe('viewport handling', function () { - var display; + let display; beforeEach(function () { - display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true }); + display = new Display(document.createElement('canvas')); + display.clipViewport = true; display.resize(5, 5); display.viewportChangeSize(3, 3); display.viewportChangePos(1, 1); @@ -72,10 +49,9 @@ describe('Display/Canvas Helper', function () { display.drawImage(make_image_canvas(basic_data), 1, 1); display.flip(); - var expected = new Uint8Array(16); - var i; - for (i = 0; i < 8; i++) { expected[i] = basic_data[i]; } - for (i = 8; i < 16; i++) { expected[i] = 0; } + const expected = new Uint8Array(16); + for (let i = 0; i < 8; i++) { expected[i] = basic_data[i]; } + for (let i = 8; i < 16; i++) { expected[i] = 0; } expect(display).to.have.displayed(expected); }); @@ -111,19 +87,8 @@ describe('Display/Canvas Helper', function () { expect(display.flip).to.have.been.calledOnce; }); - it('should report clipping when framebuffer > viewport', function () { - var clipping = display.clippingDisplay(); - expect(clipping).to.be.true; - }); - - it('should report not clipping when framebuffer = viewport', function () { - display.viewportChangeSize(5, 5); - var clipping = display.clippingDisplay(); - expect(clipping).to.be.false; - }); - it('should show the entire framebuffer when disabling the viewport', function() { - display.set_viewport(false); + display.clipViewport = false; expect(display.absX(0)).to.equal(0); expect(display.absY(0)).to.equal(0); expect(display._target.width).to.equal(5); @@ -131,7 +96,7 @@ describe('Display/Canvas Helper', function () { }); it('should ignore viewport changes when the viewport is disabled', function() { - display.set_viewport(false); + display.clipViewport = false; display.viewportChangeSize(2, 2); display.viewportChangePos(1, 1); expect(display.absX(0)).to.equal(0); @@ -141,8 +106,8 @@ describe('Display/Canvas Helper', function () { }); it('should show the entire framebuffer just after enabling the viewport', function() { - display.set_viewport(false); - display.set_viewport(true); + display.clipViewport = false; + display.clipViewport = true; expect(display.absX(0)).to.equal(0); expect(display.absY(0)).to.equal(0); expect(display._target.width).to.equal(5); @@ -151,9 +116,10 @@ describe('Display/Canvas Helper', function () { }); describe('resizing', function () { - var display; + let display; beforeEach(function () { - display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: false }); + display = new Display(document.createElement('canvas')); + display.clipViewport = false; display.resize(4, 4); }); @@ -167,8 +133,8 @@ describe('Display/Canvas Helper', function () { display.fillRect(0, 0, 4, 4, [0, 0, 0xff]); display.resize(2, 2); display.flip(); - var expected = []; - for (var i = 0; i < 4 * 2*2; i += 4) { + const expected = []; + for (let i = 0; i < 4 * 2*2; i += 4) { expected[i] = 0xff; expected[i+1] = expected[i+2] = 0; expected[i+3] = 0xff; @@ -178,7 +144,7 @@ describe('Display/Canvas Helper', function () { describe('viewport', function () { beforeEach(function () { - display.set_viewport(true); + display.clipViewport = true; display.viewportChangeSize(3, 3); display.viewportChangePos(1, 1); }); @@ -210,15 +176,16 @@ describe('Display/Canvas Helper', function () { }); describe('rescaling', function () { - var display; - var canvas; + let display; + let canvas; beforeEach(function () { - display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true }); + canvas = document.createElement('canvas'); + display = new Display(canvas); + display.clipViewport = true; display.resize(4, 4); display.viewportChangeSize(3, 3); display.viewportChangePos(1, 1); - canvas = display.get_target(); document.body.appendChild(canvas); }); @@ -227,21 +194,21 @@ describe('Display/Canvas Helper', function () { }); it('should not change the bitmap size of the canvas', function () { - display.set_scale(2.0); + display.scale = 2.0; expect(canvas.width).to.equal(3); expect(canvas.height).to.equal(3); }); it('should change the effective rendered size of the canvas', function () { - display.set_scale(2.0); + display.scale = 2.0; expect(canvas.clientWidth).to.equal(6); expect(canvas.clientHeight).to.equal(6); }); it('should not change when resizing', function () { - display.set_scale(2.0); + display.scale = 2.0; display.resize(5, 5); - expect(display.get_scale()).to.equal(2.0); + expect(display.scale).to.equal(2.0); expect(canvas.width).to.equal(3); expect(canvas.height).to.equal(3); expect(canvas.clientWidth).to.equal(6); @@ -250,13 +217,14 @@ describe('Display/Canvas Helper', function () { }); describe('autoscaling', function () { - var display; - var canvas; + let display; + let canvas; beforeEach(function () { - display = new Display({ target: document.createElement('canvas'), prefer_js: false, viewport: true }); + canvas = document.createElement('canvas'); + display = new Display(canvas); + display.clipViewport = true; display.resize(4, 3); - canvas = display.get_target(); document.body.appendChild(canvas); }); @@ -291,144 +259,151 @@ describe('Display/Canvas Helper', function () { expect(canvas.width).to.equal(4); expect(canvas.height).to.equal(3); }); - - it('should not upscale when downscaleOnly is true', function () { - display.autoscale(2, 2, true); - expect(display.absX(9)).to.equal(18); - expect(display.absY(18)).to.equal(36); - expect(canvas.clientWidth).to.equal(2); - expect(canvas.clientHeight).to.equal(2); - - display.autoscale(16, 9, true); - expect(display.absX(9)).to.equal(9); - expect(display.absY(18)).to.equal(18); - expect(canvas.clientWidth).to.equal(4); - expect(canvas.clientHeight).to.equal(3); - }); }); describe('drawing', function () { // TODO(directxman12): improve the tests for each of the drawing functions to cover more than just the // basic cases - function drawing_tests (pref_js) { - var display; - beforeEach(function () { - display = new Display({ target: document.createElement('canvas'), prefer_js: pref_js }); - display.resize(4, 4); - }); - - it('should clear the screen on #clear without a logo set', function () { - display.fillRect(0, 0, 4, 4, [0x00, 0x00, 0xff]); - display._logo = null; - display.clear(); - display.resize(4, 4); - var empty = []; - for (var i = 0; i < 4 * display._fb_width * display._fb_height; i++) { empty[i] = 0; } - expect(display).to.have.displayed(new Uint8Array(empty)); - }); - - it('should draw the logo on #clear with a logo set', function (done) { - display._logo = { width: 4, height: 4, type: "image/png", data: make_image_png(checked_data) }; - display.clear(); - display.set_onFlush(function () { - expect(display).to.have.displayed(checked_data); - expect(display._fb_width).to.equal(4); - expect(display._fb_height).to.equal(4); - done(); - }); - display.flush(); - }); + let display; + beforeEach(function () { + display = new Display(document.createElement('canvas')); + display.resize(4, 4); + }); - it('should not draw directly on the target canvas', function () { - display.fillRect(0, 0, 4, 4, [0, 0, 0xff]); - display.flip(); - display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); - var expected = []; - for (var i = 0; i < 4 * display._fb_width * display._fb_height; i += 4) { - expected[i] = 0xff; - expected[i+1] = expected[i+2] = 0; - expected[i+3] = 0xff; - } - expect(display).to.have.displayed(new Uint8Array(expected)); - }); + it('should clear the screen on #clear without a logo set', function () { + display.fillRect(0, 0, 4, 4, [0x00, 0x00, 0xff]); + display._logo = null; + display.clear(); + display.resize(4, 4); + const empty = []; + for (let i = 0; i < 4 * display._fb_width * display._fb_height; i++) { empty[i] = 0; } + expect(display).to.have.displayed(new Uint8Array(empty)); + }); - it('should support filling a rectangle with particular color via #fillRect', function () { - display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); - display.fillRect(0, 0, 2, 2, [0xff, 0, 0]); - display.fillRect(2, 2, 2, 2, [0xff, 0, 0]); - display.flip(); + it('should draw the logo on #clear with a logo set', function (done) { + display._logo = { width: 4, height: 4, type: "image/png", data: make_image_png(checked_data) }; + display.clear(); + display.onflush = () => { expect(display).to.have.displayed(checked_data); - }); + expect(display._fb_width).to.equal(4); + expect(display._fb_height).to.equal(4); + done(); + }; + display.flush(); + }); - it('should support copying an portion of the canvas via #copyImage', function () { - display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); - display.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]); - display.copyImage(0, 0, 2, 2, 2, 2); - display.flip(); - expect(display).to.have.displayed(checked_data); - }); + it('should not draw directly on the target canvas', function () { + display.fillRect(0, 0, 4, 4, [0, 0, 0xff]); + display.flip(); + display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); + const expected = []; + for (let i = 0; i < 4 * display._fb_width * display._fb_height; i += 4) { + expected[i] = 0xff; + expected[i+1] = expected[i+2] = 0; + expected[i+3] = 0xff; + } + expect(display).to.have.displayed(new Uint8Array(expected)); + }); - it('should support drawing images via #imageRect', function (done) { - display.imageRect(0, 0, "image/png", make_image_png(checked_data)); - display.flip(); - display.set_onFlush(function () { - expect(display).to.have.displayed(checked_data); - done(); - }); - display.flush(); - }); + it('should support filling a rectangle with particular color via #fillRect', function () { + display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); + display.fillRect(0, 0, 2, 2, [0xff, 0, 0]); + display.fillRect(2, 2, 2, 2, [0xff, 0, 0]); + display.flip(); + expect(display).to.have.displayed(checked_data); + }); - it('should support drawing tile data with a background color and sub tiles', function () { - display.startTile(0, 0, 4, 4, [0, 0xff, 0]); - display.subTile(0, 0, 2, 2, [0xff, 0, 0]); - display.subTile(2, 2, 2, 2, [0xff, 0, 0]); - display.finishTile(); - display.flip(); - expect(display).to.have.displayed(checked_data); - }); + it('should support copying an portion of the canvas via #copyImage', function () { + display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); + display.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]); + display.copyImage(0, 0, 2, 2, 2, 2); + display.flip(); + expect(display).to.have.displayed(checked_data); + }); - it('should support drawing BGRX blit images with true color via #blitImage', function () { - var data = []; - for (var i = 0; i < 16; i++) { - data[i * 4] = checked_data[i * 4 + 2]; - data[i * 4 + 1] = checked_data[i * 4 + 1]; - data[i * 4 + 2] = checked_data[i * 4]; - data[i * 4 + 3] = checked_data[i * 4 + 3]; - } - display.blitImage(0, 0, 4, 4, data, 0); - display.flip(); + it('should support drawing images via #imageRect', function (done) { + display.imageRect(0, 0, "image/png", make_image_png(checked_data)); + display.flip(); + display.onflush = () => { expect(display).to.have.displayed(checked_data); - }); + done(); + }; + display.flush(); + }); - it('should support drawing RGB blit images with true color via #blitRgbImage', function () { - var data = []; - for (var i = 0; i < 16; i++) { - data[i * 3] = checked_data[i * 4]; - data[i * 3 + 1] = checked_data[i * 4 + 1]; - data[i * 3 + 2] = checked_data[i * 4 + 2]; + it('should support drawing tile data with a background color and sub tiles', function () { + display.startTile(0, 0, 4, 4, [0, 0xff, 0]); + display.subTile(0, 0, 2, 2, [0xff, 0, 0]); + display.subTile(2, 2, 2, 2, [0xff, 0, 0]); + display.finishTile(); + display.flip(); + expect(display).to.have.displayed(checked_data); + }); + + // We have a special cache for 16x16 tiles that we need to test + it('should support drawing a 16x16 tile', function () { + const large_checked_data = new Uint8Array(16*16*4); + display.resize(16, 16); + + for (let y = 0;y < 16;y++) { + for (let x = 0;x < 16;x++) { + let pixel; + if ((x < 4) && (y < 4)) { + // NB: of course IE11 doesn't support #slice on ArrayBufferViews... + pixel = Array.prototype.slice.call(checked_data, (y*4+x)*4, (y*4+x+1)*4); + } else { + pixel = [0, 0xff, 0, 255]; + } + large_checked_data.set(pixel, (y*16+x)*4); } - display.blitRgbImage(0, 0, 4, 4, data, 0); - display.flip(); - expect(display).to.have.displayed(checked_data); - }); + } - it('should support drawing an image object via #drawImage', function () { - var img = make_image_canvas(checked_data); - display.drawImage(img, 0, 0); - display.flip(); - expect(display).to.have.displayed(checked_data); - }); - } + display.startTile(0, 0, 16, 16, [0, 0xff, 0]); + display.subTile(0, 0, 2, 2, [0xff, 0, 0]); + display.subTile(2, 2, 2, 2, [0xff, 0, 0]); + display.finishTile(); + display.flip(); + expect(display).to.have.displayed(large_checked_data); + }); + + it('should support drawing BGRX blit images with true color via #blitImage', function () { + const data = []; + for (let i = 0; i < 16; i++) { + data[i * 4] = checked_data[i * 4 + 2]; + data[i * 4 + 1] = checked_data[i * 4 + 1]; + data[i * 4 + 2] = checked_data[i * 4]; + data[i * 4 + 3] = checked_data[i * 4 + 3]; + } + display.blitImage(0, 0, 4, 4, data, 0); + display.flip(); + expect(display).to.have.displayed(checked_data); + }); - describe('(prefering native methods)', function () { drawing_tests.call(this, false); }); - describe('(prefering JavaScript)', function () { drawing_tests.call(this, true); }); + it('should support drawing RGB blit images with true color via #blitRgbImage', function () { + const data = []; + for (let i = 0; i < 16; i++) { + data[i * 3] = checked_data[i * 4]; + data[i * 3 + 1] = checked_data[i * 4 + 1]; + data[i * 3 + 2] = checked_data[i * 4 + 2]; + } + display.blitRgbImage(0, 0, 4, 4, data, 0); + display.flip(); + expect(display).to.have.displayed(checked_data); + }); + + it('should support drawing an image object via #drawImage', function () { + const img = make_image_canvas(checked_data); + display.drawImage(img, 0, 0); + display.flip(); + expect(display).to.have.displayed(checked_data); + }); }); describe('the render queue processor', function () { - var display; + let display; beforeEach(function () { - display = new Display({ target: document.createElement('canvas'), prefer_js: false }); + display = new Display(document.createElement('canvas')); display.resize(4, 4); sinon.spy(display, '_scan_renderQ'); }); @@ -449,7 +424,7 @@ describe('Display/Canvas Helper', function () { }); it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () { - var img = { complete: false, addEventListener: sinon.spy() } + const img = { complete: false, addEventListener: sinon.spy() } display._renderQ = [{ type: 'img', x: 3, y: 4, img: img }, { type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }]; display.drawImage = sinon.spy(); @@ -468,11 +443,11 @@ describe('Display/Canvas Helper', function () { }); it('should call callback when queue is flushed', function () { - display.set_onFlush(sinon.spy()); + display.onflush = sinon.spy(); display.fillRect(0, 0, 4, 4, [0, 0xff, 0]); - expect(display.get_onFlush()).to.not.have.been.called; + expect(display.onflush).to.not.have.been.called; display.flush(); - expect(display.get_onFlush()).to.have.been.calledOnce; + expect(display.onflush).to.have.been.calledOnce; }); it('should draw a blit image on type "blit"', function () {