hunk.code_window:         // these are going to be used to compute the initial popper offsets
           // and as cache for any modifier that needs them later
           state.measures = {
             reference: getElementClientRect(referenceElement, isFixed),
             // CSS marginsc an be applied to popper elements to quickly
             // apply offsets dynamically based on some CSS selectors.
             // For this reason we include margins in this calculation.
  
hunk.labels: keep keep keep replace keep keep keep
hunk.after_edit:           reference: getElementClientRect(referenceElement, isFixed, false),
  
hunk.file_path: src/index.js
hunk.type: replace
file: <!DOCTYPE html> <title>Basic Visual Test</title>
  
  <style>
    .reference {
      position: absolute;
      background-color: red;
    }
  
    #reference1 {
      top: 150px;
      left: 150px;
      width: 200px;
      height: 200px;
    }
  
    #reference2 {
      top: 150px;
      left: 500px;
      width: 200px;
      height: 200px;
    }
  
    .popper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: rebeccapurple;
      box-shadow: inset 0 0 0 1px black;
    }
  </style>
  
  <div class="reference" id="reference1">Reference Box</div>
  <div class="popper" id="popper1-1">Popper Box</div>
  <div class="popper" id="popper1-2">Popper Box</div>
  <div class="popper" id="popper1-3">Popper Box</div>
  <div class="popper" id="popper1-4">Popper Box</div>
  
  <div class="reference" id="reference2">Reference Box</div>
  <div class="popper" id="popper2-1">Popper Box</div>
  <div class="popper" id="popper2-2">Popper Box</div>
  <div class="popper" id="popper2-3">Popper Box</div>
  <div class="popper" id="popper2-4">Popper Box</div>
  
  <script type="module">
    import { createPopper } from '../../dist/popper.js';
    const reference1 = document.querySelector('#reference1');
    const reference2 = document.querySelector('#reference2');
  
    ['top', 'right', 'bottom', 'left'].forEach((placement, n) => {
      createPopper(reference1, document.querySelector(`#popper1-${n + 1}`), {
        placement: placement,
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: ({ popper, reference, placement }) => [50, 50],
            },
          },
        ],
      });
  
      createPopper(reference2, document.querySelector(`#popper2-${n + 1}`), {
        placement: placement,
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: ({ popper, reference, placement }) => [-50, -50],
            },
          },
        ],
      });
    });
  </script>
  