| <!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.onkeypress = handleEvent; |
| document.onkeydown = handleEvent; |
| document.onkeyup = handleEvent; |
| window.dumpedEvents = []; |
| |
| function handleEvent(event) { |
| var properties = ["type", "eventPhase", "bubbles", "cancelable", "keyIdentifier", "location", "shiftKey", "altKey", "metaKey", "altGraphKey", "keyCode", "charCode"]; |
| obj = {}; |
| for (var key of properties) |
| obj[key] = event[key]; |
| |
| dumpedEvents.push(obj); |
| |
| var block = createBlock(hex_md5(JSON.stringify(obj)), event); |
| var blocksContainer = document.getElementById("blocks"); |
| blocksContainer.appendChild(block); |
| |
| var hashLabel = document.getElementById("hash"); |
| hash.textContent = hex_md5(JSON.stringify(dumpedEvents)); |
| } |
| |
| function createBlock(hash, event) { |
| |
| function glyphForType(type) { |
| switch (type) { |
| case "keydown": return "D"; |
| case "keyup": return "U"; |
| case "keypress": return "K"; |
| } |
| } |
| |
| var color = "#" + hash.substr(0,6); |
| var block = document.createElement("span"); |
| var eventTypeLabel = document.createElement("span"); |
| eventTypeLabel.className = "event-label"; |
| eventTypeLabel.textContent = glyphForType(event.type); |
| block.appendChild(eventTypeLabel); |
| |
| var keyLabel = document.createElement("span"); |
| keyLabel.className = "key-label"; |
| var codepointRegEx = /^U\+\d{4}$/; |
| keyLabel.textContent = event.keyIdentifier.match(codepointRegEx) ? String.fromCharCode(event.keyCode) : event.keyIdentifier; |
| block.appendChild(keyLabel); |
| 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 { |
| padding: 2px 2px; |
| border-radius: 4px; |
| margin: 2px; |
| font-size: 12px; |
| font-weight: bold; |
| font-family: sans-serif; |
| color: #fff; |
| text-align: center; |
| } |
| |
| .event-label::before { |
| content: '('; |
| } |
| |
| .event-label::after { |
| content: ') '; |
| } |
| |
| .key-label { |
| } |
| </style> |
| </head> |
| <body> |
| <p>This page is a manual test for capture and replay of keyboard-related events.</p> |
| <p>Below, a block is created for each keyboard event, where the color is derived from a hash of the keyboard event. At the bottom is a cumulative hash of all keyboard event data.</p> |
| <hr/> |
| <p> |
| To test the replay functionality, open the Web Inspector, start capturing, and then type text into the textarea. After some time, stop capturing and then replay. 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><textarea cols="80" rows="20"></textarea></form> |
| <div id="hash"></div> |
| <div id="blocks"></div> |
| </body> |
| </html> |
