import Base64 from '../core/base64.js';
import Display from '../core/display.js';
-import sinon from '../vendor/sinon.js';
-
describe('Display/Canvas Helper', function () {
const checked_data = new Uint8Array([
0x00, 0x00, 0xff, 255, 0x00, 0x00, 0xff, 255, 0x00, 0xff, 0x00, 255, 0x00, 0xff, 0x00, 255,
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) {
+ function make_image_canvas(input_data) {
const canvas = document.createElement('canvas');
canvas.width = 4;
canvas.height = 4;
return canvas;
}
- function make_image_png (input_data) {
+ function make_image_png(input_data) {
const canvas = make_image_canvas(input_data);
const url = canvas.toDataURL();
const data = url.split(",")[1];
expect(display).to.have.displayed(expected);
});
- it('should resize the target canvas when resizing the viewport', function() {
+ it('should resize the target canvas when resizing the viewport', function () {
display.viewportChangeSize(2, 2);
expect(display._target.width).to.equal(2);
expect(display._target.height).to.equal(2);
});
- it('should move the viewport if necessary', function() {
+ it('should move the viewport if necessary', function () {
display.viewportChangeSize(5, 5);
expect(display.absX(0)).to.equal(0);
expect(display.absY(0)).to.equal(0);
expect(display._target.height).to.equal(5);
});
- it('should limit the viewport to the framebuffer size', function() {
+ it('should limit the viewport to the framebuffer size', function () {
display.viewportChangeSize(6, 6);
expect(display._target.width).to.equal(5);
expect(display._target.height).to.equal(5);
expect(display.flip).to.have.been.calledOnce;
});
- it('should show the entire framebuffer when disabling the viewport', function() {
+ it('should show the entire framebuffer when disabling the viewport', function () {
display.clipViewport = false;
expect(display.absX(0)).to.equal(0);
expect(display.absY(0)).to.equal(0);
expect(display._target.height).to.equal(5);
});
- it('should ignore viewport changes when the viewport is disabled', function() {
+ it('should ignore viewport changes when the viewport is disabled', function () {
display.clipViewport = false;
display.viewportChangeSize(2, 2);
display.viewportChangePos(1, 1);
expect(display._target.height).to.equal(5);
});
- it('should show the entire framebuffer just after enabling the viewport', function() {
+ it('should show the entire framebuffer just after enabling the viewport', function () {
display.clipViewport = false;
display.clipViewport = true;
expect(display.absX(0)).to.equal(0);
display = new Display(canvas);
display.clipViewport = true;
display.resize(4, 3);
+ display.viewportChangeSize(4, 3);
document.body.appendChild(canvas);
});
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);
- 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 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 = 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();
- });
-
it('should not draw directly on the target canvas', function () {
display.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
display.flip();
});
it('should support drawing images via #imageRect', function (done) {
- display.imageRect(0, 0, "image/png", make_image_png(checked_data));
+ display.imageRect(0, 0, 4, 4, "image/png", make_image_png(checked_data));
display.flip();
- display.onflush = function () {
+ display.onflush = () => {
expect(display).to.have.displayed(checked_data);
done();
};
sinon.spy(display, '_scan_renderQ');
});
- afterEach(function () {
- window.requestAnimationFrame = this.old_requestAnimationFrame;
- });
-
it('should try to process an item when it is pushed on, if nothing else is on the queue', function () {
display._renderQ_push({ type: 'noop' }); // does nothing
expect(display._scan_renderQ).to.have.been.calledOnce;
});
it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
- const img = { complete: false, addEventListener: sinon.spy() }
- display._renderQ = [{ type: 'img', x: 3, y: 4, img: img },
+ const img = { complete: false, width: 4, height: 4, addEventListener: sinon.spy() };
+ display._renderQ = [{ type: 'img', x: 3, y: 4, width: 4, height: 4, img: img },
+ { type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
+ display.drawImage = sinon.spy();
+ display.fillRect = sinon.spy();
+
+ display._scan_renderQ();
+ expect(display.drawImage).to.not.have.been.called;
+ expect(display.fillRect).to.not.have.been.called;
+ expect(img.addEventListener).to.have.been.calledOnce;
+
+ display._renderQ[0].img.complete = true;
+ display._scan_renderQ();
+ expect(display.drawImage).to.have.been.calledOnce;
+ expect(display.fillRect).to.have.been.calledOnce;
+ expect(img.addEventListener).to.have.been.calledOnce;
+ });
+
+ it('should wait if an image is incorrectly loaded', function () {
+ const img = { complete: true, width: 0, height: 0, addEventListener: sinon.spy() };
+ display._renderQ = [{ type: 'img', x: 3, y: 4, width: 4, height: 4, img: img },
{ type: 'fill', x: 1, y: 2, width: 3, height: 4, color: 5 }];
display.drawImage = sinon.spy();
display.fillRect = sinon.spy();
expect(img.addEventListener).to.have.been.calledOnce;
display._renderQ[0].img.complete = true;
+ display._renderQ[0].img.width = 4;
+ display._renderQ[0].img.height = 4;
display._scan_renderQ();
expect(display.drawImage).to.have.been.calledOnce;
expect(display.fillRect).to.have.been.calledOnce;