mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 13:48:23 +02:00
e6176f6902
Automatic update from web-platform-tests [ElementTiming] Add request URL and responseEnd This CL adds the initial URL and the response end from ResourceTiming into ElementTiming. The information is currently only stored on the ResourceTimingInfo object which is not accessible to ImageElementTiming (and in fact, could be gone by the time the ElementTiming code is executed). Thus, we store the information in ImageResourceContent. Bug: 879270 Change-Id: I72a80c67956adb6e869f39ca3c77829bad86044e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1483733 Reviewed-by: Yoav Weiss <yoavweiss@chromium.org> Reviewed-by: Yutaka Hirano <yhirano@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#638153} -- wpt-commits: 84bcab667e849b1baa6b0bd70244375190521b59 wpt-pr: 15554
117 lines
4.5 KiB
HTML
117 lines
4.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<meta charset=utf-8>
|
|
<title>Element Timing: multiple images</title>
|
|
<body>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
}
|
|
#img1 {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#img2 {
|
|
margin-top:150px;
|
|
margin-left:50px;
|
|
}
|
|
</style>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="resources/element-timing-helpers.js"></script>
|
|
<script>
|
|
let beforeRender, image1Observed=0, image2Observed=0, image3Observed=0;
|
|
async_test(function (t) {
|
|
const index = window.location.href.lastIndexOf('/');
|
|
const observer = new PerformanceObserver(
|
|
t.step_func(function(entryList) {
|
|
entryList.getEntries().forEach( entry => {
|
|
if (entry.identifier === 'image1') {
|
|
if (image1Observed) {
|
|
assert_unreached("Observer received image1 more than once");
|
|
t.done();
|
|
}
|
|
image1Observed = 1;
|
|
const pathname1 = window.location.href.substring(0, index) +
|
|
'/resources/square100.png';
|
|
checkElement(entry, pathname1, 'image1', beforeRender);
|
|
// This image is horizontally centered.
|
|
// Using abs and comparing to 1 because the viewport sizes could be odd.
|
|
// If a size is odd, then image cannot be in the pure center, but left
|
|
// and right should still be very close to their estimated coordinates.
|
|
assert_less_than_equal(Math.abs(entry.intersectionRect.left -
|
|
(document.documentElement.clientWidth / 2 - 50)), 1,
|
|
'left of rect for image1');
|
|
assert_less_than_equal(Math.abs(entry.intersectionRect.right -
|
|
(document.documentElement.clientWidth / 2 + 50)), 1,
|
|
'right of rect for image1');
|
|
assert_equals(entry.intersectionRect.top, 0, 'top of rect for image1');
|
|
assert_equals(entry.intersectionRect.bottom,
|
|
100, 'bottom of rect for image1');
|
|
}
|
|
else if (entry.identifier === 'image2') {
|
|
if (image2Observed) {
|
|
assert_unreached("Observer received image2 more than once");
|
|
t.done();
|
|
}
|
|
image2Observed = 1;
|
|
const pathname2 = window.location.href.substring(0, index) +
|
|
'/resources/square20.png';
|
|
checkElement(entry, pathname2, 'image2', beforeRender);
|
|
// This image should be below image 1, and should respect the margin.
|
|
checkRect(entry, [50, 250, 250, 450], "of image2");
|
|
}
|
|
else if (entry.identifier === 'image3') {
|
|
if (image3Observed) {
|
|
assert_unreached("Observer received image3 more than once");
|
|
t.done();
|
|
}
|
|
image3Observed = 1;
|
|
const pathname3 = window.location.href.substring(0, index) +
|
|
'/resources/circle.svg';
|
|
checkElement(entry, pathname3, 'image3', beforeRender);
|
|
// This image is just to the right of image2.
|
|
checkRect(entry, [250, 450, 250, 450], "of image3");
|
|
}
|
|
else {
|
|
assert_unreached("Received an unexpected identifier.");
|
|
t.done();
|
|
}
|
|
if (image1Observed && image2Observed && image3Observed) {
|
|
t.done();
|
|
}
|
|
});
|
|
})
|
|
);
|
|
observer.observe({entryTypes: ['element']});
|
|
function addImage(number, source, width=0) {
|
|
const img = document.createElement('img');
|
|
img.src = source;
|
|
img.id = 'img' + number;
|
|
img.setAttribute('elementtiming', 'image' + number);
|
|
if (width !== 0)
|
|
img.width = width;
|
|
document.body.appendChild(img);
|
|
}
|
|
// Add the images during onload to be sure that the observer is registered in
|
|
// time to observe the element timing.
|
|
window.onload = () => {
|
|
addImage(1, 'resources/square100.png');
|
|
// Use requestAnimationFrame and a timeout to ensure that the images are
|
|
// processed in the order we want.
|
|
requestAnimationFrame( () => {
|
|
t.step_timeout( () => {
|
|
// Set the size equal to that of image3 to make positioning easier.
|
|
addImage(2, 'resources/square20.png', 200);
|
|
requestAnimationFrame( () => {
|
|
t.step_timeout( () => {
|
|
addImage(3, 'resources/circle.svg');
|
|
}, 0);
|
|
});
|
|
}, 0);
|
|
});
|
|
beforeRender = performance.now();
|
|
};
|
|
}, 'PerformanceObserver can observe multiple image elements.');
|
|
</script>
|
|
</body>
|