<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/soft-navigation-helper.js"></script>
</head>
<body>
<main id=main>
<div>
<a id=link><img src="/images/lcp-256x256.png" id="img"></a>
<a id=not_nav><img src="/images/lcp-16x16.png"></a>
</div>
</main>
<script>
// Push state a couple of times
history.pushState({}, "", "foobar.html");
history.pushState({}, "", "anotherOne.html");
(async () => {
const link = document.getElementById("link");
// Trigger a user interaction that doesn't result in a soft navigation, but
// does paint.
await (async () => {
const not_nav = document.getElementById("not_nav");
let non_soft_nav_click;
const non_soft_nav_click_promise =
new Promise(r => { non_soft_nav_click = r; });
not_nav.addEventListener("click", () => {
addImageToMain("lcp-133x106.png", "not_soft_nav_image");
(new PerformanceObserver(non_soft_nav_click)).observe({type: "element"});
});
if (test_driver) {
test_driver.click(not_nav);
}
await non_soft_nav_click_promise;
})();
const url = URL + "?" + counter;
link.addEventListener("click", () => {
// Add an LCP element.
const img = new Image();
img.src = '/images/lcp-100x500.png' + "?" + Math.random();
document.getElementById("main").appendChild(img);
history.back();
});
promise_test(async t => {
if (test_driver) {
test_driver.click(link);
}
await waitOnSoftNav();
assert_equals(
document.softNavigations, 1,
'Single Soft Navigation detected');
const [entries, options] = await new Promise(resolve => {
(new PerformanceObserver((list, obs, options) => resolve(
[list.getEntries(), options]))).observe(
{type: 'soft-navigation', buffered: true});
});
assert_equals(entries.length, 1,
"Performance observer got an entry");
}, "Ensure that soft navigation entry emitted through a synchronous " +
"event that modified DOM and committed a same document navigation, " +
"and that was preceded by a user intreaction that resulted in a " +
"contentful paint is properly detected.");
})();
</script>
</body>
</html>
Codebase Browser
chromium