popstate-multiple-backs.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/popstate-multiple-backs.tentative.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Soft navigation with multiple popstate calls.</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">Click me!</a>

      </div>

    </main>

    <script>

      // Push state 4 times, as history.back() calls will trigger popstate

      // events.

      history.pushState({}, "", "three.html");

      history.pushState({}, "", "two.html");

      history.pushState({}, "", "one.html");

      history.pushState({}, "", "zero.html");

      // When the link is clicked by the driver, this click handler will call

      // history.back(), which will (of course) also trigger a popstate event.

      // The history.back() destination is one.html, the first URL visited by

      // this interaction.

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

      link.addEventListener("click", async () => {

        history.back();

        timestamps[counter]["eventEnd"] = performance.now();

        await waitForUrlToEndWith("one.html");

});

      let shouldPrepWorkFail = false;

      testSoftNavigation({

        link: link,

        // The popstate event handler triggers two additional history.back()

        // events, which don't cascade further (see shouldPrepWorkFail).

        // After the pushState method runs, the contents get added, and the

        // soft navigation is detected.

        eventType: "popstate",

        eventPrepWork: () => {

          return !shouldPrepWorkFail;

},

        pushState: async () => {

          shouldPrepWorkFail = true;

          history.back();

          await waitForUrlToEndWith("two.html");  // Second URL visited by interaction.

          history.back();

          await waitForUrlToEndWith("three.html");  // Third and final URL visited by interaction.

},

        // This is the URL we expect to see in the 'name' field of the soft navigation entry.

        pushUrl: "one.html",

        addContent: async () => {

          assert_true(

            location.href.endsWith("three.html"),

            "addContent should see the effect of all history.back() calls",

);

          // Add the content to the main element

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

          main.removeChild(document.getElementsByTagName("div")[0]);

          const div = document.createElement("div");

          const text = document.createTextNode("Lorem ipsum");

          div.appendChild(text);

          div.style = "font-size: 3em";

          main.appendChild(div);

},

        testName:

          "A soft navigation that started from a back() call inside a " +

          "popstate event is recognized by SoftNavigationHeuristics",

});

    </script>

  </body>

</html>