latency_info.html | Explore in Territory

<html>
<head>
<style>
#test-hover {
    position: absolute;
    left: 20px;
    top: 40px;
    width: 100px;
    height: 30px;
    background-color: red;
}

#test-hover:hover {
    background-color: blue;
}

#test-button {
    position: absolute;
    left: 20px;
    top: 100px;
    width: 100px;
    height: 30px;
}

#scrollable {
    position: absolute;
    left: 200px;
    top: 30px;
    width: 200px;
    height: 200px;
    overflow: scroll;
}

#scrolled {
    width: 800px;
    height: 800px;
}
</style>
</head>
<body>
<div id="test-hover">Hover me</div>
<button id="test-button">Click me</button>
<div id="scrollable"><div id="scrolled"></div></div>
<script>
var pendingListeners = {};
var pendingEvents = {};
var inflightEvents = null;
function onEvent(event)
{
    if (inflightEvents) {
        inflightEvents.push(event);
        return;
    }
    inflightEvents = [event];
    if (event.type === "mousemove")
        document.body.style.backgroundColor = "#" + Math.floor(Math.random() * (1 << 24)).toString(16);
    requestAnimationFrame(onEventAfterFrame);
}

function onEventAfterFrame()
{
    for (event of inflightEvents) {
        var type = event.type;
        var listener = pendingListeners[type];
        if (!listener) {
            pendingEvents[type] = (pendingEvents[type] || 0) + 1;
            continue;
        }
        delete pendingListeners[type];
        listener();
    }
    inflightEvents = null;
}

function waitForEvent(eventType, callback)
{
    if (pendingEvents[eventType]) {
        pendingEvents[eventType]--;
        callback();
        return;
    }
    pendingListeners[eventType] = callback;
}

var eventTypes = [
    "mousemove",
    "mousedown",
    "mouseup",
    "wheel",
    "gesturetap",
    "click",
    "keydown",
    "keyup",
    "touchstart",
    "touchend",
    "touchcancel",
    "touchmove"
];

for (var e of eventTypes) {
    window.addEventListener(e, onEvent, true);
}
</script>
</body>
</html>
chromium/chrome/test/data/devtools/latency_info.html
