<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>This test validates LargestContentfulPaint information for cross-origin redirect chain images.</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/largest-contentful-paint-helpers.js"></script>
<script src=/common/get-host-info.sub.js></script>
</head>
<body>
<script>
setup({"hide_test_state": true});
async_test(t => {
assert_implements(window.LargestContentfulPaint, "LargestContentfulPaint is not implemented");
let destUrl = get_host_info().HTTP_REMOTE_ORIGIN
+ '/resource-timing/resources/multi_redirect.py?';
destUrl += 'page_origin=' + get_host_info().HTTP_ORIGIN;
destUrl += '&cross_origin=' + get_host_info().HTTP_REMOTE_ORIGIN;
destUrl += '&final_resource=/element-timing/resources/circle-tao.svg';
destUrl += '&tao_steps=';
const sizes = [50*50, 66*66, 100*100, 200*200];
const image = document.createElement('img');
image.src = destUrl + '0';
image.setAttribute('id', 'id');
image.width = 200 / 4;
document.body.appendChild(image);
let numObserved = 0;
let beforeLoad = performance.now();
new PerformanceObserver(t.step_func(entries => {
assert_equals(entries.getEntries().length, 1);
const entry = entries.getEntries()[0];
const options = numObserved === 3 ? [] : ['renderTimeIs0'];
checkImage(entry, destUrl + numObserved, 'id', sizes[numObserved], beforeLoad, options);
numObserved++;
if (numObserved === 4)
t.done();
else {
// Change the image to trigger a new LCP entry.
const img = document.getElementById('id');
image.src = destUrl + numObserved;
// Use monotonically increasing image sizes to trigger LCP every time.
image.width = 200 / (4 - numObserved);
beforeLoad = performance.now();
}
})).observe({type: 'largest-contentful-paint'});
}, 'Cross-origin image without TAO should not have its renderTime set, with full TAO it should.');
</script>
</body>
</html>
Codebase Browser
chromium