arrow.js
2.78 KB
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
103
104
105
106
107
108
109
110
111
import Popper from '../../src/index.js';
import '@popperjs/test-utils';
const jasmineWrapper = document.getElementById('jasmineWrapper');
// Utils
import getRect from '../utils/getRect';
describe('[core]', () => {
afterEach(function() {
jasmineWrapper.scrollTop = 0;
jasmineWrapper.scrollLeft = 0;
});
it('arrowStyles gets defined', done => {
jasmineWrapper.innerHTML = `
<style>
table {
margin-top: 60px;
}
#reference {
background: orange;
width: 60px;
height: 60px;
margin-left: 60px;
}
#popper {
background: green;
width: 60px;
height: 60px;
margin: 20px;
box-shadow: 0 0 0 20px rgba(0, 128, 0, .2);
}
[x-arrow] {
position: absolute;
border-bottom: 8px solid green;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -8px;
}
</style>
<div id="reference">
ref
</div>
<div id="popper">
<div x-arrow id="arrow"></div>
pop
</div>
`;
const reference = document.getElementById('reference');
const popper = document.getElementById('popper');
new Popper(reference, popper, { placement: 'bottom', onCreate(data) {
expect(data.arrowStyles.left).toBeApprox(getRect(popper).width / 2 - 8);
expect(data.arrowStyles.top).toBe('');
data.instance.destroy();
done();
} });
});
it('arrow addresses popper margin', done => {
jasmineWrapper.innerHTML = `
<style>
table {
margin-top: 60px;
}
#reference {
background: orange;
width: 60px;
height: 60px;
margin-left: 60px;
}
#popper {
background: green;
width: 60px;
height: 60px;
margin: 20px;
box-shadow: 0 0 0 20px rgba(0, 128, 0, .2);
}
[x-arrow] {
position: absolute;
border-bottom: 8px solid green;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: -8px;
}
</style>
<div id="reference">
ref
</div>
<div id="popper">
<div x-arrow id="arrow"></div>
pop
</div>
`;
const reference = document.getElementById('reference');
const popper = document.getElementById('popper');
const arrow = document.getElementById('arrow');
new Popper(reference, popper, {
placement: 'bottom',
onCreate(data) {
expect(getRect(arrow).left + getRect(arrow).width / 2).toBeApprox(getRect(popper).left + getRect(popper).width / 2);
data.instance.destroy();
done();
},
});
});
});