element-timing/image-carousel.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>Element Timing: observe images in carousel</title>
<style>
body {
  margin: 0;
}
/* Do not display images by default */
.carousel-image {
  display: none;
}
</style>
<body>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/element-timing-helpers.js"></script>

<div class="slideshow-container">
  <div class='carousel-image'>
    <img src="resources/circle.svg" elementtiming='image0' id='image0'>
  </div>
  <div class='carousel-image'>
    <img src="resources/square100.png" elementtiming='image1' id='image1'>
  </div>
</div>

<script>
  async_test(function (t) {
    assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented");
    const beforeRenderTimes = [];
    let entry_count = 0;
    const entry_count_per_element = [0, 0];
    const pathname0 = window.location.origin + '/element-timing/resources/circle.svg';
    const pathname1 = window.location.origin + '/element-timing/resources/square100.png';
    const observer = new PerformanceObserver(t.step_func(list => {
      list.getEntries().forEach(entry => {
        if (entry_count % 2 == 0) {
          checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count],
              document.getElementById('image0'));
          checkRect(entry, [0, 200, 0, 200]);
          checkNaturalSize(entry, 200, 200);
          entry_count_per_element[0]++;
        }
        else {
          checkElement(entry, pathname1, 'image1', 'image1', beforeRenderTimes[entry_count],
              document.getElementById('image1'));
          checkRect(entry, [0, 100, 0, 100]);
          checkNaturalSize(entry, 100, 100);
          entry_count_per_element[1]++;
        }
        entry_count++;
        // Check each image twice before ending the test.
        if (entry_count == 4) {
          assert_equals(entry_count_per_element[0], 2);
          assert_equals(entry_count_per_element[1], 2);
          t.done();
        }
      })
    }));
    observer.observe({entryTypes: ['element']});
    let slideIndex = 0;
    showCarousel();

    function showCarousel() {
      beforeRenderTimes.push(performance.now());
      const slides = document.getElementsByClassName("carousel-image");
      slides[slideIndex].style.display = "block";
      slides[1 - slideIndex].style.display = "none";
      slideIndex = 1 - slideIndex;
      t.step_timeout(showCarousel, 50); // Change image every 50 ms.
    }
  }, 'Entries for elements within an image carousel are dispatched when the elements are redrawn.');
</script>
</body>
</html>