Google Git
Sign in
chromium / external / w3c / web-platform-tests / b264879bf5052105a61b44300ebd5af933ed8a6d / . / element-timing / image-carousel.html
blob: 39d9f0195c6ba17c3e83b41e5d2391203608b15a [file] [log] [blame]
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]1<!DOCTYPE html>
2<meta charset=utf-8>
3<title>Element Timing: observe images in carousel</title>
4<style>
5body {
6 margin: 0;
7}
8/* Do not display images by default */
9.carousel-image {
10 display: none;
11}
12</style>
13<body>
14<script src="/resources/testharness.js"></script>
15<script src="/resources/testharnessreport.js"></script>
16<script src="resources/element-timing-helpers.js"></script>
17
18<div class="slideshow-container">
19 <div class='carousel-image'>
Nicolás Peña Moreno15d28552019-04-01 19:03:08[diff] [blame]20 <img src="resources/circle.svg" elementtiming='image0' id='image0'>
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]21 </div>
22 <div class='carousel-image'>
Nicolás Peña Moreno15d28552019-04-01 19:03:08[diff] [blame]23 <img src="resources/square100.png" elementtiming='image1' id='image1'>
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]24 </div>
25</div>
26
27<script>
28 async_test(function (t) {
James Graham163424c2019-05-17 16:47:03[diff] [blame]29 if (!window.PerformanceElementTiming) {
30 assert_unreached("PerformanceElementTiming is not implemented");
31 }
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]32 const beforeRenderTimes = [];
33 let entry_count = 0;
34 const entry_count_per_element = [0, 0];
35 const index = window.location.href.lastIndexOf('/');
36 const pathname0 = window.location.href.substring(0, index) +
37 '/resources/circle.svg';
38 const pathname1 = window.location.href.substring(0, index) +
39 '/resources/square100.png';
40 const observer = new PerformanceObserver(list => {
41 list.getEntries().forEach(entry => {
42 if (entry_count % 2 == 0) {
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]43 checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count],
44 document.getElementById('image0'));
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]45 checkRect(entry, [0, 200, 0, 200]);
Nicolás Peña Morenocf8e8812019-04-01 17:12:02[diff] [blame]46 checkNaturalSize(entry, 200, 200);
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]47 entry_count_per_element[0]++;
48 }
49 else {
Nicolás Peña Moreno66bb6b42019-05-01 17:40:58[diff] [blame]50 checkElement(entry, pathname1, 'image1', 'image1', beforeRenderTimes[entry_count],
51 document.getElementById('image1'));
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]52 checkRect(entry, [0, 100, 0, 100]);
Nicolás Peña Morenocf8e8812019-04-01 17:12:02[diff] [blame]53 checkNaturalSize(entry, 100, 100);
Nicolás Peña Moreno43dda2a2019-03-27 16:21:39[diff] [blame]54 entry_count_per_element[1]++;
55 }
56 entry_count++;
57 // Check each image twice before ending the test.
58 if (entry_count == 4) {
59 assert_equals(entry_count_per_element[0], 2);
60 assert_equals(entry_count_per_element[1], 2);
61 t.done();
62 }
63 })
64 });
65 observer.observe({entryTypes: ['element']});
66 let slideIndex = 0;
67 showCarousel();
68
69 function showCarousel() {
70 beforeRenderTimes.push(performance.now());
71 const slides = document.getElementsByClassName("carousel-image");
72 slides[slideIndex].style.display = "block";
73 slides[1 - slideIndex].style.display = "none";
74 slideIndex = 1 - slideIndex;
75 t.step_timeout(showCarousel, 50); // Change image every 50 ms.
76 }
77 }, 'Entries for elements within an image carousel are dispatched when the elements are redrawn.');
78</script>
79</body>
80</html>