tum
/
freight


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!DOCTYPE html> <title>Rounding Visual Test</title>

<style>
  @import '/reset.css';
  .reference {
    margin: 2px 4px 8px 16px;
    box-shadow: inset 0 0 0 1px black;
  }

  .popper {
    background-color: rebeccapurple;
    box-shadow: inset 0 0 0 1px black;
  }

  #vertical,
  #horizontal {
    height: 50px;
  }
</style>

<div id="vertical"></div>
<div id="horizontal"></div>

<script type="module">
  import { createPopper } from './dist/popper.js';

  const vertical = document.querySelector('#vertical');
  const horizontal = document.querySelector('#horizontal');

  const placements = ['bottom-start', 'right-start'];
  const verticalData = [
    { reference: [20, 20], popper: [21, 20] },
    { reference: [21, 20], popper: [20, 20] },
    { reference: [20, 20], popper: [19, 20] },
    { reference: [19, 20], popper: [20, 20] },
  ];
  const horizontalData = [
    { reference: [20, 20], popper: [20, 21] },
    { reference: [20, 21], popper: [20, 20] },
    { reference: [20, 20], popper: [20, 19] },
    { reference: [20, 19], popper: [20, 20] },
  ];

  placements.forEach(placement => {
    const isVerticalPlacement = placement.includes('bottom');
    const container = isVerticalPlacement ? vertical : horizontal;
    const data = isVerticalPlacement ? verticalData : horizontalData;
    const display = isVerticalPlacement ? 'inline-block' : 'block';

    data.forEach(elementSizes => {
      const reference = document.createElement('div');
      reference.className = 'reference';
      reference.style.display = display;
      reference.style.width = `${elementSizes.reference[0]}px`;
      reference.style.height = `${elementSizes.reference[1]}px`;
      container.append(reference);

      const popper = document.createElement('div');
      popper.className = 'popper';
      popper.style.width = `${elementSizes.popper[0]}px`;
      popper.style.height = `${elementSizes.popper[1]}px`;
      container.append(popper);

      createPopper(reference, popper, { placement });
    });
  });
</script>