1 files changed, 75 insertions, 0 deletions
diff --git a/testing/web-platform/tests/element-timing/image-carousel.html b/testing/web-platform/tests/element-timing/image-carousel.html
new file mode 100644
index 0000000000..2b3b618f8c
--- /dev/null
+++ b/testing/web-platform/tests/element-timing/image-carousel.html
@@ -0,0 +1,75 @@
+<!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>