1 const expect
= chai
.expect
;
3 import Base64
from '../core/base64.js';
4 import Display
from '../core/display.js';
6 describe('Display/Canvas Helper', function () {
7 const checked_data
= new Uint8Array([
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
14 const basic_data
= new Uint8Array([0xff, 0x00, 0x00, 255, 0x00, 0xff, 0x00, 255, 0x00, 0x00, 0xff, 255, 0xff, 0xff, 0xff, 255]);
16 function make_image_canvas(input_data
) {
17 const canvas
= document
.createElement('canvas');
20 const ctx
= canvas
.getContext('2d');
21 const data
= ctx
.createImageData(4, 4);
22 for (let i
= 0; i
< checked_data
.length
; i
++) { data
.data
[i
] = input_data
[i
]; }
23 ctx
.putImageData(data
, 0, 0);
27 function make_image_png(input_data
) {
28 const canvas
= make_image_canvas(input_data
);
29 const url
= canvas
.toDataURL();
30 const data
= url
.split(",")[1];
31 return Base64
.decode(data
);
34 describe('viewport handling', function () {
36 beforeEach(function () {
37 display
= new Display(document
.createElement('canvas'));
38 display
.clipViewport
= true;
40 display
.viewportChangeSize(3, 3);
41 display
.viewportChangePos(1, 1);
44 it('should take viewport location into consideration when drawing images', function () {
46 display
.viewportChangeSize(2, 2);
47 display
.drawImage(make_image_canvas(basic_data
), 1, 1);
50 const expected
= new Uint8Array(16);
51 for (let i
= 0; i
< 8; i
++) { expected
[i
] = basic_data
[i
]; }
52 for (let i
= 8; i
< 16; i
++) { expected
[i
] = 0; }
53 expect(display
).to
.have
.displayed(expected
);
56 it('should resize the target canvas when resizing the viewport', function () {
57 display
.viewportChangeSize(2, 2);
58 expect(display
._target
.width
).to
.equal(2);
59 expect(display
._target
.height
).to
.equal(2);
62 it('should move the viewport if necessary', function () {
63 display
.viewportChangeSize(5, 5);
64 expect(display
.absX(0)).to
.equal(0);
65 expect(display
.absY(0)).to
.equal(0);
66 expect(display
._target
.width
).to
.equal(5);
67 expect(display
._target
.height
).to
.equal(5);
70 it('should limit the viewport to the framebuffer size', function () {
71 display
.viewportChangeSize(6, 6);
72 expect(display
._target
.width
).to
.equal(5);
73 expect(display
._target
.height
).to
.equal(5);
76 it('should redraw when moving the viewport', function () {
77 display
.flip
= sinon
.spy();
78 display
.viewportChangePos(-1, 1);
79 expect(display
.flip
).to
.have
.been
.calledOnce
;
82 it('should redraw when resizing the viewport', function () {
83 display
.flip
= sinon
.spy();
84 display
.viewportChangeSize(2, 2);
85 expect(display
.flip
).to
.have
.been
.calledOnce
;
88 it('should show the entire framebuffer when disabling the viewport', function () {
89 display
.clipViewport
= false;
90 expect(display
.absX(0)).to
.equal(0);
91 expect(display
.absY(0)).to
.equal(0);
92 expect(display
._target
.width
).to
.equal(5);
93 expect(display
._target
.height
).to
.equal(5);
96 it('should ignore viewport changes when the viewport is disabled', function () {
97 display
.clipViewport
= false;
98 display
.viewportChangeSize(2, 2);
99 display
.viewportChangePos(1, 1);
100 expect(display
.absX(0)).to
.equal(0);
101 expect(display
.absY(0)).to
.equal(0);
102 expect(display
._target
.width
).to
.equal(5);
103 expect(display
._target
.height
).to
.equal(5);
106 it('should show the entire framebuffer just after enabling the viewport', function () {
107 display
.clipViewport
= false;
108 display
.clipViewport
= true;
109 expect(display
.absX(0)).to
.equal(0);
110 expect(display
.absY(0)).to
.equal(0);
111 expect(display
._target
.width
).to
.equal(5);
112 expect(display
._target
.height
).to
.equal(5);
116 describe('resizing', function () {
118 beforeEach(function () {
119 display
= new Display(document
.createElement('canvas'));
120 display
.clipViewport
= false;
121 display
.resize(4, 4);
124 it('should change the size of the logical canvas', function () {
125 display
.resize(5, 7);
126 expect(display
._fb_width
).to
.equal(5);
127 expect(display
._fb_height
).to
.equal(7);
130 it('should keep the framebuffer data', function () {
131 display
.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
132 display
.resize(2, 2);
135 for (let i
= 0; i
< 4 * 2*2; i
+= 4) {
137 expected
[i
+1] = expected
[i
+2] = 0;
138 expected
[i
+3] = 0xff;
140 expect(display
).to
.have
.displayed(new Uint8Array(expected
));
143 describe('viewport', function () {
144 beforeEach(function () {
145 display
.clipViewport
= true;
146 display
.viewportChangeSize(3, 3);
147 display
.viewportChangePos(1, 1);
150 it('should keep the viewport position and size if possible', function () {
151 display
.resize(6, 6);
152 expect(display
.absX(0)).to
.equal(1);
153 expect(display
.absY(0)).to
.equal(1);
154 expect(display
._target
.width
).to
.equal(3);
155 expect(display
._target
.height
).to
.equal(3);
158 it('should move the viewport if necessary', function () {
159 display
.resize(3, 3);
160 expect(display
.absX(0)).to
.equal(0);
161 expect(display
.absY(0)).to
.equal(0);
162 expect(display
._target
.width
).to
.equal(3);
163 expect(display
._target
.height
).to
.equal(3);
166 it('should shrink the viewport if necessary', function () {
167 display
.resize(2, 2);
168 expect(display
.absX(0)).to
.equal(0);
169 expect(display
.absY(0)).to
.equal(0);
170 expect(display
._target
.width
).to
.equal(2);
171 expect(display
._target
.height
).to
.equal(2);
176 describe('rescaling', function () {
180 beforeEach(function () {
181 canvas
= document
.createElement('canvas');
182 display
= new Display(canvas
);
183 display
.clipViewport
= true;
184 display
.resize(4, 4);
185 display
.viewportChangeSize(3, 3);
186 display
.viewportChangePos(1, 1);
187 document
.body
.appendChild(canvas
);
190 afterEach(function () {
191 document
.body
.removeChild(canvas
);
194 it('should not change the bitmap size of the canvas', function () {
196 expect(canvas
.width
).to
.equal(3);
197 expect(canvas
.height
).to
.equal(3);
200 it('should change the effective rendered size of the canvas', function () {
202 expect(canvas
.clientWidth
).to
.equal(6);
203 expect(canvas
.clientHeight
).to
.equal(6);
206 it('should not change when resizing', function () {
208 display
.resize(5, 5);
209 expect(display
.scale
).to
.equal(2.0);
210 expect(canvas
.width
).to
.equal(3);
211 expect(canvas
.height
).to
.equal(3);
212 expect(canvas
.clientWidth
).to
.equal(6);
213 expect(canvas
.clientHeight
).to
.equal(6);
217 describe('autoscaling', function () {
221 beforeEach(function () {
222 canvas
= document
.createElement('canvas');
223 display
= new Display(canvas
);
224 display
.clipViewport
= true;
225 display
.resize(4, 3);
226 document
.body
.appendChild(canvas
);
229 afterEach(function () {
230 document
.body
.removeChild(canvas
);
233 it('should preserve aspect ratio while autoscaling', function () {
234 display
.autoscale(16, 9);
235 expect(canvas
.clientWidth
/ canvas
.clientHeight
).to
.equal(4 / 3);
238 it('should use width to determine scale when the current aspect ratio is wider than the target', function () {
239 display
.autoscale(9, 16);
240 expect(display
.absX(9)).to
.equal(4);
241 expect(display
.absY(18)).to
.equal(8);
242 expect(canvas
.clientWidth
).to
.equal(9);
243 expect(canvas
.clientHeight
).to
.equal(7); // round 9 / (4 / 3)
246 it('should use height to determine scale when the current aspect ratio is taller than the target', function () {
247 display
.autoscale(16, 9);
248 expect(display
.absX(9)).to
.equal(3);
249 expect(display
.absY(18)).to
.equal(6);
250 expect(canvas
.clientWidth
).to
.equal(12); // 16 * (4 / 3)
251 expect(canvas
.clientHeight
).to
.equal(9);
255 it('should not change the bitmap size of the canvas', function () {
256 display
.autoscale(16, 9);
257 expect(canvas
.width
).to
.equal(4);
258 expect(canvas
.height
).to
.equal(3);
262 describe('drawing', function () {
264 // TODO(directxman12): improve the tests for each of the drawing functions to cover more than just the
267 beforeEach(function () {
268 display
= new Display(document
.createElement('canvas'));
269 display
.resize(4, 4);
272 it('should clear the screen on #clear without a logo set', function () {
273 display
.fillRect(0, 0, 4, 4, [0x00, 0x00, 0xff]);
274 display
._logo
= null;
276 display
.resize(4, 4);
278 for (let i
= 0; i
< 4 * display
._fb_width
* display
._fb_height
; i
++) { empty
[i
] = 0; }
279 expect(display
).to
.have
.displayed(new Uint8Array(empty
));
282 it('should draw the logo on #clear with a logo set', function (done
) {
283 display
._logo
= { width
: 4, height
: 4, type
: "image/png", data
: make_image_png(checked_data
) };
285 display
.onflush
= () => {
286 expect(display
).to
.have
.displayed(checked_data
);
287 expect(display
._fb_width
).to
.equal(4);
288 expect(display
._fb_height
).to
.equal(4);
294 it('should not draw directly on the target canvas', function () {
295 display
.fillRect(0, 0, 4, 4, [0, 0, 0xff]);
297 display
.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
299 for (let i
= 0; i
< 4 * display
._fb_width
* display
._fb_height
; i
+= 4) {
301 expected
[i
+1] = expected
[i
+2] = 0;
302 expected
[i
+3] = 0xff;
304 expect(display
).to
.have
.displayed(new Uint8Array(expected
));
307 it('should support filling a rectangle with particular color via #fillRect', function () {
308 display
.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
309 display
.fillRect(0, 0, 2, 2, [0xff, 0, 0]);
310 display
.fillRect(2, 2, 2, 2, [0xff, 0, 0]);
312 expect(display
).to
.have
.displayed(checked_data
);
315 it('should support copying an portion of the canvas via #copyImage', function () {
316 display
.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
317 display
.fillRect(0, 0, 2, 2, [0xff, 0, 0x00]);
318 display
.copyImage(0, 0, 2, 2, 2, 2);
320 expect(display
).to
.have
.displayed(checked_data
);
323 it('should support drawing images via #imageRect', function (done
) {
324 display
.imageRect(0, 0, "image/png", make_image_png(checked_data
));
326 display
.onflush
= () => {
327 expect(display
).to
.have
.displayed(checked_data
);
333 it('should support drawing tile data with a background color and sub tiles', function () {
334 display
.startTile(0, 0, 4, 4, [0, 0xff, 0]);
335 display
.subTile(0, 0, 2, 2, [0xff, 0, 0]);
336 display
.subTile(2, 2, 2, 2, [0xff, 0, 0]);
337 display
.finishTile();
339 expect(display
).to
.have
.displayed(checked_data
);
342 // We have a special cache for 16x16 tiles that we need to test
343 it('should support drawing a 16x16 tile', function () {
344 const large_checked_data
= new Uint8Array(16*16*4);
345 display
.resize(16, 16);
347 for (let y
= 0;y
< 16;y
++) {
348 for (let x
= 0;x
< 16;x
++) {
350 if ((x
< 4) && (y
< 4)) {
351 // NB: of course IE11 doesn't support #slice on ArrayBufferViews...
352 pixel
= Array
.prototype.slice
.call(checked_data
, (y
*4+x
)*4, (y
*4+x
+1)*4);
354 pixel
= [0, 0xff, 0, 255];
356 large_checked_data
.set(pixel
, (y
*16+x
)*4);
360 display
.startTile(0, 0, 16, 16, [0, 0xff, 0]);
361 display
.subTile(0, 0, 2, 2, [0xff, 0, 0]);
362 display
.subTile(2, 2, 2, 2, [0xff, 0, 0]);
363 display
.finishTile();
365 expect(display
).to
.have
.displayed(large_checked_data
);
368 it('should support drawing BGRX blit images with true color via #blitImage', function () {
370 for (let i
= 0; i
< 16; i
++) {
371 data
[i
* 4] = checked_data
[i
* 4 + 2];
372 data
[i
* 4 + 1] = checked_data
[i
* 4 + 1];
373 data
[i
* 4 + 2] = checked_data
[i
* 4];
374 data
[i
* 4 + 3] = checked_data
[i
* 4 + 3];
376 display
.blitImage(0, 0, 4, 4, data
, 0);
378 expect(display
).to
.have
.displayed(checked_data
);
381 it('should support drawing RGB blit images with true color via #blitRgbImage', function () {
383 for (let i
= 0; i
< 16; i
++) {
384 data
[i
* 3] = checked_data
[i
* 4];
385 data
[i
* 3 + 1] = checked_data
[i
* 4 + 1];
386 data
[i
* 3 + 2] = checked_data
[i
* 4 + 2];
388 display
.blitRgbImage(0, 0, 4, 4, data
, 0);
390 expect(display
).to
.have
.displayed(checked_data
);
393 it('should support drawing an image object via #drawImage', function () {
394 const img
= make_image_canvas(checked_data
);
395 display
.drawImage(img
, 0, 0);
397 expect(display
).to
.have
.displayed(checked_data
);
401 describe('the render queue processor', function () {
403 beforeEach(function () {
404 display
= new Display(document
.createElement('canvas'));
405 display
.resize(4, 4);
406 sinon
.spy(display
, '_scan_renderQ');
409 afterEach(function () {
410 window
.requestAnimationFrame
= this.old_requestAnimationFrame
;
413 it('should try to process an item when it is pushed on, if nothing else is on the queue', function () {
414 display
._renderQ_push({ type
: 'noop' }); // does nothing
415 expect(display
._scan_renderQ
).to
.have
.been
.calledOnce
;
418 it('should not try to process an item when it is pushed on if we are waiting for other items', function () {
419 display
._renderQ
.length
= 2;
420 display
._renderQ_push({ type
: 'noop' });
421 expect(display
._scan_renderQ
).to
.not
.have
.been
.called
;
424 it('should wait until an image is loaded to attempt to draw it and the rest of the queue', function () {
425 const img
= { complete
: false, addEventListener
: sinon
.spy() };
426 display
._renderQ
= [{ type
: 'img', x
: 3, y
: 4, img
: img
},
427 { type
: 'fill', x
: 1, y
: 2, width
: 3, height
: 4, color
: 5 }];
428 display
.drawImage
= sinon
.spy();
429 display
.fillRect
= sinon
.spy();
431 display
._scan_renderQ();
432 expect(display
.drawImage
).to
.not
.have
.been
.called
;
433 expect(display
.fillRect
).to
.not
.have
.been
.called
;
434 expect(img
.addEventListener
).to
.have
.been
.calledOnce
;
436 display
._renderQ
[0].img
.complete
= true;
437 display
._scan_renderQ();
438 expect(display
.drawImage
).to
.have
.been
.calledOnce
;
439 expect(display
.fillRect
).to
.have
.been
.calledOnce
;
440 expect(img
.addEventListener
).to
.have
.been
.calledOnce
;
443 it('should call callback when queue is flushed', function () {
444 display
.onflush
= sinon
.spy();
445 display
.fillRect(0, 0, 4, 4, [0, 0xff, 0]);
446 expect(display
.onflush
).to
.not
.have
.been
.called
;
448 expect(display
.onflush
).to
.have
.been
.calledOnce
;
451 it('should draw a blit image on type "blit"', function () {
452 display
.blitImage
= sinon
.spy();
453 display
._renderQ_push({ type
: 'blit', x
: 3, y
: 4, width
: 5, height
: 6, data
: [7, 8, 9] });
454 expect(display
.blitImage
).to
.have
.been
.calledOnce
;
455 expect(display
.blitImage
).to
.have
.been
.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
458 it('should draw a blit RGB image on type "blitRgb"', function () {
459 display
.blitRgbImage
= sinon
.spy();
460 display
._renderQ_push({ type
: 'blitRgb', x
: 3, y
: 4, width
: 5, height
: 6, data
: [7, 8, 9] });
461 expect(display
.blitRgbImage
).to
.have
.been
.calledOnce
;
462 expect(display
.blitRgbImage
).to
.have
.been
.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
465 it('should copy a region on type "copy"', function () {
466 display
.copyImage
= sinon
.spy();
467 display
._renderQ_push({ type
: 'copy', x
: 3, y
: 4, width
: 5, height
: 6, old_x
: 7, old_y
: 8 });
468 expect(display
.copyImage
).to
.have
.been
.calledOnce
;
469 expect(display
.copyImage
).to
.have
.been
.calledWith(7, 8, 3, 4, 5, 6);
472 it('should fill a rect with a given color on type "fill"', function () {
473 display
.fillRect
= sinon
.spy();
474 display
._renderQ_push({ type
: 'fill', x
: 3, y
: 4, width
: 5, height
: 6, color
: [7, 8, 9]});
475 expect(display
.fillRect
).to
.have
.been
.calledOnce
;
476 expect(display
.fillRect
).to
.have
.been
.calledWith(3, 4, 5, 6, [7, 8, 9]);
479 it('should draw an image from an image object on type "img" (if complete)', function () {
480 display
.drawImage
= sinon
.spy();
481 display
._renderQ_push({ type
: 'img', x
: 3, y
: 4, img
: { complete
: true } });
482 expect(display
.drawImage
).to
.have
.been
.calledOnce
;
483 expect(display
.drawImage
).to
.have
.been
.calledWith({ complete
: true }, 3, 4);