contracted-image.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /soft-navigation-heuristics/lcp/tentative/contracted-image.html - WPT Dashboard Interop Dashboard

<!doctype html>

<!--

      The soft navigation version of the identically named

      test in /largest-contentful-paint/contracted-image.html.

      Notes:

      - Awaits trivial soft navigation with same page contents as original test.

      - Uses promise_test and slightly revised HTML tags, to make it easy to

        observe the initial LCP before the soft navigation (the click target)

        and distinguish it from the interesting LCP after the soft navigation.

-->

<meta charset="utf-8" />

<title>

  Largest Contentful Paint: contracted image bounded by display size after soft navigation.

</title>

<style type="text/css">

  #image_id {

    width: 50px;

    height: 50px;

</style>

<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="/largest-contentful-paint/resources/largest-contentful-paint-helpers.js"></script>

<script src="/soft-navigation-heuristics/resources/soft-navigation-test-helper.js"></script>

<script>

  function clickHandler() {

    document.body.innerHTML = `<img src="/images/black-rectangle.png" id="image_id" />`;

    history.pushState({}, "", "/test");

</script>

<body>

  <div id="click-target" onclick="clickHandler()">Click!</div>

</body>

<script>

  promise_test(async (t) => {

    assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");

    if (test_driver) {

      test_driver.click(document.getElementById("click-target"));

    const beforeLoad = performance.now();

    const helper = new SoftNavigationTestHelper(t);

    await helper.getBufferedPerformanceEntriesWithTimeout(

      /*type=*/ "soft-navigation",

      /*includeSoftNavigationObservations=*/ false,

      /*minNumEntries=*/ 1,

);

    const entries = await helper.getBufferedPerformanceEntriesWithTimeout(

      /*type=*/ "largest-contentful-paint",

      /*includeSoftNavigationObservations=*/ true,

      /*minNumEntries=*/ 2,

);

    assert_equals(entries.length, 2);

    assert_equals(entries[0].id, "click-target", "The first entry should be the button");

    const entry = entries[1];

    const url = window.location.origin + "/images/black-rectangle.png";

    // black-rectangle.png is 100 x 50. It occupies 50 x 50 so size will be bounded by the displayed size.

    const size = 50 * 50;

    checkImage(entry, url, "image_id", size, beforeLoad);

  }, "Largest Contentful Paint: |size| attribute is bounded by display size after soft navigation.");

</script>