image-not-fully-visible.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /largest-contentful-paint/image-not-fully-visible.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<meta charset=utf-8>

<meta name="viewport" content="width=device-width, minimum-scale=1">

<title>Largest Contentful Paint: size when image overflows</title>

<body>

<style>

body {

  /* Preventing a scrollbar from showing and removing any margins simplifies

     the calculations below. */

  overflow: hidden;

  margin: 0px;

</style>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/largest-contentful-paint-helpers.js"></script>

<script>

  setup({"hide_test_state": true});

  let beforeRender;

  const viewportWidth = document.documentElement.clientWidth;

  const viewportHeight = document.documentElement.clientHeight;

  const imgWidth = 100;

  const imgHeight = 50;

  async_test(function (t) {

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

    const beforeLoad = performance.now();

    new PerformanceObserver(

      t.step_func_done(function(entryList) {

        assert_equals(entryList.getEntries().length, 1);

        const entry = entryList.getEntries()[0];

        const url = window.location.origin + '/images/lcp-100x50.png';

        // To compute the size, compute the percentage of the image visible and

        // scale by its natural dimensions. In this test, the image is expanded to twice its size

        // but place towards the bottom right corner of the viewport, so it is

        // effectively clipped to 50% by 50% of its display size. Scaling by

        // its natural width and height of 100px and 50px respectively, leads

        // to a weighted size of 50 by 25.

        const truncatedWidth = imgWidth / 2;

        const truncatedHeight = imgHeight / 2;

        const weightedSize = truncatedWidth * truncatedHeight;

        checkImage(entry, url, 'image_id', weightedSize, beforeLoad);

})

    ).observe({type: 'largest-contentful-paint', buffered: true});

    // Add an image, setting width and height equal to viewport.

    img = document.createElement('img');

    img.src = '/images/lcp-100x50.png';

    img.id = 'image_id';

    img.width = imgWidth * 2;

    img.height = imgHeight * 2;

    img.style.position = 'absolute';

    img.style.left = viewportWidth - imgWidth + 'px';

    img.style.top = viewportHeight - imgHeight + 'px';

    document.body.appendChild(img);

  }, 'The intersectionRect of an img element overflowing is computed correctly');

</script>

</body>