1 files changed, 148 insertions, 0 deletions
diff --git a/remote/test/browser/input/doc_events.html b/remote/test/browser/input/doc_events.html
new file mode 100644
index 0000000000..505c784c13
--- /dev/null
+++ b/remote/test/browser/input/doc_events.html
@@ -0,0 +1,148 @@
+<!doctype html>
+<meta charset=utf-8>
+<html>
+<head>
+    <title>Input Events</title>
+    <style>
+      div { padding:0px; margin: 0px; }
+      #trackPointer { position: fixed; }
+      #resultContainer { width: 600px; height: 60px; }
+      .area { width: 100px; height: 50px; background-color: #ccc; }
+      .block { width: 5px; height: 5px; border: solid 1px red; }
+      #dragArea { position: relative; }
+      #dragTarget { position: absolute; top:22px; left:47px;}
+    </style>
+    <script>
+        "use strict";
+        var allEvents = [];
+        function makeParagraph(message) {
+            let paragraph = document.createElement("p");
+            paragraph.textContent = message;
+            return paragraph;
+        }
+        function displayMessage(message) {
+            let eventNode = document.getElementById("events");
+            eventNode.innerHTML = ""
+            eventNode.appendChild(makeParagraph(message));
+        }
+
+        function appendMessage(message) {
+            document.getElementById("events").appendChild(makeParagraph(message));
+        }
+
+        /**
+         * Escape |key| if it's in a surrogate-half character range.
+         *
+         * Example: given "\ud83d" return "U+d83d".
+         *
+         * Otherwise JSON.stringify will convert it to U+FFFD (REPLACEMENT CHARACTER)
+         * when returning a value from executeScript, for example.
+         */
+        function escapeSurrogateHalf(key) {
+          if (typeof key !== "undefined" && key.length === 1) {
+            var charCode = key.charCodeAt(0);
+            var highSurrogate = charCode >= 0xD800 && charCode <= 0xDBFF;
+            var surrogate = highSurrogate || (charCode >= 0xDC00 && charCode <= 0xDFFF);
+            if (surrogate) {
+              key = "U+" + charCode.toString(16);
+            }
+          }
+          return key;
+        }
+
+        function recordKeyboardEvent(event) {
+          var key = escapeSurrogateHalf(event.key);
+          allEvents.push({
+            "code": event.code,
+            "key": key,
+            "which": event.which,
+            "location": event.location,
+            "alt": event.altKey,
+            "ctrl": event.ctrlKey,
+            "meta": event.metaKey,
+            "shift": event.shiftKey,
+            "repeat": event.repeat,
+            "type": event.type
+          });
+          appendMessage(event.type + " " +
+              "code: " + event.code + ", " +
+              "key: " + key + ", " +
+              "which: " + event.which + ", " +
+              "keyCode: " + event.keyCode);
+        }
+        function recordInputEvent(event) {
+          allEvents.push({
+            "data": event.data,
+            "inputType": event.inputType,
+            "isComposing": event.isComposing,
+          });
+          appendMessage("InputEvent " +
+              "data: " + event.data + ", " +
+              "inputType: " + event.inputType + ", " +
+              "isComposing: " + event.isComposing);
+        }
+        function recordPointerEvent(event) {
+          if (event.type === "contextmenu") {
+            event.preventDefault();
+          }
+          allEvents.push({
+            "type": event.type,
+            "button": event.button,
+            "buttons": event.buttons,
+            "pageX": event.pageX,
+            "pageY": event.pageY,
+            "ctrlKey": event.ctrlKey,
+            "metaKey": event.metaKey,
+            "altKey": event.altKey,
+            "shiftKey": event.shiftKey,
+            "target": event.target.id
+          });
+          appendMessage(event.type + " " +
+              "pageX: " + event.pageX + ", " +
+              "pageY: " + event.pageY + ", " +
+              "button: " + event.button + ", " +
+              "buttons: " + event.buttons + ", " +
+              "ctrlKey: " + event.ctrlKey + ", " +
+              "altKey: " + event.altKey + ", " +
+              "metaKey: " + event.metaKey + ", " +
+              "shiftKey: " + event.shiftKey + ", " +
+              "target id: " + event.target.id);
+        }
+        function resetEvents() {
+          allEvents.length = 0;
+          displayMessage("");
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+          let keyReporter = document.getElementById("keys");
+          keyReporter.addEventListener("keyup", recordKeyboardEvent);
+          keyReporter.addEventListener("keypress", recordKeyboardEvent);
+          keyReporter.addEventListener("keydown", recordKeyboardEvent);
+          keyReporter.addEventListener("input", recordInputEvent);
+
+          let mouseReporter = document.getElementById("pointers");
+          mouseReporter.addEventListener("click", recordPointerEvent);
+          mouseReporter.addEventListener("dblclick", recordPointerEvent);
+          mouseReporter.addEventListener("mousedown", recordPointerEvent);
+          mouseReporter.addEventListener("mouseup", recordPointerEvent);
+          mouseReporter.addEventListener("contextmenu", recordPointerEvent);
+        });
+    </script>
+</head>
+<body>
+  <div id="trackPointer" class="block"></div>
+  <div>
+    <h2>KeyReporter</h2>
+    <input type="text" id="keys" size="80">
+  </div>
+  <div>
+    <h2>ClickReporter</h2>
+    <div id="pointers" class="area">
+    </div>
+  </div>
+  <div id="resultContainer">
+    <h2>Events</h2>
+    <div id="events"></div>
+  </div>
+</body>
+</html>