repeated-image.html

Enable keyboard shortcuts

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

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Largest Contentful Paint: repeated image.</title>

<style>

  #image_id {

    width: 10px;

    height: 10px;

</style>

<body>

<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});

  async_test(function (t) {

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

    let beforeLoad = performance.now();

    let firstCallback = true;

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

    const observer = new PerformanceObserver(

      t.step_func(entryList => {

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

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

        // First image is shrunk to be 10 x 10. The second image is added at its natural size: 100 x 50.

        const size = firstCallback ? 10 * 10 : 100 * 50;

        const id = firstCallback ? 'image_id' : 'second_id';

        checkImage(entry, url, id, size, beforeLoad);

        if (firstCallback) {

          const img = document.createElement('img');

          img.src = '/images/black-rectangle.png';

          img.id = 'second_id';

          beforeLoad = performance.now();

          document.getElementById('image_div').appendChild(img);

          firstCallback = false;

          return;

        } else {

          t.done();

})

);

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

  }, 'Repeated image produces different timestamps.');

</script>

<img src='/images/black-rectangle.png' id='image_id'/>

<div id='image_div'></div>

</body>