| <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> |
