Skip to content

GitLab

T
tangled
Commit 870fe911 authored by Nicolás Peña Moreno's avatar Nicolás Peña Moreno Committed by Commit Bot
Browse files
Options

[ElementTiming] Add carousel image test 

This CL adds a test for carousel images. The test contains a carousel of
two images which has a timeout to change image every 50 ms. Because the
images are completely removed from the page and then readded, Element
Timing detects the new addition as a new element, so a new entry is
dispatched every time. This is helpful for measuring latency, for
example when the image carousel change is prompted by user input.

Bug: 879270
Change-Id: I84a034d307c026ba50d12d8bb6241a7fceeadae5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1540457
Commit-Queue: Nicolás Peña Moreno <npm@chromium.org>
Reviewed-by: default avatarTimothy Dresser <tdresser@chromium.org>
Cr-Commit-Position: refs/heads/master@{#644834}
parent f27bfb85
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 0 deletions
third_party/blink/web_tests/external/wpt/element-timing/image-carousel.html 0 → 100644
View file @ 870fe911
<!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'>
</div>
<div class='carousel-image'>
<img src="resources/square100.png" elementtiming='image1'>
</div>
</div>
<script>
async_test(function (t) {
const beforeRenderTimes = [];
let entry_count = 0;
const entry_count_per_element = [0, 0];
const index = window.location.href.lastIndexOf('/');
const pathname0 = window.location.href.substring(0, index) +
'/resources/circle.svg';
const pathname1 = window.location.href.substring(0, index) +
'/resources/square100.png';
const observer = new PerformanceObserver(list => {
list.getEntries().forEach(entry => {
if (entry_count % 2 == 0) {
checkElement(entry, pathname0, 'image0', beforeRenderTimes[entry_count]);
checkRect(entry, [0, 200, 0, 200]);
entry_count_per_element[0]++;
}
else {
checkElement(entry, pathname1, 'image1', beforeRenderTimes[entry_count]);
checkRect(entry, [0, 100, 0, 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment