75 lines
2.6 KiB
HTML
75 lines
2.6 KiB
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>
|