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
|
<!DOCTYPE html> <title>Basic Visual Test</title>
<style>
@import '/reset.css';
#reference {
width: 200px;
height: 200px;
background-color: red;
box-shadow: inset 0 0 0 1px black;
}
#popper {
width: 100px;
height: 100px;
background-color: rebeccapurple;
box-shadow: inset 0 0 0 1px black;
}
html {
height: 100%;
overflow-y: hidden;
position: relative;
}
body {
height: inherit;
overflow-y: auto;
position: relative;
}
p {
margin-bottom: 20px;
}
</style>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a leo neque.
Fusce non massa nunc. Sed consequat, nunc porta vestibulum posuere, enim massa
imperdiet leo, vitae iaculis nibh sapien sit amet sem. Praesent semper
condimentum metus, ut faucibus est lobortis id. Cras sed malesuada diam.
Integer dictum lorem laoreet nibh viverra porta. Vivamus non suscipit erat,
vitae ultrices leo. Donec dignissim volutpat ligula, laoreet euismod dui
fermentum sit amet. Nam leo nisl, vehicula et orci at, maximus placerat eros.
</p>
<p>
Nullam libero purus, rutrum ac rhoncus a, facilisis vitae tortor. Curabitur eu
sodales elit, ut luctus sem. Nulla vel leo sed mauris egestas viverra eget
vitae augue. Phasellus porttitor justo sit amet arcu tempor, sed laoreet risus
efficitur. Aenean turpis dui, auctor tincidunt elit facilisis, tempor interdum
turpis. Aenean fringilla velit vulputate consectetur faucibus. Integer varius
vehicula mi, id eleifend lacus tristique ac. Praesent sit amet leo at metus
suscipit aliquet vel ut ligula. Vivamus semper interdum velit, non tincidunt
ligula facilisis sed. Aenean semper tincidunt lectus ut feugiat. Vivamus et
ligula id sem facilisis iaculis ut at sem. Nullam sed consectetur ligula.
</p>
<p>
Suspendisse orci erat, suscipit sagittis augue quis, rhoncus viverra nibh.
Praesent massa mauris, mattis molestie justo a, elementum varius lacus. Aenean
laoreet dolor nec nunc commodo maximus. Praesent eu luctus nibh. Vestibulum
dolor arcu, tincidunt vel viverra at, elementum ut elit. Vivamus maximus
efficitur urna nec pharetra. Morbi at dapibus metus. Aliquam viverra mi sed
metus volutpat imperdiet. Phasellus eu libero consequat nulla tristique
condimentum nec non arcu. Nulla ac commodo neque.
</p>
<div id="reference">Reference Box</div>
<div id="popper">Popper Box</div>
<p>
Duis dui metus, hendrerit in dolor et, pharetra ultrices ex. Aliquam
ullamcorper felis sem, sed tempus est placerat quis. Aliquam in ipsum dolor.
Etiam ut est quis sem tristique aliquet nec id velit. In accumsan tempor
tortor. In a porttitor purus. Quisque at sollicitudin diam. Nullam eget
rhoncus sapien, eu faucibus lectus. Sed efficitur diam sed ante aliquam
laoreet. Proin consequat dui sed sem porta semper. Duis laoreet, erat a
facilisis lobortis, arcu mauris condimentum dui, non interdum velit augue at
eros.
</p>
<p>
Curabitur euismod sodales nisl, id auctor enim bibendum eget. Phasellus
commodo viverra libero, non ornare odio consequat porta. Aliquam et sem
sapien. Integer sagittis nisi turpis, vel scelerisque leo laoreet nec. Duis ut
elit odio. Vivamus nec ipsum eu enim pellentesque vulputate. Vivamus vehicula
elit ut elit semper ornare.
</p>
<script type="module">
import { createPopper } from './dist/popper.js';
const reference = document.querySelector('#reference');
const popper = document.querySelector('#popper');
window.instance = createPopper(reference, popper, {
placement: 'top',
});
</script>
|
