<!DOCTYPE html>
<meta charset="utf-8">
<title>Test the sequence of events when reporting image timing.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<script>
  function test_image_sequence(src, event, t) {
    const image = document.createElement('img');
    const absoluteURL = new URL(src, location.href).toString();
    document.body.appendChild(image);
    t.add_cleanup(() => image.remove());
    return new Promise(resolve => {
      image.addEventListener(event, t.step_func(() => {
        assert_equals(performance.getEntriesByName(absoluteURL).length, 1);
        resolve();
      }));
      image.src = src;
    });
  }
  promise_test(t => test_image_sequence('resources/blue.png', 'load', t),
  "An image should receive its load event after the ResourceTiming entry is available");

  promise_test(t => test_image_sequence('resources/nothing-at-all.png', 'error', t),
  "A non-existent (404) image should receive its error event after the ResourceTiming entry is available");

  promise_test(t => test_image_sequence('resources/invalid.png', 'error', t),
  "An invalid image should receive its error event after the ResourceTiming entry is available");
</script>