1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<body>
<img src="/images/lcp-16x16.png" id=image>
<span id=span style="display: inline-block;width: 15px; height: 15px"></span>
<script>
const image = document.getElementById("image");
const span = document.getElementById("span");
const loadImage = size => {
return event => {
let zoom;
if (location.search.includes("replace")) {
zoom = document.getElementById("image");
} else {
zoom = new Image();
}
zoom.src=`/images/lcp-${size}.png`;
document.body.appendChild(zoom);
}
};
const loadBackgroundImage = size => {
return event => {
const div = document.createElement("div");
const [width, height] = size.split("x");
div.style = `background-image:
url(/images/lcp-${size}.png);
width: ${width}px; height: ${height}px`;
document.body.appendChild(div);
}
};
const registerMouseover = background => {
const func = background ? loadBackgroundImage : loadImage;
image.addEventListener("mouseover", func("100x50"));
span.addEventListener("mouseover", func("256x256"));
}
const dispatch_mouseover = () => {
span.dispatchEvent(new Event("mouseover"))
};
const run_test = async entries_expected => {
await new Promise(resolve => {
let entries_seen = 0;
const PO = new PerformanceObserver(list => {
const entries = list.getEntries();
for (let entry of entries) {
if (entry.url) {
entries_seen++;
}
}
if (entries_seen >= entries_expected) {
PO.disconnect();
resolve()
}
});
PO.observe({type: "largest-contentful-paint", buffered: true});
});
};
</script>
</body>
|
