Cannot show example of getClientRects in MDN

[CYBAI]

While using Servo to check the getClientRects MDN page, I found the example is not rendered correctly.

Firefox	Servo

Built with 24674687ac on macOS 10.14.6

[CYBAI]

Minimized from MDN:

<style>
  div {
    display: inline-block;
    width: 150px;
  }
  div p {
    border: 1px solid blue;
  }
  span {
    border: 1px solid green;
  }
</style>

<div>
  <p class="withClientRectsOverlay">
    <span>Paragraph that spans multiple lines</span>
  </p>
</div>

<script>
  function addClientRectsOverlay(elt) {
    var rects = elt.getClientRects();
    for (var i = 0; i != rects.length; i++) {
      var scrollTop = document.body.scrollTop;
      var scrollLeft = document.body.scrollLeft;
    }
  }

  var elt = document.getElementsByClassName("withClientRectsOverlay");
  for (var i = 0; i < elt.length; i++) {
    addClientRectsOverlay(elt[i]);
  }
</script>

With running document.body.scrollTop and document.body.scrollLeft, we can reproduce the broken UI.

Also, we won't have the issue if we comment the inline-block rule.