image-carousel.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /element-timing/image-carousel.html - WPT Dashboard Interop Dashboard

<!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>