tum
/
freight


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!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>