lcp-img-creation-vs-insertion.html | Explore in Territory

<!doctype html>
<html>

<head>
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
  <script>
    if (window.testRunner) {
      testRunner.waitUntilDone();
    }
  </script>
</head>

<body />
<!-- inert script is loaded but does not contribute to LCP -->
<script src="/lcp-script-observer/resources/inert.js"></script>
<script src="/lcp-script-observer/resources/lcp-img-create.js" async></script>
<script src="/lcp-script-observer/resources/lcp-img-insert.js" async></script>
<script>
  assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");

  promise_test(() => {
    return new Promise((resolve, reject) => {
      const observer = new PerformanceObserver(list => {
        const entries = list.getEntries();

        // wait until IMG becomes LCP to remove flakiness.
        const lcp = entries.find(entry => entry.element.nodeName === 'IMG');
        resolve(lcp);
      });
      observer.observe({type: "largest-contentful-paint", buffered: true});

    }).then(lcpImage => {
      if (lcpImage) {
        // look for creator scripts if LCP is an image.
        assert_equals(lcpImage.element.nodeName, 'IMG');

        // assert LCP image knows its creator scripts.
        const creators = internals.getCreatorScripts(lcpImage.element)
          .map(url => new URL(url).pathname);
        assert_array_equals(creators, [
          '/lcp-script-observer/resources/lcp-img-insert.js',
          '/lcp-script-observer/resources/lcp-img-create.js',
        ]);
      }
      else {
        console.log('LCP was NOT an image.');
      }
    });
  }, 'LCP element knows its dependencies, including creation and insertion scripts');

</script>

</html>
chromium/third_party/blink/web_tests/http/tests/lcp-script-observer/lcp-img-creation-vs-insertion.html
