75 lines
2.5 KiB
HTML
75 lines
2.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Detect simple soft navigation.</title>
|
|
<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"></a>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
const link = document.getElementById("link");
|
|
|
|
promise_test(async t => {
|
|
validatePaintEntries('first-contentful-paint', 1);
|
|
validatePaintEntries('first-paint', 1);
|
|
const preClickLcp = await getLcpEntries();
|
|
setEvent(t, link, /*pushState=*/url=>history.pushState({}, '', url),
|
|
/*addContent=*/async () => await addImageToMain(), /*pushUrl=*/true,
|
|
/*eventType=*/"click");
|
|
|
|
const first_click_paint_promise = waitOnPaintEntriesPromise();
|
|
|
|
interact(link);
|
|
await new Promise(resolve => {
|
|
(new PerformanceObserver(resolve)).observe({
|
|
type: 'soft-navigation'
|
|
});
|
|
});
|
|
assert_equals(
|
|
document.softNavigations, 1,
|
|
'One Soft Navigation detected');
|
|
|
|
await first_click_paint_promise;
|
|
const postClickLcp = await getLcpEntries();
|
|
assert_greater_than(
|
|
postClickLcp.length, preClickLcp.length,
|
|
'Soft navigation should have triggered at least an LCP entry');
|
|
assert_less_than(
|
|
postClickLcp[postClickLcp.length - 1].size,
|
|
preClickLcp[preClickLcp.length - 1].size,
|
|
'Soft navigation LCP element should have a smaller size than the hard'
|
|
+ ' navigation LCP element');
|
|
|
|
const second_click_paint_promise = waitOnPaintEntriesPromise();
|
|
const preClickLcp2 = await getLcpEntries();
|
|
interact(link);
|
|
await new Promise(resolve => {
|
|
(new PerformanceObserver(() => resolve())).observe({
|
|
type: 'soft-navigation'
|
|
});
|
|
});
|
|
assert_equals(
|
|
document.softNavigations, 2,
|
|
'Two Soft Navigations detected');
|
|
|
|
await second_click_paint_promise;
|
|
const postClickLcp2 = await getLcpEntries();
|
|
assert_equals(postClickLcp2.length, 3, 'We expected 3 LCP entries at this point');
|
|
assert_greater_than(
|
|
postClickLcp2.length, preClickLcp2.length,
|
|
'Soft navigation should have triggered at least an LCP entry');
|
|
}, "Multiple soft navigations get FP, FCP and LCP for each one");
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|