forked from floating-ui/floating-ui
/
getBoundaries.js
102 lines (92 loc) · 2.9 KB
/
getBoundaries.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import getBoundaries from '../../src/utils/getBoundaries';
import getFixedPositionOffsetParent from '../../src/utils/getFixedPositionOffsetParent';
import isIE from '../../src/utils/isIE';
describe('utils/getBoundaries', () => {
let node;
let spacing;
let scrolling;
let scrollingChild;
let popper;
let scrollingPopper;
function setCss(element, css) {
for (const key in css) {
if (css.hasOwnProperty(key)) {
element.style[key] = css[key];
}
}
}
function expectBoundary(result, expected) {
const tolerance = 2;
expect(Math.abs(result.top - expected.top) <= tolerance).toBeTruthy();
expect(Math.abs(result.right - expected.right) <= tolerance).toBeTruthy();
expect(Math.abs(result.bottom - expected.bottom) <= tolerance).toBeTruthy();
expect(Math.abs(result.left - expected.left) <= tolerance).toBeTruthy();
}
beforeEach(() => {
node = document.createElement('div');
spacing = document.createElement('div');
popper = document.createElement('div');
scrollingPopper = document.createElement('div');
scrolling = document.createElement('div');
setCss(scrolling, {
top: '150px',
left: '160px',
right: '300px',
bottom: '400px',
height: '150px',
width: '125px',
});
scrollingChild = document.createElement('div');
setCss(scrollingChild, {
overflow: 'scroll',
top: '50px',
left: '60px',
right: '-100px',
bottom: '-200px',
height: '350px',
width: '625px',
position: 'absolute',
transform: 'translate3d(100px, 100px, 0)',
willChange: 'transform',
});
document.body.appendChild(node);
node.appendChild(spacing);
node.appendChild(scrolling);
node.appendChild(popper);
scrolling.appendChild(scrollingChild);
scrollingChild.appendChild(scrollingPopper);
window.resizeTo(1024, 768);
});
afterEach(() => {
document.body.removeChild(node);
});
it('returns a boundary defined by the document element.', () => {
const result = getBoundaries(popper, node, 0, 'window', true);
expectBoundary(result, {
top: 0,
right: window.innerWidth,
bottom: window.innerHeight,
left: 0,
});
});
it('returns a boundary defined by the document element by way of a child reference.', () => {
const result = getBoundaries(popper, spacing, 0, 'scrollParent', true);
expectBoundary(result, {
top: 0,
right: window.innerWidth,
bottom: window.innerHeight,
left: 0,
});
});
it('returns a custom defined boundary within the page.', () => {
if(!isIE(10) && !isIE(11)) { //Test does not work with IE 10 or IE 11
const result = getBoundaries(scrollingPopper, scrollingChild, 0, 'scrollParent', true);
expectBoundary(result, {
top: -150,
right: window.innerWidth - 160,
bottom: window.innerHeight - 150,
left: -160,
});
}
});
});