<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<link rel="help" href="https://w3c.github.io/IntersectionObserver/#dom-intersectionobserverentry-intersectionratio">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1581876">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  block {
    display: block;
    width: 50vw;
    height: 50vh;
    background: green;
  }
</style>
<inline>
  <block></block>
</inline>
<script>

// Account for rounding differences when viewport sizes can't cleanly divide.
const epsilon = 1;

promise_test(async function() {
  for (let element of document.querySelectorAll("inline, block")) {
    let entries = await new Promise(resolve => {
      new IntersectionObserver(resolve).observe(element);
    });
    assert_equals(entries.length, 1, element.nodeName + ": Should get an entry");
    assert_true(entries[0].isIntersecting, element.nodeName + ": Should be intersecting");
    assert_equals(entries[0].intersectionRatio, 1, element.nodeName + ": Should be fully intersecting");

    function assert_rects_equal(r1, r2, label) {
      assert_approx_equals(r1.top, r2.top, epsilon, label + ": top should be equal");
      assert_approx_equals(r1.right, r2.right, epsilon, label + ": right should be equal");
      assert_approx_equals(r1.bottom, r2.bottom, epsilon, label + ": bottom should be equal");
      assert_approx_equals(r1.left, r2.left, epsilon, label + ": left should be equal");
    }

    assert_rects_equal(entries[0].boundingClientRect, element.getBoundingClientRect(), element.nodeName + ": boundingClientRect should match");
    assert_rects_equal(entries[0].intersectionRect, entries[0].boundingClientRect, element.nodeName + ": intersectionRect should match entry.boundingClientRect");
  }
}, "IntersectionObserver on an IB split gets the right intersection ratio");
</script>