Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(211)

Side by Side Diff: third_party/WebKit/LayoutTests/imported/wpt/uievents/keyboard/key-manual.js

Issue 2143653006: Import wpt@c875b4212a473363afe8c09f012edf201386cb5b (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Update W3CImportExpectations Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 var _testing = false;
2
3 // The index into _keyTable of the key currently being tested.
4 var _currKey = 0;
5
6 var _keysTotal = 0;
7 var _keysGood = 0;
8 var _keysBad = 0;
9 var _keysSkipped = 0;
10
11 var _modifierMode = "None";
12
13 var _keydownCapture = [];
14 var _keyupCapture = [];
15
16 var CAPTURE_KEYCODE = 0;
17 var CAPTURE_CODE = 1;
18 var CAPTURE_KEY = 2;
19 var CAPTURE_SHIFTKEY = 3;
20 var CAPTURE_CONTROLKEY = 4;
21 var CAPTURE_ALTKEY = 5;
22 var CAPTURE_METAKEY = 6;
23
24 // An array of KeyInfo for each key to be tested.
25 var _keyTable = [];
26
27 // KeyInfo fields.
28 var KEYINFO_CODE = 0; // |code| for this key
29 var KEYINFO_ROW = 1; // Keyboard row
30 var KEYINFO_TYPE = 2; // Key type (see below)
31 var KEYINFO_WIDTH = 3; // Width of key: 0=normal
32 var KEYINFO_KEYCAP = 4; // Keycap string to display
33 var KEYINFO_KEY = 5; // Unmodified key value
34 var KEYINFO_KEY_SHIFT = 6; // Shifted key value
35
36 var KEYTYPE_NORMAL = 0;
37 var KEYTYPE_DISABLED = 1; // Key cannot be tested: e.g., CapsLock
38 var KEYTYPE_END = 2; // Used to mark end of KeyTable
39 var KEYTYPE_MODIFIER = 3; // Modifer key
40
41 function clearChildren(e) {
42 while (e.firstChild !== null) {
43 e.removeChild(e.firstChild);
44 }
45 }
46
47 function setText(e, text) {
48 clearChildren(e);
49 e.appendChild(document.createTextNode(text));
50 }
51
52 function setUserAgent() {
53 var userAgent = navigator.userAgent;
54 uaDiv = document.getElementById("useragent");
55 setText(uaDiv, userAgent);
56 }
57
58 function addEventListener(obj, etype, handler) {
59 if (obj.addEventListener) {
60 obj.addEventListener(etype, handler, false);
61 } else if (obj.attachEvent) {
62 obj.attachEvent("on"+etype, handler);
63 } else {
64 obj["on"+etype] = handler;
65 }
66 }
67
68 function addClass(obj, className) {
69 obj.classList.add(className);
70 }
71
72 function removeClass(obj, className) {
73 obj.classList.remove(className);
74 }
75
76 function addInnerText(obj, text) {
77 obj.appendChild(document.createTextNode(text));
78 }
79
80 function calcLocation(loc) {
81 if (loc == 1) return "LEFT";
82 if (loc == 2) return "RIGHT";
83 if (loc == 3) return "NUMPAD";
84 return loc;
85 }
86
87 function isModifierKey(e) {
88 // Shift, Control, Alt
89 if (e.keyCode >= 16 && e.keyCode <= 18) {
90 return true;
91 }
92 // Windows, Command or Meta key.
93 if (e.keyCode == 224 // Right/Left: Gecko
94 || e.keyCode == 91 // Left: WebKit/Blink
95 || e.keyCode == 93 // Right: WebKit/Blink
96 ) {
97 return true;
98 }
99 return false;
100 }
101
102 function init(title, keytable) {
103 _keyTable = keytable;
104
105 createBody(title, keytable);
106
107 setUserAgent();
108
109 var input = document.getElementById("input");
110 input.disabled = true;
111 addEventListener(input, "keydown", onKeyDown);
112 addEventListener(input, "keyup", onKeyUp);
113 //addEventListener(input, "beforeInput", onBeforeInput);
114 //addEventListener(input, "input", onInput);
115 }
116
117 function onKeyDown(e) {
118 // Ignore modifier keys when checking modifier combinations.
119 if (_modifierMode != "None" && isModifierKey(e)) {
120 return;
121 }
122
123 _keydownInfo = [e.keyCode, e.code, e.key, e.shiftKey, e.ctrlKey, e.altKey, e .metaKey];
124 if (e.keyCode == 9 || e.code == "Tab") {
125 e.preventDefault();
126 }
127 }
128
129 function onKeyUp(e) {
130 // Ignore modifier keys when checking modifier combinations.
131 if (_modifierMode != "None" && isModifierKey(e)) {
132 return;
133 }
134
135 _keyupInfo = [e.keyCode, e.code, e.key, e.shiftKey, e.ctrlKey, e.altKey, e.m etaKey];
136
137 if (_testing) {
138 verifyKey();
139 nextKey();
140 }
141 }
142
143 function onBeforeInput(e) {
144 }
145
146 function onInput(e) {
147 }
148
149 function addError(elem, str) {
150 var p = document.createElement('p');
151 p.classList.add("error2");
152 p.textContent = str;
153 elem.appendChild(p);
154 }
155
156 function addErrorIncorrect(elem, eventName, attrName, keyEventInfo, attr, expect ed) {
157 addError(elem, "Incorrect " + eventName
158 + " |" + attrName + "| = " + keyEventInfo[attr]
159 + " - Expected " + expected);
160 }
161
162 function verifyKeyEventFields(eventName, keyEventInfo, code, key, error) {
163 var verifyCode = document.getElementById("opt_attr_code").checked;
164 var verifyKey = document.getElementById("opt_attr_key").checked;
165 var verifyModifiers = document.getElementById("opt_attr_modifiers").checked;
166 var good = true;
167
168 if (!verifyCode && !verifyKey && !verifyModifiers) {
169 good = false;
170 addError(error, "Invalid test: At least one attribute must be selected f or testing.");
171 }
172 if (verifyCode && keyEventInfo[CAPTURE_CODE] != code) {
173 good = false;
174 addErrorIncorrect(error, eventName, "code", keyEventInfo, CAPTURE_CODE, code);
175 }
176 if (verifyKey && keyEventInfo[CAPTURE_KEY] != key) {
177 good = false;
178 addErrorIncorrect(error, eventName, "key", keyEventInfo, CAPTURE_KEY, ke y);
179 }
180 if (verifyModifiers) {
181 if (keyEventInfo[CAPTURE_SHIFTKEY] != (_modifierMode == "Shift")) {
182 good = false;
183 addErrorIncorrect(error, eventName, "shiftKey", keyEventInfo, CAPTUR E_SHIFTKEY, false);
184 }
185 if (keyEventInfo[CAPTURE_CONTROLKEY]) {
186 good = false;
187 addErrorIncorrect(error, eventName, "controlKey", keyEventInfo, CAPT URE_CONTROLKEY, false);
188 }
189 if (keyEventInfo[CAPTURE_ALTKEY]) {
190 good = false;
191 addErrorIncorrect(error, eventName, "altKey", keyEventInfo, CAPTURE_ ALTKEY, false);
192 }
193 if (keyEventInfo[CAPTURE_METAKEY]) {
194 good = false;
195 addErrorIncorrect(error, eventName, "metaKey", keyEventInfo, CAPTURE _METAKEY, false);
196 }
197 }
198
199 return good;
200 }
201
202 function verifyKey() {
203 _keysTotal++;
204
205 var keyInfo = _keyTable[_currKey];
206 var code = keyInfo[KEYINFO_CODE];
207 var key = keyInfo[KEYINFO_KEY];
208 var keyShift = keyInfo[KEYINFO_KEY_SHIFT];
209
210 var keyCheck = key;
211 if (_modifierMode == "Shift") {
212 keyCheck = keyShift;
213 }
214
215 var verifyKeydown = document.getElementById("opt_event_keydown").checked;
216 var verifyKeyup = document.getElementById("opt_event_keyup").checked;
217
218 var error = document.createElement('div');
219 error.classList.add("error");
220 var good = true;
221
222 if (verifyKeydown) {
223 good = verifyKeyEventFields("keydown", _keydownInfo, code, keyCheck, err or);
224 }
225 if (verifyKeyup) {
226 good = verifyKeyEventFields("keyup", _keyupInfo, code, keyCheck, error);
227 }
228
229 if (!verifyKeydown && !verifyKeyup) {
230 good = false;
231 addError(error, "Invalid test: At least one event must be selected for t esting.");
232 }
233
234 // Allow Escape key to skip the current key.
235 var skipped = false;
236 if (_keydownInfo[CAPTURE_KEYCODE] == 27 || _keydownInfo[CAPTURE_CODE] == "Es cape") {
237 good = true;
238 skipped = true;
239 }
240
241 if (!good) {
242 var p = document.createElement('p');
243 p.classList.add("error1");
244 p.textContent = "Error : " + code;
245 error.insertBefore(p, error.firstChild);
246 }
247
248 removeNextKeyHilight();
249 if (skipped) {
250 _keysSkipped++;
251 document.getElementById(code).classList.add("skippedKey")
252 } else if (good) {
253 _keysGood++;
254 document.getElementById(code).classList.add("goodKey")
255 } else {
256 _keysBad++;
257 document.getElementById(code).classList.add("badKey")
258 }
259 updateTestSummary(good ? null : error);
260 }
261
262 function updateTestSummary(error) {
263 document.getElementById("keys-total").textContent = _keysTotal;
264 document.getElementById("keys-good").textContent = _keysGood;
265 document.getElementById("keys-bad").textContent = _keysBad;
266 document.getElementById("keys-skipped").textContent = _keysSkipped;
267
268 if (error) {
269 var errors = document.getElementById("errors");
270 errors.insertBefore(error, errors.firstChild);
271 }
272 }
273
274 function resetTest() {
275 _keysTotal = 0;
276 _keysGood = 0;
277 _keysBad = 0;
278
279 _currKey = -1;
280 nextKey();
281
282 updateTestSummary();
283
284 // Remove previous test results.
285 clearChildren(document.getElementById("errors"));
286
287 // Remove highlighting from keys.
288 for (var i = 0; i < _keyTable.length; i++) {
289 var code = _keyTable[i][KEYINFO_CODE];
290 var type = _keyTable[i][KEYINFO_TYPE];
291 if (type != KEYTYPE_END) {
292 var key = document.getElementById(code);
293 key.classList.remove("goodKey");
294 key.classList.remove("badKey");
295 key.classList.remove("skippedKey");
296 }
297 }
298 }
299
300 function startTest() {
301 if (_testing) {
302 // Cancel the currently running test.
303 endTest();
304 return;
305 }
306
307 resetTest();
308 _testing = true;
309 document.getElementById("start").value = "Stop Test"
310
311 var input = document.getElementById("input");
312 input.value = "";
313 input.disabled = false;
314 input.focus();
315
316 // Show test instructions and info.
317 document.getElementById("test-info").style.display = 'block';
318 document.getElementById("instructions").style.display = 'block';
319 document.getElementById("test-done").style.display = 'none';
320 }
321
322 function endTest() {
323 _testing = false;
324 removeNextKeyHilight();
325 document.getElementById("start").value = "Restart Test"
326 document.getElementById("input").disabled = true;
327 document.getElementById("instructions").style.display = 'none';
328 document.getElementById("test-done").style.display = 'block';
329 }
330
331 function removeNextKeyHilight() {
332 var curr = document.getElementById(_keyTable[_currKey][KEYINFO_CODE]);
333 if (curr) {
334 removeClass(curr, "nextKey")
335 }
336 }
337
338 function addNextKeyHilight() {
339 var curr = document.getElementById(_keyTable[_currKey][KEYINFO_CODE]);
340 if (curr) {
341 addClass(curr, "nextKey")
342 }
343 }
344
345 function nextKey() {
346 var keyInfo;
347 var keepLooking = true;
348 do {
349 _currKey++;
350 keyInfo = _keyTable[_currKey];
351 var type = keyInfo[KEYINFO_TYPE];
352
353 // Skip over disabled keys.
354 keepLooking = (type == KEYTYPE_DISABLED);
355
356 // Skip over modifier keys if we're testing modifier combinations.
357 if (_modifierMode != "None" && type == KEYTYPE_MODIFIER) {
358 keepLooking = true;
359 }
360
361 // Skip over keys in disabled rows.
362 if (type != KEYTYPE_END) {
363 var row = keyInfo[KEYINFO_ROW];
364 var rowEnabled = document.getElementById("opt_row_" + row).checked;
365 keepLooking = keepLooking || !rowEnabled;
366 }
367 } while (keepLooking);
368
369 if (keyInfo[KEYINFO_TYPE] == KEYTYPE_END) {
370 endTest();
371 } else {
372 addNextKeyHilight();
373 }
374 }
375
376 function toggleOptions() {
377 var link = document.getElementById("optionstoggle");
378 var options = document.getElementById("options");
379 clearChildren(link);
380 if (options.style.display == "block") {
381 options.style.display = "none";
382 addInnerText(link, "Show Options");
383 }
384 else {
385 options.style.display = "block";
386 addInnerText(link, "Hide Options");
387 }
388 }
389
390 function toggleHelp() {
391 var link = document.getElementById("helptoggle");
392 var help = document.getElementById("help");
393 clearChildren(link);
394 if (help.style.display == "block") {
395 help.style.display = "none";
396 addInnerText(link, "Show Help");
397 }
398 else {
399 help.style.display = "block";
400 addInnerText(link, "Hide Help");
401 }
402 }
403
404 function createBody(title, keytable) {
405 var body = document.getElementsByTagName("body")[0];
406 var p;
407 var span;
408
409 var h1 = document.createElement('h1');
410 h1.textContent = "Keyboard Event Manual Test - " + title;
411 body.appendChild(h1);
412
413 // Display useragent.
414 p = document.createElement('p');
415 p.textContent = "UserAgent: ";
416 var useragent = document.createElement('span');
417 useragent.id = "useragent";
418 p.appendChild(useragent);
419 body.appendChild(p);
420
421 // Display input textedit.
422 p = document.createElement('p');
423 p.textContent = "Test Input: ";
424 var input1 = document.createElement('input');
425 input1.id = "input";
426 input1.type = "text";
427 input1.size = 80;
428 p.appendChild(input1);
429 p.appendChild(document.createTextNode(" "));
430 var input2 = document.createElement('input');
431 input2.id = "start";
432 input2.type = "button";
433 input2.onclick = function() { startTest(); return false; }
434 input2.value = "Start Test";
435 p.appendChild(input2);
436 p.appendChild(document.createTextNode(" "));
437 var optionsToggle = document.createElement('a');
438 optionsToggle.id = "optionstoggle";
439 optionsToggle.href = "javascript:toggleOptions()";
440 optionsToggle.textContent = "Show Options";
441 p.appendChild(optionsToggle);
442 p.appendChild(document.createTextNode(" "));
443 var helpToggle = document.createElement('a');
444 helpToggle.id = "helptoggle";
445 helpToggle.href = "javascript:toggleHelp()";
446 helpToggle.textContent = "Show Help";
447 p.appendChild(helpToggle);
448 body.appendChild(p);
449
450 createOptions(body);
451
452 createHelp(body);
453
454 createKeyboard(body, keytable);
455
456 // Test info and summary.
457 var test_info = document.createElement('div');
458 test_info.id = "test-info";
459 test_info.style.display = "none";
460
461 var instructions = document.createElement('div');
462 instructions.id = "instructions";
463 p = document.createElement('p');
464 p.textContent = "Press the highlighted key.";
465 instructions.appendChild(p);
466 test_info.appendChild(instructions);
467
468 var test_done = document.createElement('div');
469 test_done.id = "test-done";
470 p = document.createElement('p');
471 p.textContent = "Test complete!";
472 test_done.appendChild(p);
473 test_info.appendChild(test_done);
474
475 var summary = document.createElement('div');
476 summary.id = "summary";
477 p = document.createElement('p');
478 summary.appendChild(document.createTextNode("Keys Tested: "));
479 span = document.createElement('span');
480 span.id = "keys-total";
481 span.textContent = 0;
482 summary.appendChild(span);
483 summary.appendChild(document.createTextNode("; Passed "));
484 span = document.createElement('span');
485 span.id = "keys-good";
486 span.textContent = 0;
487 summary.appendChild(span);
488 summary.appendChild(document.createTextNode("; Failed "));
489 span = document.createElement('span');
490 span.id = "keys-bad";
491 span.textContent = 0;
492 summary.appendChild(span);
493 summary.appendChild(document.createTextNode("; Skipped "));
494 span = document.createElement('span');
495 span.id = "keys-skipped";
496 span.textContent = 0;
497 summary.appendChild(span);
498 test_info.appendChild(summary);
499
500 var errors = document.createElement('div');
501 errors.id = "errors";
502 test_info.appendChild(errors);
503
504 body.appendChild(test_info);
505 }
506
507 function addOptionTitle(cell, title) {
508 var span = document.createElement('span');
509 span.classList.add("opttitle");
510 span.textContent = title;
511 cell.appendChild(span);
512 cell.appendChild(document.createElement("br"));
513 }
514
515 function addOptionCheckbox(cell, id, text) {
516 var label = document.createElement("label");
517
518 var input = document.createElement("input");
519 input.type = "checkbox";
520 input.id = id;
521 input.checked = true;
522 label.appendChild(input);
523
524 label.appendChild(document.createTextNode(" " + text));
525 cell.appendChild(label);
526
527 cell.appendChild(document.createElement("br"));
528 }
529
530 function addOptionRadio(cell, group, text, handler, checked) {
531 var label = document.createElement("label");
532
533 var input = document.createElement("input");
534 input.type = "radio";
535 input.name = group;
536 input.value = text;
537 input.onclick = handler;
538 input.checked = checked;
539 label.appendChild(input);
540
541 label.appendChild(document.createTextNode(" " + text));
542 cell.appendChild(label);
543
544 cell.appendChild(document.createElement("br"));
545 }
546
547 function handleModifierGroup() {
548 var radio = document.querySelector("input[name=opt_modifier]:checked");
549 var oldMode = _modifierMode;
550 _modifierMode = radio.value;
551
552 if (oldMode == "Shift") {
553 document.getElementById("ShiftLeft").classList.remove("activeModifierKey ");
554 document.getElementById("ShiftRight").classList.remove("activeModifierKe y");
555 }
556
557 if (_modifierMode == "Shift") {
558 document.getElementById("ShiftLeft").classList.add("activeModifierKey");
559 document.getElementById("ShiftRight").classList.add("activeModifierKey") ;
560 }
561 }
562
563 function createOptions(body) {
564 var options = document.createElement('div');
565 options.id = "options";
566 options.style.display = "none";
567
568 var table = document.createElement('table');
569 table.classList.add("opttable");
570 var row = document.createElement('tr');
571 var cell;
572
573 cell = document.createElement('td');
574 cell.classList.add("optcell");
575 addOptionTitle(cell, "Keyboard Rows");
576 addOptionCheckbox(cell, "opt_row_0", "Row E (top)");
577 addOptionCheckbox(cell, "opt_row_1", "Row D");
578 addOptionCheckbox(cell, "opt_row_2", "Row C");
579 addOptionCheckbox(cell, "opt_row_3", "Row B");
580 addOptionCheckbox(cell, "opt_row_4", "Row A (bottom)");
581 row.appendChild(cell);
582
583 cell = document.createElement('td');
584 cell.classList.add("optcell");
585 addOptionTitle(cell, "Events");
586 addOptionCheckbox(cell, "opt_event_keydown", "keydown");
587 addOptionCheckbox(cell, "opt_event_keyup", "keyup");
588 row.appendChild(cell);
589
590 cell = document.createElement('td');
591 cell.classList.add("optcell");
592 addOptionTitle(cell, "Attributes");
593 addOptionCheckbox(cell, "opt_attr_code", "code");
594 addOptionCheckbox(cell, "opt_attr_key", "key");
595 addOptionCheckbox(cell, "opt_attr_modifiers", "modifiers");
596 row.appendChild(cell);
597
598 cell = document.createElement('td');
599 cell.classList.add("optcell");
600 addOptionTitle(cell, "Modifiers");
601 addOptionRadio(cell, "opt_modifier", "None", handleModifierGroup, true);
602 addOptionRadio(cell, "opt_modifier", "Shift", handleModifierGroup, false);
603 row.appendChild(cell);
604
605 table.appendChild(row);
606 options.appendChild(table);
607
608 body.appendChild(options);
609 }
610
611 function addHelpText(div, text) {
612 var p = document.createElement('p');
613 p.classList.add("help");
614 p.textContent = text;
615 div.appendChild(p);
616 }
617
618 function createHelp(body) {
619 var help = document.createElement('div');
620 help.id = "help";
621 help.style.display = "none";
622
623 addHelpText(help, "Click on the \"Start Test\" button to begin testing.");
624 addHelpText(help, "Press the hilighted key to test it.");
625 addHelpText(help, "Clicking anywhere outside the \"Test Input\" editbox will pause testing. To resume, click back inside the editbox.");
626 addHelpText(help, "To skip a key while testing, press Escape.");
627 addHelpText(help, "When testing with modifier keys, the modifier must be pre ssed before the keydown and released after the keyup of the key being tested.");
628
629 body.appendChild(help);
630 }
631
632 function createKeyboard(body, keytable) {
633 var keyboard = document.createElement('div');
634 keyboard.classList.add("keyboard");
635
636 var currRow = 0;
637 var row = document.createElement('div');
638 row.classList.add("key-row");
639
640 for (var i = 0; i < keytable.length; i++) {
641 var code = keytable[i][KEYINFO_CODE];
642 var rowId = keytable[i][KEYINFO_ROW];
643 var type = keytable[i][KEYINFO_TYPE];
644 var width = keytable[i][KEYINFO_WIDTH];
645 var keyCap = keytable[i][KEYINFO_KEYCAP];
646
647 if (type == KEYTYPE_END) {
648 continue;
649 }
650
651 if (rowId != currRow) {
652 keyboard.appendChild(row);
653 row = document.createElement('div');
654 row.classList.add("key-row");
655 currRow = rowId;
656 }
657
658 var key = document.createElement('div');
659 key.id = code;
660 key.classList.add("key");
661 if (width != 0) {
662 key.classList.add("wide" + width);
663 }
664 key.textContent = keyCap;
665
666 row.appendChild(key);
667 }
668
669 keyboard.appendChild(row);
670 body.appendChild(keyboard);
671 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698