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