broken-image-icon.html | Explore in Territory

<!DOCTYPE html>
<html>

<head>
  <title>Broken Image Icon Should Not Be LCP</title>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
</head>

<body>
  <img src="../non-existent-image.jpg">
  <img src="/css/css-images/support/colors-16x8.png">

  <script>
    promise_test(async () => {
      // Wait for the first-contentful-paint entry so that we know the broken image
      // icon has been painted.
      await new Promise(resolve => {
        new PerformanceObserver((entryList, observer) => {
          if (entryList.getEntriesByName('first-contentful-paint').length > 0) {
            observer.disconnect();
            resolve();
          }
        }).observe({ type: 'paint', buffered: true });
      });

      // There should be only 1 LCP entry and it should be the colors-16x8.png though
      // being smaller than the broken image icon. The broken image icon should not
      // emit an LCP entry.
      let LcpEntryListLength = await new Promise(resolve => {
        new PerformanceObserver((entryList, observer) => {
          if (entryList.getEntries().filter(e => e.url.includes('colors-16x8.png'))) {
            observer.disconnect();
            resolve(entryList.getEntries().length);
          }
        }).observe({ type: 'largest-contentful-paint', buffered: true });
      });

      assert_equals(LcpEntryListLength, 1, 'There should be one and only one LCP entry.');

    }, "The broken image icon should not emit an LCP entry.");
  </script>
</body>

</html>
chromium/third_party/blink/web_tests/external/wpt/largest-contentful-paint/broken-image-icon.html
