mouseover.html | Explore in Territory

<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>
chromium/chrome/browser/page_load_metrics/integration_tests/data/mouseover.html
