Specify behavior of rectangle areas when root or target is removed or when target is no longer a containing block descendant of root

[ziyunfei]

Chrome returns a zero area for them in these situations:

<div id="root">
  <div id="target"></div>
</div>

<style>
  #root {
    width: 100px;
    height: 100px;
    background: red;
  }

  #target {
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>

<script>
  let observer = new IntersectionObserver(([entry]) => {
    if (root.childElementCount === 0) {
      console.log(entry.rootBounds) // {top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 }
      console.log(root.getBoundingClientRect()) // {top: 8, right: 108, bottom: 108, left: 8, width: 100, height: 100}

      console.log(entry.boundingClientRect) // {top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 }
      console.log(target.getBoundingClientRect()) // {top: 108, right: 108, bottom: 208, left: 8, width: 100, height: 100}

      console.log(entry.intersectionRect) // {top: 0, right: 0, bottom: 0, left: 0, width: 0, height: 0 }
    }
  }, {
    root: root
  })

  observer.observe(target)

  setTimeout(() => {
    document.body.appendChild(target) // or root.removeChild(target)
  }, 500)
</script>

@szager-chromium