image-lcp-followed-by-two-image-softnavs-lcp.tentative.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /soft-navigation-heuristics/image-lcp-followed-by-two-image-softnavs-lcp.tentative.html - WPT Dashboard Interop Dashboard

<!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/ggrr-256x256.png"></a>

    </div>

  </main>

  <script>

    const link = document.getElementById("link");

    promise_test(async t => {

      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>