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

    window.dumpedStates = [];

    function dumpState() {
        obj = {
             height: window.screen.height,
             width: window.screen.width,
             colorDepth: window.screen.colorDepth,
             pixelDepth: window.screen.pixelDepth,
             availLeft: window.screen.availLeft,
             availTop: window.screen.availTop,
             availHeight: window.screen.availHeight,
             availWidth: window.screen.availWidth,
        };

        dumpedStates.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(dumpedStates));

        appendDetails(obj);
    }

    function appendDetails(obj) {
        var detailsContainer = document.getElementById("details");
        var tableElement = document.createElement("table");
        for (var key in obj) {
            var rowElement = document.createElement("tr");
            var keyElement = document.createElement("td");
            keyElement.textContent = key;
            rowElement.appendChild(keyElement);
            var valueElement = document.createElement("td");
            valueElement.textContent = obj[key];
            rowElement.appendChild(valueElement);
            tableElement.appendChild(rowElement);
        }
        detailsContainer.appendChild(tableElement);
        detailsContainer.appendChild(document.createElement("hr"));
    }

    function createBlock(hash) {
        var color = "#" + hash.substr(0,6);
        var block = document.createElement("span");
        block.style.backgroundColor = color;
        return block;
    }

</script>

<style type="text/css">
body {
    max-width: 800px;
}
#blocks {
    display: -webkit-flex;
    width: 600px;
    -webkit-flex-flow: row wrap;
}

table {
    text-decoration: bold;
    font-family: monospace;
}

#blocks > span {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    font-family: sans-serif;
    color: #fff;
    text-align: center;
}
</style>
</head>
<body onload="dumpState()">
<p>This page is a manual test for capture and replay of the Screen API.</p>
<p>Below, a block is created for each button press that dumps state. The color is derived from a hash of the state. At the bottom is a cumulative hash of all dumped data.</p>
<hr/>
<p>
To test the replay functionality, open the Web Inspector and start capturing. Then perform one of the following to change screen state:
</p>
<ul>
    <li>If you have two monitors, move the menu bar from one display to the other.</li>
    <li>Change the monitor's resolution.</li>
    <li>Change the monitor's color depth.</li>
    <li>Move the browser window between monitors with different color depth, size, or pixel ratio.</li>
</ul>
</p>
Then, stop capturing and replay the recording. The replayed execution should produce the same sequence of blocks. 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/>
<form>
<input type="button" value="Dump window.screen Values" onclick="dumpState()" />
</form>
<div id="hash"></div>
<div id="blocks"></div>
<div id="details"></div>
</body>
</html>