multiple-image-same-src.html

Enable keyboard shortcuts

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

<!DOCTYPE HTML>

<meta charset=utf-8>

<title>Largest Contentful Paint:dynamically appended image with different

    dimensions but same src triggers new entry.</title>

<body>

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

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

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

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

  <script>

    async_test(function (t) {

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

      let beforeLoad = performance.now();

      let beforeSecondImageLoad = performance.now();

      let firstCallback = true;

      // black-rectangle.png is 50 x 25.

      const original_rect_size = 50 * 25;

      // The bigger black rectangle is 100 x 50, but defined with width="50".

      const bigger_rect_size = 100 * 50;

      const observer = new PerformanceObserver(

        t.step_func(function (entryList) {

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

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

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

          if (firstCallback) {

            // Checks the original black rectangle.

            // TODO(https://crbug.com/1411616): we're testing approximated values.

            checkImage(entry, url, 'image_id', original_rect_size,

              beforeLoad, ["approximateSize"]);

            // Creates a new bigger black rectangle.

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

            img.id = 'new_image_id';

            img.src = url;

            img.width = 100;

            beforeSecondImageLoad = performance.now();

            firstCallback = false;

            document.body.appendChild(img);

          } else {

            // Checks the new black rectangle.

            checkImage(entry, url, 'new_image_id', bigger_rect_size, beforeSecondImageLoad);

            t.done();

})

);

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

    }, 'Largest Contentful Paint:dynamically appended image with different ' +

    'dimensions but same src triggers new entry.');

  </script>

</body>