be273229a3b40f47e509f1083fd26f52a03b26e3
[WebKit-https.git] / WebDriverTests / imported / w3c / webdriver / tests / actions / support / test_actions_wdspec.html
1 <!doctype html>
2 <meta charset=utf-8>
3 <head>
4     <title>Test Actions</title>
5     <style>
6       div { padding:0px; margin: 0px; }
7       #trackPointer { position: fixed; }
8       #resultContainer { width: 600px; height: 60px; }
9       .area { width: 100px; height: 50px; background-color: #ccc; }
10       .block { width: 5px; height: 5px; border: solid 1px red; }
11       #dragArea { position: relative; }
12       #dragTarget { position: absolute; top:22px; left:47px;}
13     </style>
14     <script>
15         "use strict";
16         var els = {};
17         var allEvents = {events: []};
18         function displayMessage(message) {
19             document.getElementById("events").innerHTML = "<p>" + message + "</p>";
20         }
21
22         function appendMessage(message) {
23             document.getElementById("events").innerHTML += "<p>" + message + "</p>";
24         }
25
26         /**
27          * Escape |key| if it's in a surrogate-half character range.
28          *
29          * Example: given "\ud83d" return "U+d83d".
30          *
31          * Otherwise JSON.stringify will convert it to U+FFFD (REPLACEMENT CHARACTER)
32          * when returning a value from executeScript, for example.
33          */
34         function escapeSurrogateHalf(key) {
35           if (typeof key !== "undefined" && key.length === 1) {
36             var charCode = key.charCodeAt(0);
37             var highSurrogate = charCode >= 0xD800 && charCode <= 0xDBFF;
38             var surrogate = highSurrogate || (charCode >= 0xDC00 && charCode <= 0xDFFF);
39             if (surrogate) {
40               key = "U+" + charCode.toString(16);
41             }
42           }
43           return key;
44         }
45
46         function recordKeyboardEvent(event) {
47           var key = escapeSurrogateHalf(event.key);
48           allEvents.events.push({
49             "code": event.code,
50             "key": key,
51             "which": event.which,
52             "location": event.location,
53             "ctrl": event.ctrlKey,
54             "meta": event.metaKey,
55             "shift": event.shiftKey,
56             "repeat": event.repeat,
57             "type": event.type
58           });
59           appendMessage(`${event.type}(` +
60               `code: ${event.code}, ` +
61               `key: ${key}, ` +
62               `which: ${event.which}, ` +
63               `keyCode: ${event.keyCode})`);
64         }
65
66         function recordPointerEvent(event) {
67           if (event.type === "contextmenu") {
68             event.preventDefault();
69           }
70           allEvents.events.push({
71             "type": event.type,
72             "button": event.button,
73             "buttons": event.buttons,
74             "pageX": event.pageX,
75             "pageY": event.pageY,
76             "ctrlKey": event.ctrlKey,
77             "metaKey": event.metaKey,
78             "altKey": event.altKey,
79             "shiftKey": event.shiftKey,
80             "target": event.target.id
81           });
82           appendMessage(`${event.type}(` +
83               `button: ${event.button}, ` +
84               `pageX: ${event.pageX}, ` +
85               `pageY: ${event.pageY}, ` +
86               `button: ${event.button}, ` +
87               `buttons: ${event.buttons}, ` +
88               `ctrlKey: ${event.ctrlKey}, ` +
89               `altKey: ${event.altKey}, ` +
90               `metaKey: ${event.metaKey}, ` +
91               `shiftKey: ${event.shiftKey}, ` +
92               `target id: ${event.target.id})`);
93         }
94
95         function recordFirstPointerMove(event) {
96           recordPointerEvent(event);
97           window.removeEventListener("mousemove", recordFirstPointerMove);
98         }
99
100         function resetEvents() {
101             allEvents.events.length = 0;
102             displayMessage("");
103         }
104
105         function drop(moveHandler) {
106           return function (event) {
107             els.dragArea.removeEventListener("mousemove", moveHandler);
108             els.dragTarget.style.backgroundColor = "yellow";
109             els.dragTarget.addEventListener("mousedown", grab);
110             recordPointerEvent(event);
111           };
112         }
113
114         function move(el, offsetX, offsetY, timeout) {
115           return (event) => {
116             setTimeout(() => {
117               el.style.top = event.clientY + offsetY + "px";
118               el.style.left = event.clientX + offsetX + "px";
119             }, timeout);
120           };
121         }
122
123         function grab(event) {
124           event.target.style.backgroundColor = "red";
125           let boxRect = event.target.getBoundingClientRect();
126           let areaRect = event.target.parentElement.getBoundingClientRect();
127           let moveHandler = move(
128               event.target,
129               // coordinates of dragTarget must be relative to dragArea such that
130               // dragTarget remains under the pointer
131               -(areaRect.left + (event.clientX - boxRect.left)),
132               -(areaRect.top + (event.clientY - boxRect.top)),
133               20);
134           els.dragArea.addEventListener("mousemove", moveHandler);
135           els.dragArea.addEventListener("mouseup", drop(moveHandler), {once: true});
136         }
137
138         document.addEventListener("DOMContentLoaded", () => {
139           var keyReporter = document.getElementById("keys");
140           ["keyup", "keypress", "keydown"].forEach((e) => {
141             keyReporter.addEventListener(e, recordKeyboardEvent);
142           });
143           var outer = document.getElementById("outer");
144           ["click", "dblclick", "mousedown",
145               "mouseup", "contextmenu"].forEach((e) => {
146             outer.addEventListener(e, recordPointerEvent);
147           });
148           window.addEventListener("mousemove", recordPointerEvent, {once: true});
149           //visual cue for mousemove
150           var pointer = document.getElementById("trackPointer");
151           window.addEventListener("mousemove", move(pointer, 15, 15, 30));
152           // drag and drop
153           els.dragArea = document.getElementById("dragArea");
154           els.dragTarget = document.getElementById("dragTarget");
155           els.dragTarget.addEventListener("mousedown", grab, {once: true});
156         });
157     </script>
158 </head>
159 <body>
160   <div id="trackPointer" class="block"></div>
161   <div>
162     <h2>KeyReporter</h2>
163     <input type="text" id="keys" size="80">
164   </div>
165   <div>
166     <h2>ClickReporter</h2>
167     <div id="outer" class="area">
168     </div>
169   </div>
170   <div>
171     <h2>DragReporter</h2>
172     <div id="dragArea" class="area">
173       <div id="dragTarget" class="block"></div>
174     </div>
175   </div>
176   <div id="resultContainer">
177     <h2>Events</h2>
178     <div id="events"></div>
179   </div>
180 </body>
181 </html>