<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script src="./resources/crypto-md5.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8">

    document.onmousewheel = handleEvent;
    
    window.dumpedEvents = [];
    
    function handleEvent(event) {
        var properties = ["type", "eventPhase", "bubbles", "cancelable", "screenX", "screenY", "clientX", "clientY", "ctrlKey", "shiftKey", "altKey", "metaKey", "button", "deltaX", "deltaY", "deltaZ", "deltaMode", "wheelDeltaX", "wheelDeltaY"];
        obj = {};
        for (var key of properties)
            obj[key] = event[key];
    
        dumpedEvents.push(obj);

        var block = createBlock(hex_md5(JSON.stringify(obj)));
        var blocksContainer = document.getElementById("blocks");
        blocksContainer.appendChild(block);
        
        var hashLabel = document.getElementById("hash");
        hash.textContent = hex_md5(JSON.stringify(dumpedEvents));
    }
    
    function createBlock(hash) {
        var color = "#" + hash.substr(0,6);
        var block = document.createElement("span");
        block.style.backgroundColor = color;
        return block;
    }
    
    function stateHash() {
        return hex_md5(JSON.stringify(dumpedEvents));
    }
    
</script>

<style type="text/css">
body {
    max-width: 800px;
}
#blocks {
    display: -webkit-flex;
    width: 600px;
    -webkit-flex-flow: row wrap;
}
    
#blocks > span {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    text-align: center;
}
</style>
</head>
<body>
<p>This page is a manual test for capture and replay of scroll-related DOM events.</p>
<p>Below, a block is created for each mousewheel event, where the color is derived from a hash of the event data. At the bottom is a cumulative hash of all event data.</p>
<hr/>
<textarea rows="3">

This is a scrollable textarea.

.

..

...

....

.....

</textarea>
<p>
To test the replay functionality, open the Web Inspector, start capturing, and then scroll each of the iframe, overflow:scroll element, and the main page's flowed text. After some time, stop capturing and then replay.</p>
<p>The replayed execution should produce the same sequence of blocks, and page contents should scroll the same distance and speed. More importantly, the cumulative hash value should be the same at the end of capturing and at the end of any subsequent replays.</p>
</p>
<hr/>
<div id="hash"></div>
<div id="blocks"></div>
</body>
</html>