element-timing/image-src-change.html

<!DOCTYPE HTML>
<meta charset=utf-8>
<title>Element Timing: src change triggers new entry</title>
<body>
<style>
body {
  margin: 0;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/element-timing-helpers.js"></script>
<img src='resources/square100.png' elementtiming='my_image' id='my_id'/>
<script>
  async_test(function (t) {
    assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");
    let beforeRender = performance.now();
    const img = document.getElementById('my_id');
    let firstCallback = true;
    const observer = new PerformanceObserver(
      t.step_func(entryList => {
        assert_equals(entryList.getEntries().length, 1);
        const entry = entryList.getEntries()[0];
        if (firstCallback) {
          const pathname = window.location.origin + '/element-timing/resources/square100.png';
          checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
          checkRect(entry, [0, 100, 0, 100]);
          checkNaturalSize(entry, 100, 100);

          // Set the src to trigger another entry.
          img.src = '/images/black-rectangle.png';
          beforeRender = performance.now();
          firstCallback = false;
          return;
        }
        const pathname = window.location.origin + '/images/black-rectangle.png';
        checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
        checkRect(entry, [0, 100, 0, 50]);
        checkNaturalSize(entry, 100, 50);
        t.done();
    }));
    observer.observe({type: 'element', buffered: true});
  }, 'Element Timing: changing src causes a new entry to be dispatched.');
</script>

</body>