image-carousel.html (2660B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Element Timing: observe images in carousel</title> 4 <style> 5 body { 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'> 20 <img src="resources/circle.svg" elementtiming='image0' id='image0'> 21 </div> 22 <div class='carousel-image'> 23 <img src="resources/square100.png" elementtiming='image1' id='image1'> 24 </div> 25 </div> 26 27 <script> 28 async_test(function (t) { 29 assert_implements(window.PerformanceElementTiming, "PerformanceElementTiming is not implemented"); 30 const beforeRenderTimes = []; 31 let entry_count = 0; 32 const entry_count_per_element = [0, 0]; 33 const pathname0 = window.location.origin + '/element-timing/resources/circle.svg'; 34 const pathname1 = window.location.origin + '/element-timing/resources/square100.png'; 35 const observer = new PerformanceObserver(t.step_func(list => { 36 list.getEntries().forEach(entry => { 37 if (entry_count % 2 == 0) { 38 checkElement(entry, pathname0, 'image0', 'image0', beforeRenderTimes[entry_count], 39 document.getElementById('image0')); 40 checkRect(entry, [0, 200, 0, 200]); 41 checkNaturalSize(entry, 200, 200); 42 entry_count_per_element[0]++; 43 } 44 else { 45 checkElement(entry, pathname1, 'image1', 'image1', beforeRenderTimes[entry_count], 46 document.getElementById('image1')); 47 checkRect(entry, [0, 100, 0, 100]); 48 checkNaturalSize(entry, 100, 100); 49 entry_count_per_element[1]++; 50 } 51 entry_count++; 52 // Check each image twice before ending the test. 53 if (entry_count == 4) { 54 assert_equals(entry_count_per_element[0], 2); 55 assert_equals(entry_count_per_element[1], 2); 56 t.done(); 57 } 58 }) 59 })); 60 observer.observe({entryTypes: ['element']}); 61 let slideIndex = 0; 62 showCarousel(); 63 64 function showCarousel() { 65 beforeRenderTimes.push(performance.now()); 66 const slides = document.getElementsByClassName("carousel-image"); 67 slides[slideIndex].style.display = "block"; 68 slides[1 - slideIndex].style.display = "none"; 69 slideIndex = 1 - slideIndex; 70 t.step_timeout(showCarousel, 50); // Change image every 50 ms. 71 } 72 }, 'Entries for elements within an image carousel are dispatched when the elements are redrawn.'); 73 </script> 74 </body> 75 </html>