<!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 elementtiming='my_image' id='my_id' />
  <script>
    const getObservedEntry = async (pathname) => {
      return await new Promise(resolve => {
        new PerformanceObserver(entryList => {
          if (entryList.getEntries()[0].url == pathname) {
            resolve(entryList.getEntries()[0]);
          }
        }).observe({ type: 'element', buffered: true });
      });
    }

    promise_test(async (t) => {
      assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");

      // Take beforeRender timestamp.
      let beforeRender = performance.now();

      //Load image
      const img = document.getElementById('my_id');

      const url1 = 'resources/square100.png';
      await new Promise(resolve => {
        img.addEventListener('load', resolve);
        img.src = url1;
      });

      // Get element entry.
      let pathname = window.location.origin + '/element-timing/' + url1;
      let entry = await getObservedEntry(pathname);

      // Check entry.
      checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
      checkRect(entry, [0, 100, 0, 100]);
      checkNaturalSize(entry, 100, 100);

      // Take beforeRender timestamp before changing image src.
      beforeRender = performance.now();

      // Set the src to trigger another entry.
      const url2 = '/images/black-rectangle.png';

      //Load image with changed src.
      await new Promise(resolve => {
        img.addEventListener('load', resolve);
        img.src = url2;
      });

      // Get the corresponding element entry.
      pathname = window.location.origin + url2;
      entry = await getObservedEntry(pathname);

      // Check entry.
      checkElement(entry, pathname, 'my_image', 'my_id', beforeRender, img);
      checkRect(entry, [0, 100, 0, 50]);
      checkNaturalSize(entry, 100, 50);
    }, 'Element Timing: changing src causes a new entry to be dispatched.')
  </script>

</body>