had_recent_input.html | Explore in Territory

<!DOCTYPE html>
<title>Layout Instability: verify hadRecentInput for CLS</title>
<script src="resources/util.js"></script>
<style>
#shifter { position: relative; width: 300px; height: 200px; background: blue; }
</style>
<div id="shifter">shifter</div>
<script>

if (PerformanceObserver.supportedEntryTypes.indexOf("layout-shift") == -1)
    throw new Error("Layout Instability API not supported");

// An list to record all the entries with startTime and score.
let element = document.querySelector("#shifter");

let runTest = async () => {
    // Add a event handler to element, and the call back
    // will shift the element and have a layout shift.
    element.addEventListener("pointerdown", async () => {
        element.style = "top: 500px";
    });
    await waitUntilAfterNextLayout();
    element.style = "top: 160px";

    // We don't want to interact until after the first
    // shift happens.
    await waitUntilAfterNextLayout(2);
};
runTest();

async function waitForTestFinished() {
  return await waitForNumLayoutShiftEntries(2);
}
</script>

chromium/chrome/browser/page_load_metrics/integration_tests/data/had_recent_input.html