809 lines
27 KiB
JavaScript
809 lines
27 KiB
JavaScript
/* Copyright 2017 Mozilla Foundation
|
|
*
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
* you may not use this file except in compliance with the License.
|
|
* You may obtain a copy of the License at
|
|
*
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
*
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
* See the License for the specific language governing permissions and
|
|
* limitations under the License.
|
|
*/
|
|
|
|
import {
|
|
backtrackBeforeAllVisibleElements, binarySearchFirstItem, EventBus,
|
|
getPageSizeInches, getPDFFileNameFromURL, getVisibleElements,
|
|
isPortraitOrientation, isValidRotation, moveToEndOfArray,
|
|
waitOnEventOrTimeout, WaitOnType
|
|
} from '../../web/ui_utils';
|
|
import { createObjectURL } from '../../src/shared/util';
|
|
import isNodeJS from '../../src/shared/is_node';
|
|
|
|
describe('ui_utils', function() {
|
|
describe('binary search', function() {
|
|
function isTrue(boolean) {
|
|
return boolean;
|
|
}
|
|
function isGreater3(number) {
|
|
return number > 3;
|
|
}
|
|
|
|
it('empty array', function() {
|
|
expect(binarySearchFirstItem([], isTrue)).toEqual(0);
|
|
});
|
|
it('single boolean entry', function() {
|
|
expect(binarySearchFirstItem([false], isTrue)).toEqual(1);
|
|
expect(binarySearchFirstItem([true], isTrue)).toEqual(0);
|
|
});
|
|
it('three boolean entries', function() {
|
|
expect(binarySearchFirstItem([true, true, true], isTrue)).toEqual(0);
|
|
expect(binarySearchFirstItem([false, true, true], isTrue)).toEqual(1);
|
|
expect(binarySearchFirstItem([false, false, true], isTrue)).toEqual(2);
|
|
expect(binarySearchFirstItem([false, false, false], isTrue)).toEqual(3);
|
|
});
|
|
it('three numeric entries', function() {
|
|
expect(binarySearchFirstItem([0, 1, 2], isGreater3)).toEqual(3);
|
|
expect(binarySearchFirstItem([2, 3, 4], isGreater3)).toEqual(2);
|
|
expect(binarySearchFirstItem([4, 5, 6], isGreater3)).toEqual(0);
|
|
});
|
|
});
|
|
|
|
describe('getPDFFileNameFromURL', function() {
|
|
it('gets PDF filename', function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL('/pdfs/file1.pdf')).toEqual('file1.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL(
|
|
'http://www.example.com/pdfs/file2.pdf')).toEqual('file2.pdf');
|
|
});
|
|
|
|
it('gets fallback filename', function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL('/pdfs/file1.txt')).toEqual('document.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL(
|
|
'http://www.example.com/pdfs/file2.txt')).toEqual('document.pdf');
|
|
});
|
|
|
|
it('gets custom fallback filename', function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL('/pdfs/file1.txt', 'qwerty1.pdf')).
|
|
toEqual('qwerty1.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL('http://www.example.com/pdfs/file2.txt',
|
|
'qwerty2.pdf')).toEqual('qwerty2.pdf');
|
|
|
|
// An empty string should be a valid custom fallback filename.
|
|
expect(getPDFFileNameFromURL('/pdfs/file3.txt', '')).toEqual('');
|
|
});
|
|
|
|
it('gets fallback filename when url is not a string', function() {
|
|
expect(getPDFFileNameFromURL(null)).toEqual('document.pdf');
|
|
|
|
expect(getPDFFileNameFromURL(null, 'file.pdf')).toEqual('file.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from URL containing leading/trailing whitespace',
|
|
function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL(
|
|
' /pdfs/file1.pdf ')).toEqual('file1.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL(
|
|
' http://www.example.com/pdfs/file2.pdf ')).toEqual('file2.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from query string', function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL(
|
|
'/pdfs/pdfs.html?name=file1.pdf')).toEqual('file1.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL(
|
|
'http://www.example.com/pdfs/pdf.html?file2.pdf')).toEqual('file2.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from hash string', function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL(
|
|
'/pdfs/pdfs.html#name=file1.pdf')).toEqual('file1.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL(
|
|
'http://www.example.com/pdfs/pdf.html#file2.pdf')).toEqual('file2.pdf');
|
|
});
|
|
|
|
it('gets correct PDF filename when multiple ones are present', function() {
|
|
// Relative URL
|
|
expect(getPDFFileNameFromURL(
|
|
'/pdfs/file1.pdf?name=file.pdf')).toEqual('file1.pdf');
|
|
// Absolute URL
|
|
expect(getPDFFileNameFromURL(
|
|
'http://www.example.com/pdfs/file2.pdf#file.pdf')).toEqual('file2.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from URI-encoded data', function() {
|
|
var encodedUrl = encodeURIComponent(
|
|
'http://www.example.com/pdfs/file1.pdf');
|
|
expect(getPDFFileNameFromURL(encodedUrl)).toEqual('file1.pdf');
|
|
|
|
var encodedUrlWithQuery = encodeURIComponent(
|
|
'http://www.example.com/pdfs/file.txt?file2.pdf');
|
|
expect(getPDFFileNameFromURL(encodedUrlWithQuery)).toEqual('file2.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from data mistaken for URI-encoded', function() {
|
|
expect(getPDFFileNameFromURL('/pdfs/%AA.pdf')).toEqual('%AA.pdf');
|
|
|
|
expect(getPDFFileNameFromURL('/pdfs/%2F.pdf')).toEqual('%2F.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from (some) standard protocols', function() {
|
|
// HTTP
|
|
expect(getPDFFileNameFromURL('http://www.example.com/file1.pdf')).
|
|
toEqual('file1.pdf');
|
|
// HTTPS
|
|
expect(getPDFFileNameFromURL('https://www.example.com/file2.pdf')).
|
|
toEqual('file2.pdf');
|
|
// File
|
|
expect(getPDFFileNameFromURL('file:///path/to/files/file3.pdf')).
|
|
toEqual('file3.pdf');
|
|
// FTP
|
|
expect(getPDFFileNameFromURL('ftp://www.example.com/file4.pdf')).
|
|
toEqual('file4.pdf');
|
|
});
|
|
|
|
it('gets PDF filename from query string appended to "blob:" URL',
|
|
function() {
|
|
if (isNodeJS()) {
|
|
pending('Blob in not supported in Node.js.');
|
|
}
|
|
var typedArray = new Uint8Array([1, 2, 3, 4, 5]);
|
|
var blobUrl = createObjectURL(typedArray, 'application/pdf');
|
|
// Sanity check to ensure that a "blob:" URL was returned.
|
|
expect(blobUrl.indexOf('blob:') === 0).toEqual(true);
|
|
|
|
expect(getPDFFileNameFromURL(blobUrl + '?file.pdf')).toEqual('file.pdf');
|
|
});
|
|
|
|
it('gets fallback filename from query string appended to "data:" URL',
|
|
function() {
|
|
var typedArray = new Uint8Array([1, 2, 3, 4, 5]);
|
|
var dataUrl = createObjectURL(typedArray, 'application/pdf',
|
|
/* forceDataSchema = */ true);
|
|
// Sanity check to ensure that a "data:" URL was returned.
|
|
expect(dataUrl.indexOf('data:') === 0).toEqual(true);
|
|
|
|
expect(getPDFFileNameFromURL(dataUrl + '?file1.pdf')).
|
|
toEqual('document.pdf');
|
|
|
|
// Should correctly detect a "data:" URL with leading whitespace.
|
|
expect(getPDFFileNameFromURL(' ' + dataUrl + '?file2.pdf')).
|
|
toEqual('document.pdf');
|
|
});
|
|
});
|
|
|
|
describe('EventBus', function () {
|
|
it('dispatch event', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
eventBus.on('test', function(evt) {
|
|
expect(evt).toEqual(undefined);
|
|
count++;
|
|
});
|
|
eventBus.dispatch('test');
|
|
expect(count).toEqual(1);
|
|
});
|
|
it('dispatch event with arguments', function() {
|
|
const eventBus = new EventBus();
|
|
let count = 0;
|
|
eventBus.on('test', function(evt) {
|
|
expect(evt).toEqual({ abc: 123, });
|
|
count++;
|
|
});
|
|
eventBus.dispatch('test', {
|
|
abc: 123,
|
|
});
|
|
expect(count).toEqual(1);
|
|
});
|
|
it('dispatch different event', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
eventBus.on('test', function () {
|
|
count++;
|
|
});
|
|
eventBus.dispatch('nottest');
|
|
expect(count).toEqual(0);
|
|
});
|
|
it('dispatch event multiple times', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
eventBus.dispatch('test');
|
|
eventBus.on('test', function () {
|
|
count++;
|
|
});
|
|
eventBus.dispatch('test');
|
|
eventBus.dispatch('test');
|
|
expect(count).toEqual(2);
|
|
});
|
|
it('dispatch event to multiple handlers', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
eventBus.on('test', function () {
|
|
count++;
|
|
});
|
|
eventBus.on('test', function () {
|
|
count++;
|
|
});
|
|
eventBus.dispatch('test');
|
|
expect(count).toEqual(2);
|
|
});
|
|
it('dispatch to detached', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
var listener = function () {
|
|
count++;
|
|
};
|
|
eventBus.on('test', listener);
|
|
eventBus.dispatch('test');
|
|
eventBus.off('test', listener);
|
|
eventBus.dispatch('test');
|
|
expect(count).toEqual(1);
|
|
});
|
|
it('dispatch to wrong detached', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
eventBus.on('test', function () {
|
|
count++;
|
|
});
|
|
eventBus.dispatch('test');
|
|
eventBus.off('test', function () {
|
|
count++;
|
|
});
|
|
eventBus.dispatch('test');
|
|
expect(count).toEqual(2);
|
|
});
|
|
it('dispatch to detached during handling', function () {
|
|
var eventBus = new EventBus();
|
|
var count = 0;
|
|
var listener1 = function () {
|
|
eventBus.off('test', listener2);
|
|
count++;
|
|
};
|
|
var listener2 = function () {
|
|
eventBus.off('test', listener1);
|
|
count++;
|
|
};
|
|
eventBus.on('test', listener1);
|
|
eventBus.on('test', listener2);
|
|
eventBus.dispatch('test');
|
|
eventBus.dispatch('test');
|
|
expect(count).toEqual(2);
|
|
});
|
|
|
|
it('should not, by default, re-dispatch to DOM', function(done) {
|
|
if (isNodeJS()) {
|
|
pending('Document in not supported in Node.js.');
|
|
}
|
|
const eventBus = new EventBus();
|
|
let count = 0;
|
|
eventBus.on('test', function(evt) {
|
|
expect(evt).toEqual(undefined);
|
|
count++;
|
|
});
|
|
function domEventListener() {
|
|
done.fail('shall not dispatch DOM event.');
|
|
}
|
|
document.addEventListener('test', domEventListener);
|
|
|
|
eventBus.dispatch('test');
|
|
|
|
Promise.resolve().then(() => {
|
|
expect(count).toEqual(1);
|
|
|
|
document.removeEventListener('test', domEventListener);
|
|
done();
|
|
});
|
|
});
|
|
it('should re-dispatch to DOM', function(done) {
|
|
if (isNodeJS()) {
|
|
pending('Document in not supported in Node.js.');
|
|
}
|
|
const eventBus = new EventBus({ dispatchToDOM: true, });
|
|
let count = 0;
|
|
eventBus.on('test', function(evt) {
|
|
expect(evt).toEqual(undefined);
|
|
count++;
|
|
});
|
|
function domEventListener(evt) {
|
|
expect(evt.detail).toEqual({});
|
|
count++;
|
|
}
|
|
document.addEventListener('test', domEventListener);
|
|
|
|
eventBus.dispatch('test');
|
|
|
|
Promise.resolve().then(() => {
|
|
expect(count).toEqual(2);
|
|
|
|
document.removeEventListener('test', domEventListener);
|
|
done();
|
|
});
|
|
});
|
|
it('should re-dispatch to DOM, with arguments (without internal listeners)',
|
|
function(done) {
|
|
if (isNodeJS()) {
|
|
pending('Document in not supported in Node.js.');
|
|
}
|
|
const eventBus = new EventBus({ dispatchToDOM: true, });
|
|
let count = 0;
|
|
function domEventListener(evt) {
|
|
expect(evt.detail).toEqual({ abc: 123, });
|
|
count++;
|
|
}
|
|
document.addEventListener('test', domEventListener);
|
|
|
|
eventBus.dispatch('test', {
|
|
abc: 123,
|
|
});
|
|
|
|
Promise.resolve().then(() => {
|
|
expect(count).toEqual(1);
|
|
|
|
document.removeEventListener('test', domEventListener);
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('isValidRotation', function() {
|
|
it('should reject non-integer angles', function() {
|
|
expect(isValidRotation()).toEqual(false);
|
|
expect(isValidRotation(null)).toEqual(false);
|
|
expect(isValidRotation(NaN)).toEqual(false);
|
|
expect(isValidRotation([90])).toEqual(false);
|
|
expect(isValidRotation('90')).toEqual(false);
|
|
expect(isValidRotation(90.5)).toEqual(false);
|
|
});
|
|
|
|
it('should reject non-multiple of 90 degree angles', function() {
|
|
expect(isValidRotation(45)).toEqual(false);
|
|
expect(isValidRotation(-123)).toEqual(false);
|
|
});
|
|
|
|
it('should accept valid angles', function() {
|
|
expect(isValidRotation(0)).toEqual(true);
|
|
expect(isValidRotation(90)).toEqual(true);
|
|
expect(isValidRotation(-270)).toEqual(true);
|
|
expect(isValidRotation(540)).toEqual(true);
|
|
});
|
|
});
|
|
|
|
describe('isPortraitOrientation', function() {
|
|
it('should be portrait orientation', function() {
|
|
expect(isPortraitOrientation({
|
|
width: 200,
|
|
height: 400,
|
|
})).toEqual(true);
|
|
|
|
expect(isPortraitOrientation({
|
|
width: 500,
|
|
height: 500,
|
|
})).toEqual(true);
|
|
});
|
|
|
|
it('should be landscape orientation', function() {
|
|
expect(isPortraitOrientation({
|
|
width: 600,
|
|
height: 300,
|
|
})).toEqual(false);
|
|
});
|
|
});
|
|
|
|
describe('waitOnEventOrTimeout', function() {
|
|
let eventBus;
|
|
|
|
beforeAll(function(done) {
|
|
eventBus = new EventBus();
|
|
done();
|
|
});
|
|
|
|
afterAll(function() {
|
|
eventBus = null;
|
|
});
|
|
|
|
it('should reject invalid parameters', function(done) {
|
|
let invalidTarget = waitOnEventOrTimeout({
|
|
target: 'window',
|
|
name: 'DOMContentLoaded',
|
|
}).then(function() {
|
|
throw new Error('Should reject invalid parameters.');
|
|
}, function(reason) {
|
|
expect(reason instanceof Error).toEqual(true);
|
|
});
|
|
|
|
let invalidName = waitOnEventOrTimeout({
|
|
target: eventBus,
|
|
name: '',
|
|
}).then(function() {
|
|
throw new Error('Should reject invalid parameters.');
|
|
}, function(reason) {
|
|
expect(reason instanceof Error).toEqual(true);
|
|
});
|
|
|
|
let invalidDelay = waitOnEventOrTimeout({
|
|
target: eventBus,
|
|
name: 'pagerendered',
|
|
delay: -1000,
|
|
}).then(function() {
|
|
throw new Error('Should reject invalid parameters.');
|
|
}, function(reason) {
|
|
expect(reason instanceof Error).toEqual(true);
|
|
});
|
|
|
|
Promise.all([invalidTarget, invalidName, invalidDelay]).then(done,
|
|
done.fail);
|
|
});
|
|
|
|
it('should resolve on event, using the DOM', function(done) {
|
|
if (isNodeJS()) {
|
|
pending('Document in not supported in Node.js.');
|
|
}
|
|
let button = document.createElement('button');
|
|
|
|
let buttonClicked = waitOnEventOrTimeout({
|
|
target: button,
|
|
name: 'click',
|
|
delay: 10000,
|
|
});
|
|
// Immediately dispatch the expected event.
|
|
button.click();
|
|
|
|
buttonClicked.then(function(type) {
|
|
expect(type).toEqual(WaitOnType.EVENT);
|
|
done();
|
|
}, done.fail);
|
|
});
|
|
|
|
it('should resolve on timeout, using the DOM', function(done) {
|
|
if (isNodeJS()) {
|
|
pending('Document in not supported in Node.js.');
|
|
}
|
|
let button = document.createElement('button');
|
|
|
|
let buttonClicked = waitOnEventOrTimeout({
|
|
target: button,
|
|
name: 'click',
|
|
delay: 10,
|
|
});
|
|
// Do *not* dispatch the event, and wait for the timeout.
|
|
|
|
buttonClicked.then(function(type) {
|
|
expect(type).toEqual(WaitOnType.TIMEOUT);
|
|
done();
|
|
}, done.fail);
|
|
});
|
|
|
|
it('should resolve on event, using the EventBus', function(done) {
|
|
let pageRendered = waitOnEventOrTimeout({
|
|
target: eventBus,
|
|
name: 'pagerendered',
|
|
delay: 10000,
|
|
});
|
|
// Immediately dispatch the expected event.
|
|
eventBus.dispatch('pagerendered');
|
|
|
|
pageRendered.then(function(type) {
|
|
expect(type).toEqual(WaitOnType.EVENT);
|
|
done();
|
|
}, done.fail);
|
|
});
|
|
|
|
it('should resolve on timeout, using the EventBus', function(done) {
|
|
let pageRendered = waitOnEventOrTimeout({
|
|
target: eventBus,
|
|
name: 'pagerendered',
|
|
delay: 10,
|
|
});
|
|
// Do *not* dispatch the event, and wait for the timeout.
|
|
|
|
pageRendered.then(function(type) {
|
|
expect(type).toEqual(WaitOnType.TIMEOUT);
|
|
done();
|
|
}, done.fail);
|
|
});
|
|
});
|
|
|
|
describe('getPageSizeInches', function () {
|
|
it('gets page size (in inches)', function() {
|
|
const page = {
|
|
view: [0, 0, 595.28, 841.89],
|
|
userUnit: 1.0,
|
|
rotate: 0,
|
|
};
|
|
const { width, height, } = getPageSizeInches(page);
|
|
|
|
expect(+width.toPrecision(3)).toEqual(8.27);
|
|
expect(+height.toPrecision(4)).toEqual(11.69);
|
|
});
|
|
|
|
it('gets page size (in inches), for non-default /Rotate entry', function() {
|
|
const pdfPage1 = { view: [0, 0, 612, 792], userUnit: 1, rotate: 0, };
|
|
const { width: width1, height: height1, } = getPageSizeInches(pdfPage1);
|
|
|
|
expect(width1).toEqual(8.5);
|
|
expect(height1).toEqual(11);
|
|
|
|
const pdfPage2 = { view: [0, 0, 612, 792], userUnit: 1, rotate: 90, };
|
|
const { width: width2, height: height2, } = getPageSizeInches(pdfPage2);
|
|
|
|
expect(width2).toEqual(11);
|
|
expect(height2).toEqual(8.5);
|
|
});
|
|
});
|
|
|
|
describe('getVisibleElements', function() {
|
|
// These values are based on margin/border values in the CSS, but there
|
|
// isn't any real need for them to be; they just need to take *some* value.
|
|
const BORDER_WIDTH = 9;
|
|
const SPACING = 2 * BORDER_WIDTH - 7;
|
|
|
|
// This is a helper function for assembling an array of view stubs from an
|
|
// array of arrays of [width, height] pairs, which represents wrapped lines
|
|
// of pages. It uses the above constants to add realistic spacing between
|
|
// the pages and the lines.
|
|
//
|
|
// If you're reading a test that calls makePages, you should think of the
|
|
// inputs to makePages as boxes with no borders, being laid out in a
|
|
// container that has no margins, so that the top of the tallest page in
|
|
// the first row will be at y = 0, and the left of the first page in
|
|
// the first row will be at x = 0. The spacing between pages in a row, and
|
|
// the spacing between rows, is SPACING. If you wanted to construct an
|
|
// actual HTML document with the same layout, you should give each page
|
|
// element a margin-right and margin-bottom of SPACING, and add no other
|
|
// margins, borders, or padding.
|
|
//
|
|
// If you're reading makePages itself, you'll see a somewhat more
|
|
// complicated picture because this suite of tests is exercising
|
|
// getVisibleElements' ability to account for the borders that real page
|
|
// elements have. makePages tests this by subtracting a BORDER_WIDTH from
|
|
// offsetLeft/Top and adding it to clientLeft/Top. So the element stubs that
|
|
// getVisibleElements sees may, for example, actually have an offsetTop of
|
|
// -9. If everything is working correctly, this detail won't leak out into
|
|
// the tests themselves, and so the tests shouldn't use the value of
|
|
// BORDER_WIDTH at all.
|
|
function makePages(lines) {
|
|
const result = [];
|
|
let lineTop = 0, id = 0;
|
|
for (const line of lines) {
|
|
const lineHeight = line.reduce(function(maxHeight, pair) {
|
|
return Math.max(maxHeight, pair[1]);
|
|
}, 0);
|
|
let offsetLeft = -BORDER_WIDTH;
|
|
for (const [clientWidth, clientHeight] of line) {
|
|
const offsetTop =
|
|
lineTop + (lineHeight - clientHeight) / 2 - BORDER_WIDTH;
|
|
const div = {
|
|
offsetLeft, offsetTop, clientWidth, clientHeight,
|
|
clientLeft: BORDER_WIDTH, clientTop: BORDER_WIDTH,
|
|
};
|
|
result.push({ id, div, });
|
|
++id;
|
|
offsetLeft += clientWidth + SPACING;
|
|
}
|
|
lineTop += lineHeight + SPACING;
|
|
}
|
|
return result;
|
|
}
|
|
|
|
// This is a reimplementation of getVisibleElements without the
|
|
// optimizations.
|
|
function slowGetVisibleElements(scroll, pages) {
|
|
const views = [];
|
|
const { scrollLeft, scrollTop, } = scroll;
|
|
const scrollRight = scrollLeft + scroll.clientWidth;
|
|
const scrollBottom = scrollTop + scroll.clientHeight;
|
|
for (const view of pages) {
|
|
const { div, } = view;
|
|
const viewLeft = div.offsetLeft + div.clientLeft;
|
|
const viewRight = viewLeft + div.clientWidth;
|
|
const viewTop = div.offsetTop + div.clientTop;
|
|
const viewBottom = viewTop + div.clientHeight;
|
|
|
|
if (viewLeft < scrollRight && viewRight > scrollLeft &&
|
|
viewTop < scrollBottom && viewBottom > scrollTop) {
|
|
const hiddenHeight = Math.max(0, scrollTop - viewTop) +
|
|
Math.max(0, viewBottom - scrollBottom);
|
|
const hiddenWidth = Math.max(0, scrollLeft - viewLeft) +
|
|
Math.max(0, viewRight - scrollRight);
|
|
const visibleArea = (div.clientHeight - hiddenHeight) *
|
|
(div.clientWidth - hiddenWidth);
|
|
const percent =
|
|
(visibleArea * 100 / div.clientHeight / div.clientWidth) | 0;
|
|
views.push({ id: view.id, x: viewLeft, y: viewTop, view, percent, });
|
|
}
|
|
}
|
|
return { first: views[0], last: views[views.length - 1], views, };
|
|
}
|
|
|
|
// This function takes a fixed layout of pages and compares the system under
|
|
// test to the slower implementation above, for a range of scroll viewport
|
|
// sizes and positions.
|
|
function scrollOverDocument(pages, horizontally = false) {
|
|
const size = pages.reduce(function(max, { div, }) {
|
|
return Math.max(
|
|
max,
|
|
horizontally ?
|
|
div.offsetLeft + div.clientLeft + div.clientWidth :
|
|
div.offsetTop + div.clientTop + div.clientHeight);
|
|
}, 0);
|
|
// The numbers (7 and 5) are mostly arbitrary, not magic: increase them to
|
|
// make scrollOverDocument tests faster, decrease them to make the tests
|
|
// more scrupulous, and keep them coprime to reduce the chance of missing
|
|
// weird edge case bugs.
|
|
for (let i = 0; i < size; i += 7) {
|
|
// The screen height (or width) here (j - i) doubles on each inner loop
|
|
// iteration; again, this is just to test an interesting range of cases
|
|
// without slowing the tests down to check every possible case.
|
|
for (let j = i + 5; j < size; j += (j - i)) {
|
|
const scroll = horizontally ? {
|
|
scrollTop: 0,
|
|
scrollLeft: i,
|
|
clientHeight: 10000,
|
|
clientWidth: j - i,
|
|
} : {
|
|
scrollTop: i,
|
|
scrollLeft: 0,
|
|
clientHeight: j - i,
|
|
clientWidth: 10000,
|
|
};
|
|
expect(getVisibleElements(scroll, pages, false, horizontally))
|
|
.toEqual(slowGetVisibleElements(scroll, pages));
|
|
}
|
|
}
|
|
}
|
|
|
|
it('with pages of varying height', function() {
|
|
const pages = makePages([
|
|
[[50, 20], [20, 50]],
|
|
[[30, 12], [12, 30]],
|
|
[[20, 50], [50, 20]],
|
|
[[50, 20], [20, 50]],
|
|
]);
|
|
scrollOverDocument(pages);
|
|
});
|
|
|
|
it('widescreen challenge', function() {
|
|
const pages = makePages([
|
|
[[10, 50], [10, 60], [10, 70], [10, 80], [10, 90]],
|
|
[[10, 90], [10, 80], [10, 70], [10, 60], [10, 50]],
|
|
[[10, 50], [10, 60], [10, 70], [10, 80], [10, 90]],
|
|
]);
|
|
scrollOverDocument(pages);
|
|
});
|
|
|
|
it('works with horizontal scrolling', function() {
|
|
const pages = makePages([
|
|
[[10, 50], [20, 20], [30, 10]],
|
|
]);
|
|
scrollOverDocument(pages, true);
|
|
});
|
|
|
|
// This sub-suite is for a notionally internal helper function for
|
|
// getVisibleElements.
|
|
describe('backtrackBeforeAllVisibleElements', function() {
|
|
// Layout elements common to all tests
|
|
const tallPage = [10, 50];
|
|
const shortPage = [10, 10];
|
|
|
|
// A scroll position that ensures that only the tall pages in the second
|
|
// row are visible
|
|
const top1 =
|
|
20 + SPACING + // height of the first row
|
|
40; // a value between 30 (so the short pages on the second row are
|
|
// hidden) and 50 (so the tall pages are visible)
|
|
|
|
// A scroll position that ensures that all of the pages in the second row
|
|
// are visible, but the tall ones are a tiny bit cut off
|
|
const top2 = 20 + SPACING + // height of the first row
|
|
10; // a value greater than 0 but less than 30
|
|
|
|
// These tests refer to cases enumerated in the comments of
|
|
// backtrackBeforeAllVisibleElements.
|
|
it('handles case 1', function() {
|
|
const pages = makePages([
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
[tallPage, shortPage, tallPage, shortPage],
|
|
[[10, 50], [10, 50], [10, 50], [10, 50]],
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
[[10, 20]],
|
|
]);
|
|
// binary search would land on the second row, first page
|
|
const bsResult = 4;
|
|
expect(backtrackBeforeAllVisibleElements(bsResult, pages, top1))
|
|
.toEqual(4);
|
|
});
|
|
|
|
it('handles case 2', function() {
|
|
const pages = makePages([
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
[tallPage, shortPage, tallPage, tallPage],
|
|
[[10, 50], [10, 50], [10, 50], [10, 50]],
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
]);
|
|
// binary search would land on the second row, third page
|
|
const bsResult = 6;
|
|
expect(backtrackBeforeAllVisibleElements(bsResult, pages, top1))
|
|
.toEqual(4);
|
|
});
|
|
|
|
it('handles case 3', function() {
|
|
const pages = makePages([
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
[tallPage, shortPage, tallPage, shortPage],
|
|
[[10, 50], [10, 50], [10, 50], [10, 50]],
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
]);
|
|
// binary search would land on the third row, first page
|
|
const bsResult = 8;
|
|
expect(backtrackBeforeAllVisibleElements(bsResult, pages, top1))
|
|
.toEqual(4);
|
|
});
|
|
|
|
it('handles case 4', function() {
|
|
const pages = makePages([
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
[tallPage, shortPage, tallPage, shortPage],
|
|
[[10, 50], [10, 50], [10, 50], [10, 50]],
|
|
[[10, 20], [10, 20], [10, 20], [10, 20]],
|
|
]);
|
|
// binary search would land on the second row, first page
|
|
const bsResult = 4;
|
|
expect(backtrackBeforeAllVisibleElements(bsResult, pages, top2))
|
|
.toEqual(4);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('moveToEndOfArray', function() {
|
|
it('works on empty arrays', function() {
|
|
const data = [];
|
|
moveToEndOfArray(data, function() {});
|
|
expect(data).toEqual([]);
|
|
});
|
|
|
|
it('works when moving everything', function() {
|
|
const data = [1, 2, 3, 4, 5];
|
|
moveToEndOfArray(data, function() {
|
|
return true;
|
|
});
|
|
expect(data).toEqual([1, 2, 3, 4, 5]);
|
|
});
|
|
|
|
it('works when moving some things', function() {
|
|
const data = [1, 2, 3, 4, 5];
|
|
moveToEndOfArray(data, function(x) {
|
|
return x % 2 === 0;
|
|
});
|
|
expect(data).toEqual([1, 3, 5, 2, 4]);
|
|
});
|
|
|
|
it('works when moving one thing', function() {
|
|
const data = [1, 2, 3, 4, 5];
|
|
moveToEndOfArray(data, function(x) {
|
|
return x === 1;
|
|
});
|
|
expect(data).toEqual([2, 3, 4, 5, 1]);
|
|
});
|
|
|
|
it('works when moving nothing', function() {
|
|
const data = [1, 2, 3, 4, 5];
|
|
moveToEndOfArray(data, function(x) {
|
|
return x === 0;
|
|
});
|
|
expect(data).toEqual([1, 2, 3, 4, 5]);
|
|
});
|
|
});
|
|
});
|