resize-observer/notify.html

<!doctype html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/resizeTestHelper.js"></script>
<style>
  div {
    border: 1px dotted gray
  }
  .transform {
    transform: scale(2,2) rotate(90deg)
  }
</style>
<p>ResizeObserver tests</p>
<div id="target1" style="width:100px;height:100px;">t1
  <div id="target2" style="width:100px;height:100px;">t2
    <div id="target3" style="width:100px;height:100px;">t3
      <span id="inline">inline</span>
    </div>
  </div>
</div>
<div id="absolute" style="width:100.5px;height:100.5px;position:absolute;top:10.3px;left:10.3px"></div>
<script>
'use strict';

let t1 = document.querySelector('#target1');
let t2 = document.querySelector('#target2');
let t3 = document.querySelector('#target3');
let abs = document.querySelector('#absolute');
let inline = document.querySelector('#inline');

function test0() {
  let helper = new ResizeTestHelper(
    "test0: notification ordering",
  [
    {
      setup: observer => {
        observer.observe(t3);
        observer.observe(t2);
        observer.observe(t1);
        t1.style.width = "5px";
        t3.style.width = "5px";
        t2.style.width = "5px";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 3, "3 resizes");
        assert_equals(entries[0].target, t3, "ordering");
        assert_equals(entries[1].target, t2, "ordering");
        assert_equals(entries[2].target, t1, "ordering");
        observer.disconnect();
        t1.style.width = "100px";
        t2.style.width = "100px";
        t3.style.width = "100px";
      }
    }
  ]);
  return helper.start();
}

function test1() {
  let helper = new ResizeTestHelper(
    "test1: display:none triggers notification",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        t1.style.display = "none";
      },
      notify: (entries, observer) => {
        t1.style.display = "";
      }
    }
  ]);
  return helper.start();
}


function test2() {
  let helper = new ResizeTestHelper(
    "test2: remove/appendChild trigger notification",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    { // "removeChild triggers notification"
      setup: observer => {
        t1.parentNode.removeChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, t1);
        return true;  // Delay next step
      }
    },
    { // "appendChild triggers notification",
      setup: observer => {
        document.body.appendChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].target, t1)
      }
    }
  ]);
  return helper.start();
}


function test3() {
  let helper = new ResizeTestHelper(
    "test3: dimensions match",
  [
    {
      setup: observer => {
        observer.observe(t1);
        t1.style.width = "200.5px";
        t1.style.height = "100px";
        t1.style.paddingLeft = "20px";
        t1.style.paddingTop = "10px";
      },
      notify: (entries, observer) => {
        assert_equals(entries[0].contentRect.left,20);
        assert_equals(entries[0].contentRect.top,10);
        assert_between_inclusive(entries[0].contentRect.width, 200.4, 200.6, "width is not rounded");
        assert_equals(entries[0].contentRect.height, 100);
      }
    }
  ]);
  return helper.start();
}

function test4() {
  let helper = new ResizeTestHelper(
    "test4: transform do not cause notifications",
  [
    {
      setup: observer => {
        observer.observe(t2);
      },
      notify: (entries, observer) => {
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        t2.classList.add("transform");
      },
      notify: (entries, observer) => {
        assert_unreached("transform must not trigger notifications");
      },
      timeout: () => {
        t2.classList.remove("transform");
      }
    }
  ]);
  return helper.start();
}

function test5() {
  let helper = new ResizeTestHelper(
    "test5: moving an element does not trigger notifications",
  [
    {
      setup: observer => {
        observer.observe(abs);
      },
      notify: (entries, observer) => {
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        abs.style.top = "20.33px";
        abs.style.left = "20.33px";
      },
      notify: (entries, observer) => {
        assert_unreached("movement should not cause resize notifications");
      },
      timeout: () => {
      }
    }
  ]);
  return helper.start();
}

function test6() {
  let helper = new ResizeTestHelper(
    "test6: inline element notifies once with 0x0.",
  [
    {
      setup: observer => {
        observer.observe(inline);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "observing inline element triggers notification");
        assert_equals(entries[0].target, inline, "observing inline element triggers notification");
        assert_equals(entries[0].contentRect.width, 0);
        assert_equals(entries[0].contentRect.height, 0);
        return true; // Delay next step
      }
    },
    {
      setup: observer => {
        inline.style.width = "66px";
      },
      notify: (entries, observer) => {
        assert_unreached("resizing inline element should not cause resize notifications");
      },
      timeout: () => {
        // expected
      }
    },
    { // "inline element that becomes block should notify",
      setup: observer => {
        inline.style.display = "block";
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "inline element becoming a non-zero sized block triggers a notification");
        assert_equals(entries[0].target, inline, "inline element becoming a non-zero sized block triggers a notification");
      }
    }
  ]);
  return helper.start();
}

function test7() {
  let helper = new ResizeTestHelper(
    "test7: unobserve inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
        observer.observe(t2);
      },
      notify: (entries, observer) => {
        t1.style.width = "777px";
        t2.style.width = "777px";
        observer.unobserve(t1);
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "only t2 is observed");
        assert_equals(entries[0].target, t2, "only t2 is observed");
      }
    }
  ]);
  return helper.start();
}

function test8() {
  let helper = new ResizeTestHelper(
    "test8: observe inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        observer.observe(t2);
        t2.style.width = "888px";
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1, "only t2 is observed");
        assert_equals(entries[0].target, t2, "only t2 is observed");
      }
    }
  ]);
  return helper.start();
}

function test9() {
  let helper = new ResizeTestHelper(
    "test9: disconnect inside notify callback",
  [
    {
      setup: observer => {
        observer.observe(t1);
      },
      notify: (entries, observer) => {
        t1.style.width = "999px";
        observer.disconnect();
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
      },
      notify: (entries, observer) => {
        assert_unreached("there should be no notifications after disconnect");
      },
      timeout: () => {
      }
    }
  ]);
  return helper.start();
}

function test10() {
  var parent = t1.parentNode;
  let helper = new ResizeTestHelper(
    "test10: element notifies when parent removed",
  [
    {
      setup: observer => {
        observer.observe(t3);
      },
      notify: (entries, observer) => {
        return true;  // Delay next step
      }
    },
    {
      setup: observer => {
        t1.parentNode.removeChild(t1);
      },
      notify: (entries, observer) => {
        assert_equals(entries.length, 1);
        assert_equals(entries[0].target, t3);
        parent.appendChild(t1);
      }
    }
  ]);
  return helper.start();
}

function test11() {
  let t = createAndAppendElement("div");
  t.style.display = "none";

  let helper = new ResizeTestHelper(
    "test11: display:none element should be notified",
    [
      {
        setup: observer => {
          observer.observe(t);
        },
        notify: entries => {
          assert_equals(entries.length, 1, "1 pending notification");
          assert_equals(entries[0].target, t, "target is t");
          assert_equals(entries[0].contentRect.width, 0, "target width");
          assert_equals(entries[0].contentRect.height, 0, "target height");
        }
      }
    ]);
  return helper.start(() => t.remove());
}

function test12() {
  let t = createAndAppendElement("div");
  t.style.width = "0px";

  let helper = new ResizeTestHelper(
    "test12: element sized 0x0 should be notified",
    [
      {
        setup: observer => {
          observer.observe(t);
        },
        notify: entries => {
          assert_equals(entries.length, 1, "1 pending notification");
          assert_equals(entries[0].target, t, "target is t");
          assert_equals(entries[0].contentRect.width, 0, "target width");
          assert_equals(entries[0].contentRect.height, 0, "target height");
        }
      }
    ]);
  return helper.start(() => t.remove());
}

let guard;
test(_ => {
  assert_own_property(window, "ResizeObserver");
  guard = async_test('guard');
}, "ResizeObserver implemented")

test0()
  .then(() => { return test1(); })
  .then(() => { return test2(); })
  .then(() => { return test3(); })
  .then(() => { return test4(); })
  .then(() => { return test5(); })
  .then(() => { return test6(); })
  .then(() => { return test7(); })
  .then(() => { return test8(); })
  .then(() => { return test9(); })
  .then(() => { return test10(); })
  .then(() => { return test11(); })
  .then(() => { return test12(); })
  .then(() => { guard.done(); });

</script>