softnav-before-lcp-paint.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/softnav-before-lcp-paint.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>

<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

</head>

<body>

  <main id=main>

    <div>

      <a id=link><img src="/images/lcp-256x256.png"></a>

    </div>

  </main>

  <script>

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

    testSoftNavigation({

      addContent: async () => {

        // Add an LCP element, large enough to trigger the Soft Navigation

        // heuristics.

        const p = addTextParagraphToMain("Lorem Ipsum", /*element_timing=*/"lcp");

        p.id = "first_lcp";

        // Once the first element is fully painted.

        const observer = new PerformanceObserver(list => {

          // Add a larger element to be the new LCP.

          window.lcp_observer_promise = new Promise(resolve => {

            (new PerformanceObserver(resolve)).observe({type: "element"});

});

          const p2 = addTextParagraphToMain("LOREM IPSUMER", "real_lcp");

          p2.id = "real_lcp";

          observer.disconnect();

});

        observer.observe({type: "element", buffered: true});

},

      link: link,

      validate: async () => {

        await window.lcp_observer_promise;

        const lcps = await getLcpEntries();

        assert_greater_than_equal(lcps.length, 3, "Got at least 3 LCP entries");

        assert_equals(lcps[lcps.length - 2].id, "first_lcp", "Got the first LCP");

        assert_equals(lcps[lcps.length - 1].id, "real_lcp", "Got the real LCP");

},

      test: "Test that an image LCP followed by 2 smaller soft navigation LCPs"

        + " properly queues both LCP entries, even when the soft navigation"

        + " is detected in between them."});

  </script>

</body>

</html>