hunk.code_window: ): Rect => {
     const unwrappedElement = unwrapVirtualElement(element);
     const rect = getBoundingClientRect(element);
     const scrollParents = listScrollParents(unwrappedElement);
  
hunk.labels: add keep keep keep
hunk.after_edit:   if (isLayout && isHTMLElement(element)) {
       return {
         x: element.offsetLeft,
         y: element.offsetTop,
         width: element.offsetWidth,
         height: element.offsetHeight,
       };
     }
  
hunk.file_path: src/dom-utils/getRectRelativeToOffsetParent.js
hunk.type: add
file: <!DOCTYPE html> <title>Basic Visual Test</title>
  
  <style>
    .scroll {
      overflow: scroll;
      width: 300px;
      height: 300px;
      background-color: grey;
    }
  
    .scroll2 {
      width: 600px;
      height: 600px;
      background-color: darkgrey;
    }
  
    .scroll::before {
      content: 'before';
      display: block;
      height: 300px;
      width: 1px;
    }
  
    .scroll::after {
      content: 'after';
      display: block;
      height: 300px;
      width: 1px;
    }
  
    #reference {
      width: 200px;
      height: 200px;
      background-color: red;
      box-shadow: inset 0 0 0 1px black;
    }
  
    #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="scroll scroll2">
    <div class="scroll scroll1"><div id="reference">Reference Box</div></div>
  </div>
  <div id="popper">Popper Box</div>
  
  <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: 'right',
    });
  </script>
  