1 files changed, 131 insertions, 0 deletions
diff --git a/testing/web-platform/tests/webdriver/actions/support/test_actions_wdspec.html b/testing/web-platform/tests/webdriver/actions/support/test_actions_wdspec.html
new file mode 100644
index 000000000..38b3885f6
--- /dev/null
+++ b/testing/web-platform/tests/webdriver/actions/support/test_actions_wdspec.html
@@ -0,0 +1,131 @@
+<!doctype html>
+<meta charset=utf-8>
+<head>
+    <title>Test Actions</title>
+    <style>
+      div { padding:0px; margin: 0px; }
+      #resultContainer { width: 600px; height: 60px; }
+      #outer { width: 100px; height: 50px; background-color: #ccc; }
+      #trackPointer {
+        width: 5px;
+        height: 5px;
+        border: solid 1px red;
+        position: fixed; }
+    </style>
+    <script>
+        var allEvents = {events: []};
+        function displayMessage(message) {
+            document.getElementById("events").innerHTML = "<p>" + message + "</p>";
+        }
+
+        function appendMessage(message) {
+            document.getElementById("events").innerHTML += "<p>" + message + "</p>";
+        }
+
+        /**
+         * 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.events.push({
+            "code": event.code,
+            "key": key,
+            "which": event.which,
+            "location": event.location,
+            "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})`);
+        }
+
+        function recordPointerEvent(event) {
+          allEvents.events.push({
+            "type": event.type,
+            "button": event.button,
+            "buttons": event.buttons,
+            "pageX": event.pageX,
+            "pageY": event.pageY,
+            "target": event.target.id
+          });
+          appendMessage(`${event.type}(` +
+              `button: ${event.button}, ` +
+              `pageX: ${event.pageX}, ` +
+              `pageY: ${event.pageY}, ` +
+              `button: ${event.button}, ` +
+              `buttons: ${event.buttons}, ` +
+              `target id: ${event.target.id})`);
+        }
+
+        function recordFirstPointerMove(event) {
+          recordPointerEvent(event);
+          window.removeEventListener("mousemove", recordFirstPointerMove);
+        }
+
+        function resetEvents() {
+            allEvents.events.length = 0;
+            displayMessage("");
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+          var keyReporter = document.getElementById("keys");
+          ["keyup", "keypress", "keydown"].forEach((e) => {
+            keyReporter.addEventListener(e, recordKeyboardEvent);
+          });
+          var outer = document.getElementById("outer");
+          ["click", "dblclick", "mousedown",
+              "mouseup", "contextmenu"].forEach((e) => {
+            outer.addEventListener(e, recordPointerEvent);
+          });
+          window.addEventListener("mousemove", recordFirstPointerMove);
+          //visual cue for mousemove
+          var pointer = document.getElementById("trackPointer");
+          window.addEventListener("mousemove", (e) => {
+            setTimeout(() => {
+              let offset = 15;
+              pointer.style.top = e.pageY + offset + "px";
+              pointer.style.left = e.pageX + offset + "px";
+            }, 30);
+          });
+        });
+    </script>
+</head>
+<body>
+  <div id="trackPointer"></div>
+  <div>
+    <h2>KeyReporter</h2>
+    <input type="text" id="keys" size="80">
+  </div>
+  <div>
+    <h2>ClickReporter</h2>
+    <div id="outer">
+    </div>
+  </div>
+  <div id="resultContainer">
+    <h2>Events</h2>
+    <div id="events"></div>
+  </div>
+</body>
+</html>