soft-navigation-heuristics/image-lcp-followed-by-two-image-softnavs-lcp.tentative.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Detect simple soft navigation.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/soft-navigation-helper.js"></script>
</head>
<body>
  <main id=main>
    <div>
      <a id=link><img src="/images/lcp-256x256.png"></a>
    </div>
  </main>
  <script>
    const link = document.getElementById("link");

    promise_test(async t => {
      if (!performance.softNavPaintMetricsSupported) {
        return;
      }
      validatePaintEntries('first-contentful-paint', 1);
      validatePaintEntries('first-paint', 1);
      const preClickLcp = await getLcpEntries();
      setEvent(t, link, /*pushState=*/url=>history.pushState({}, '', url),
        /*addContent=*/async () => await addImageToMain(), /*pushUrl=*/true,
        /*eventType=*/"click");

      const first_click_paint_promise = waitOnPaintEntriesPromise();

      click(link);
      await new Promise(resolve => {
        (new PerformanceObserver(resolve)).observe({
          type: 'soft-navigation'
        });
      });
      assert_equals(
          document.softNavigations, 1,
          'One Soft Navigation detected');

      await first_click_paint_promise;
      const postClickLcp = await getLcpEntries();
      assert_greater_than(
          postClickLcp.length, preClickLcp.length,
          'Soft navigation should have triggered at least an LCP entry');
      assert_less_than(
          postClickLcp[postClickLcp.length - 1].size,
          preClickLcp[preClickLcp.length - 1].size,
          'Soft navigation LCP element should have a smaller size than the hard'
              + ' navigation LCP element');

      const second_click_paint_promise = waitOnPaintEntriesPromise();
      const preClickLcp2 = await getLcpEntries();
      click(link);
      await new Promise(resolve => {
        (new PerformanceObserver(() => resolve())).observe({
          type: 'soft-navigation'
        });
      });
      assert_equals(
          document.softNavigations, 2,
          'Two Soft Navigations detected');

      await second_click_paint_promise;
      const postClickLcp2 = await getLcpEntries();
      assert_equals(postClickLcp2.length, 3, 'We expected 3 LCP entries at this point');
      assert_greater_than(
          postClickLcp2.length, preClickLcp2.length,
          'Soft navigation should have triggered at least an LCP entry');
    }, "Multiple soft navigations get FP, FCP and LCP for each one");
  </script>
</body>
</html>