path: root/testing/web-platform/tests/uievents/keyboard/key-manual.js

var _testing = false;

// The index into _keyTable of the key currently being tested.
var _currKey = 0;

var _keysTotal = 0;
var _keysGood = 0;
var _keysBad = 0;
var _keysSkipped = 0;

var _modifierMode = "None";

var _keydownCapture = [];
var _keyupCapture = [];

var CAPTURE_KEYCODE = 0;
var CAPTURE_CODE = 1;
var CAPTURE_KEY = 2;
var CAPTURE_SHIFTKEY = 3;
var CAPTURE_CONTROLKEY = 4;
var CAPTURE_ALTKEY = 5;
var CAPTURE_METAKEY = 6;

// An array of KeyInfo for each key to be tested.
var _keyTable = [];

// KeyInfo fields.
var KEYINFO_CODE = 0;       // |code| for this key
var KEYINFO_ROW = 1;        // Keyboard row
var KEYINFO_TYPE = 2;       // Key type (see below)
var KEYINFO_WIDTH = 3;      // Width of key: 0=normal
var KEYINFO_KEYCAP = 4;     // Keycap string to display
var KEYINFO_KEY = 5;        // Unmodified key value
var KEYINFO_KEY_SHIFT = 6;  // Shifted key value

var KEYTYPE_NORMAL = 0;
var KEYTYPE_DISABLED = 1;   // Key cannot be tested: e.g., CapsLock
var KEYTYPE_END = 2;        // Used to mark end of KeyTable
var KEYTYPE_MODIFIER = 3;   // Modifer key

function clearChildren(e) {
    while (e.firstChild !== null) {
        e.removeChild(e.firstChild);
    }
}

function setText(e, text) {
    clearChildren(e);
    e.appendChild(document.createTextNode(text));
}

function setUserAgent() {
    var userAgent = navigator.userAgent;
    uaDiv = document.getElementById("useragent");
    setText(uaDiv, userAgent);
}

function addEventListener(obj, etype, handler) {
    if (obj.addEventListener) {
        obj.addEventListener(etype, handler, false);
    } else if (obj.attachEvent) {
        obj.attachEvent("on"+etype, handler);
    } else {
        obj["on"+etype] = handler;
    }
}

function addClass(obj, className) {
    obj.classList.add(className);
}

function removeClass(obj, className) {
    obj.classList.remove(className);
}

function addInnerText(obj, text) {
    obj.appendChild(document.createTextNode(text));
}

function calcLocation(loc) {
    if (loc == 1) return "LEFT";
    if (loc == 2) return "RIGHT";
    if (loc == 3) return "NUMPAD";
    return loc;
}

function isModifierKey(e) {
    // Shift, Control, Alt
    if (e.keyCode >= 16 && e.keyCode <= 18) {
        return true;
    }
    // Windows, Command or Meta key.
    if (e.keyCode == 224 // Right/Left: Gecko
        || e.keyCode == 91    // Left: WebKit/Blink
        || e.keyCode == 93    // Right: WebKit/Blink
        ) {
        return true;
    }
    return false;
}

function init(title, keytable) {
    _keyTable = keytable;

    createBody(title, keytable);

    setUserAgent();

    var input = document.getElementById("input");
    input.disabled = true;
    addEventListener(input, "keydown", onKeyDown);
    addEventListener(input, "keyup", onKeyUp);
    //addEventListener(input, "beforeInput", onBeforeInput);
    //addEventListener(input, "input", onInput);
}

function onKeyDown(e) {
    // Ignore modifier keys when checking modifier combinations.
    if (_modifierMode != "None" && isModifierKey(e)) {
        return;
    }

    _keydownInfo = [e.keyCode, e.code, e.key, e.shiftKey, e.ctrlKey, e.altKey, e.metaKey];
    if (e.keyCode == 9 || e.code == "Tab") {
        e.preventDefault();
    }
}

function onKeyUp(e) {
    // Ignore modifier keys when checking modifier combinations.
    if (_modifierMode != "None" && isModifierKey(e)) {
        return;
    }

    _keyupInfo = [e.keyCode, e.code, e.key, e.shiftKey, e.ctrlKey, e.altKey, e.metaKey];

    if (_testing) {
        verifyKey();
        nextKey();
    }
}

function onBeforeInput(e) {
}

function onInput(e) {
}

function addError(elem, str) {
    var p = document.createElement('p');
    p.classList.add("error2");
    p.textContent = str;
    elem.appendChild(p);
}

function addErrorIncorrect(elem, eventName, attrName, keyEventInfo, attr, expected) {
    addError(elem, "Incorrect " + eventName
        + " |" + attrName + "| = " + keyEventInfo[attr]
        + " - Expected " + expected);
}

function verifyKeyEventFields(eventName, keyEventInfo, code, key, error) {
    var verifyCode = document.getElementById("opt_attr_code").checked;
    var verifyKey = document.getElementById("opt_attr_key").checked;
    var verifyModifiers = document.getElementById("opt_attr_modifiers").checked;
    var good = true;

    if (!verifyCode && !verifyKey && !verifyModifiers) {
        good = false;
        addError(error, "Invalid test: At least one attribute must be selected for testing.");
    }
    if (verifyCode && keyEventInfo[CAPTURE_CODE] != code) {
        good = false;
        addErrorIncorrect(error, eventName, "code", keyEventInfo, CAPTURE_CODE, code);
    }
    if (verifyKey && keyEventInfo[CAPTURE_KEY] != key) {
        good = false;
        addErrorIncorrect(error, eventName, "key", keyEventInfo, CAPTURE_KEY, key);
    }
    if (verifyModifiers) {
        if (keyEventInfo[CAPTURE_SHIFTKEY] != (_modifierMode == "Shift")) {
            good = false;
            addErrorIncorrect(error, eventName, "shiftKey", keyEventInfo, CAPTURE_SHIFTKEY, false);
        }
        if (keyEventInfo[CAPTURE_CONTROLKEY]) {
            good = false;
            addErrorIncorrect(error, eventName, "controlKey", keyEventInfo, CAPTURE_CONTROLKEY, false);
        }
        if (keyEventInfo[CAPTURE_ALTKEY]) {
            good = false;
            addErrorIncorrect(error, eventName, "altKey", keyEventInfo, CAPTURE_ALTKEY, false);
        }
        if (keyEventInfo[CAPTURE_METAKEY]) {
            good = false;
            addErrorIncorrect(error, eventName, "metaKey", keyEventInfo, CAPTURE_METAKEY, false);
        }
    }

    return good;
}

function verifyKey() {
    _keysTotal++;

    var keyInfo = _keyTable[_currKey];
    var code = keyInfo[KEYINFO_CODE];
    var key = keyInfo[KEYINFO_KEY];
    var keyShift = keyInfo[KEYINFO_KEY_SHIFT];

    var keyCheck = key;
    if (_modifierMode == "Shift") {
        keyCheck = keyShift;
    }

    var verifyKeydown = document.getElementById("opt_event_keydown").checked;
    var verifyKeyup = document.getElementById("opt_event_keyup").checked;

    var error = document.createElement('div');
    error.classList.add("error");
    var good = true;

    if (verifyKeydown) {
        good = verifyKeyEventFields("keydown", _keydownInfo, code, keyCheck, error);
    }
    if (verifyKeyup) {
        good = verifyKeyEventFields("keyup", _keyupInfo, code, keyCheck, error);
    }

    if (!verifyKeydown && !verifyKeyup) {
        good = false;
        addError(error, "Invalid test: At least one event must be selected for testing.");
    }

    // Allow Escape key to skip the current key.
    var skipped = false;
    if (_keydownInfo[CAPTURE_KEYCODE] == 27 || _keydownInfo[CAPTURE_CODE] == "Escape") {
        good = true;
        skipped = true;
    }

    if (!good) {
        var p = document.createElement('p');
        p.classList.add("error1");
        p.textContent = "Error : " + code;
        error.insertBefore(p, error.firstChild);
    }

    removeNextKeyHilight();
    if (skipped) {
        _keysSkipped++;
        document.getElementById(code).classList.add("skippedKey")
    } else if (good) {
        _keysGood++;
        document.getElementById(code).classList.add("goodKey")
    } else {
        _keysBad++;
        document.getElementById(code).classList.add("badKey")
    }
    updateTestSummary(good ? null : error);
}

function updateTestSummary(error) {
    document.getElementById("keys-total").textContent = _keysTotal;
    document.getElementById("keys-good").textContent = _keysGood;
    document.getElementById("keys-bad").textContent = _keysBad;
    document.getElementById("keys-skipped").textContent = _keysSkipped;

    if (error) {
        var errors = document.getElementById("errors");
        errors.insertBefore(error, errors.firstChild);
    }
}

function resetTest() {
    _keysTotal = 0;
    _keysGood = 0;
    _keysBad = 0;

    _currKey = -1;
    nextKey();

    updateTestSummary();

    // Remove previous test results.
    clearChildren(document.getElementById("errors"));

    // Remove highlighting from keys.
    for (var i = 0; i < _keyTable.length; i++) {
        var code = _keyTable[i][KEYINFO_CODE];
        var type = _keyTable[i][KEYINFO_TYPE];
        if (type != KEYTYPE_END) {
            var key = document.getElementById(code);
            key.classList.remove("goodKey");
            key.classList.remove("badKey");
            key.classList.remove("skippedKey");
        }
    }
}

function startTest() {
    if (_testing) {
        // Cancel the currently running test.
        endTest();
        return;
    }

    resetTest();
    _testing = true;
    document.getElementById("start").value = "Stop Test"

    var input = document.getElementById("input");
    input.value = "";
    input.disabled = false;
    input.focus();

    // Show test instructions and info.
    document.getElementById("test-info").style.display = 'block';
    document.getElementById("instructions").style.display = 'block';
    document.getElementById("test-done").style.display = 'none';
}

function endTest() {
    _testing = false;
    removeNextKeyHilight();
    document.getElementById("start").value = "Restart Test"
    document.getElementById("input").disabled = true;
    document.getElementById("instructions").style.display = 'none';
    document.getElementById("test-done").style.display = 'block';
}

function removeNextKeyHilight() {
    var curr = document.getElementById(_keyTable[_currKey][KEYINFO_CODE]);
    if (curr) {
        removeClass(curr, "nextKey")
    }
}

function addNextKeyHilight() {
    var curr = document.getElementById(_keyTable[_currKey][KEYINFO_CODE]);
    if (curr) {
        addClass(curr, "nextKey")
    }
}

function nextKey() {
    var keyInfo;
    var keepLooking = true;
    do {
        _currKey++;
        keyInfo = _keyTable[_currKey];
        var type = keyInfo[KEYINFO_TYPE];

        // Skip over disabled keys.
        keepLooking = (type == KEYTYPE_DISABLED);

        // Skip over modifier keys if we're testing modifier combinations.
        if (_modifierMode != "None" && type == KEYTYPE_MODIFIER) {
            keepLooking = true;
        }

        // Skip over keys in disabled rows.
        if (type != KEYTYPE_END) {
            var row = keyInfo[KEYINFO_ROW];
            var rowEnabled = document.getElementById("opt_row_" + row).checked;
            keepLooking = keepLooking || !rowEnabled;
        }
    } while (keepLooking);

    if (keyInfo[KEYINFO_TYPE] == KEYTYPE_END) {
        endTest();
    } else {
        addNextKeyHilight();
    }
}

function toggleOptions() {
    var link = document.getElementById("optionstoggle");
    var options = document.getElementById("options");
    clearChildren(link);
    if (options.style.display == "block") {
        options.style.display = "none";
        addInnerText(link, "Show Options");
    }
    else {
        options.style.display = "block";
        addInnerText(link, "Hide Options");
    }
}

function toggleHelp() {
    var link = document.getElementById("helptoggle");
    var help = document.getElementById("help");
    clearChildren(link);
    if (help.style.display == "block") {
        help.style.display = "none";
        addInnerText(link, "Show Help");
    }
    else {
        help.style.display = "block";
        addInnerText(link, "Hide Help");
    }
}

function createBody(title, keytable) {
    var body = document.getElementsByTagName("body")[0];
    var p;
    var span;

    var h1 = document.createElement('h1');
    h1.textContent = "Keyboard Event Manual Test - " + title;
    body.appendChild(h1);

    // Display useragent.
    p = document.createElement('p');
    p.textContent = "UserAgent: ";
    var useragent = document.createElement('span');
    useragent.id = "useragent";
    p.appendChild(useragent);
    body.appendChild(p);

    // Display input textedit.
    p = document.createElement('p');
    p.textContent = "Test Input: ";
    var input1 = document.createElement('input');
    input1.id = "input";
    input1.type = "text";
    input1.size = 80;
    p.appendChild(input1);
    p.appendChild(document.createTextNode(" "));
    var input2 = document.createElement('input');
    input2.id = "start";
    input2.type = "button";
    input2.onclick = function() { startTest(); return false; }
    input2.value = "Start Test";
    p.appendChild(input2);
    p.appendChild(document.createTextNode(" "));
    var optionsToggle = document.createElement('a');
    optionsToggle.id = "optionstoggle";
    optionsToggle.href = "javascript:toggleOptions()";
    optionsToggle.textContent = "Show Options";
    p.appendChild(optionsToggle);
    p.appendChild(document.createTextNode(" "));
    var helpToggle = document.createElement('a');
    helpToggle.id = "helptoggle";
    helpToggle.href = "javascript:toggleHelp()";
    helpToggle.textContent = "Show Help";
    p.appendChild(helpToggle);
    body.appendChild(p);

    createOptions(body);

    createHelp(body);

    createKeyboard(body, keytable);

    // Test info and summary.
    var test_info = document.createElement('div');
    test_info.id = "test-info";
    test_info.style.display = "none";

    var instructions = document.createElement('div');
    instructions.id = "instructions";
    p = document.createElement('p');
    p.textContent = "Press the highlighted key.";
    instructions.appendChild(p);
    test_info.appendChild(instructions);

    var test_done = document.createElement('div');
    test_done.id = "test-done";
    p = document.createElement('p');
    p.textContent = "Test complete!";
    test_done.appendChild(p);
    test_info.appendChild(test_done);

    var summary = document.createElement('div');
    summary.id = "summary";
    p = document.createElement('p');
    summary.appendChild(document.createTextNode("Keys Tested: "));
    span = document.createElement('span');
    span.id = "keys-total";
    span.textContent = 0;
    summary.appendChild(span);
    summary.appendChild(document.createTextNode("; Passed "));
    span = document.createElement('span');
    span.id = "keys-good";
    span.textContent = 0;
    summary.appendChild(span);
    summary.appendChild(document.createTextNode("; Failed "));
    span = document.createElement('span');
    span.id = "keys-bad";
    span.textContent = 0;
    summary.appendChild(span);
    summary.appendChild(document.createTextNode("; Skipped "));
    span = document.createElement('span');
    span.id = "keys-skipped";
    span.textContent = 0;
    summary.appendChild(span);
    test_info.appendChild(summary);

    var errors = document.createElement('div');
    errors.id = "errors";
    test_info.appendChild(errors);

    body.appendChild(test_info);
}

function addOptionTitle(cell, title) {
    var span = document.createElement('span');
    span.classList.add("opttitle");
    span.textContent = title;
    cell.appendChild(span);
    cell.appendChild(document.createElement("br"));
}

function addOptionCheckbox(cell, id, text) {
    var label = document.createElement("label");

    var input = document.createElement("input");
    input.type = "checkbox";
    input.id = id;
    input.checked = true;
    label.appendChild(input);

    label.appendChild(document.createTextNode(" " + text));
    cell.appendChild(label);

    cell.appendChild(document.createElement("br"));
}

function addOptionRadio(cell, group, text, handler, checked) {
    var label = document.createElement("label");

    var input = document.createElement("input");
    input.type = "radio";
    input.name = group;
    input.value = text;
    input.onclick = handler;
    input.checked = checked;
    label.appendChild(input);

    label.appendChild(document.createTextNode(" " + text));
    cell.appendChild(label);

    cell.appendChild(document.createElement("br"));
}

function handleModifierGroup() {
    var radio = document.querySelector("input[name=opt_modifier]:checked");
    var oldMode = _modifierMode;
    _modifierMode = radio.value;

    if (oldMode == "Shift") {
        document.getElementById("ShiftLeft").classList.remove("activeModifierKey");
        document.getElementById("ShiftRight").classList.remove("activeModifierKey");
    }

    if (_modifierMode == "Shift") {
        document.getElementById("ShiftLeft").classList.add("activeModifierKey");
        document.getElementById("ShiftRight").classList.add("activeModifierKey");
    }
}

function createOptions(body) {
    var options = document.createElement('div');
    options.id = "options";
    options.style.display = "none";

    var table = document.createElement('table');
    table.classList.add("opttable");
    var row = document.createElement('tr');
    var cell;

    cell = document.createElement('td');
    cell.classList.add("optcell");
    addOptionTitle(cell, "Keyboard Rows");
    addOptionCheckbox(cell, "opt_row_0", "Row E (top)");
    addOptionCheckbox(cell, "opt_row_1", "Row D");
    addOptionCheckbox(cell, "opt_row_2", "Row C");
    addOptionCheckbox(cell, "opt_row_3", "Row B");
    addOptionCheckbox(cell, "opt_row_4", "Row A (bottom)");
    row.appendChild(cell);

    cell = document.createElement('td');
    cell.classList.add("optcell");
    addOptionTitle(cell, "Events");
    addOptionCheckbox(cell, "opt_event_keydown", "keydown");
    addOptionCheckbox(cell, "opt_event_keyup", "keyup");
    row.appendChild(cell);

    cell = document.createElement('td');
    cell.classList.add("optcell");
    addOptionTitle(cell, "Attributes");
    addOptionCheckbox(cell, "opt_attr_code", "code");
    addOptionCheckbox(cell, "opt_attr_key", "key");
    addOptionCheckbox(cell, "opt_attr_modifiers", "modifiers");
    row.appendChild(cell);

    cell = document.createElement('td');
    cell.classList.add("optcell");
    addOptionTitle(cell, "Modifiers");
    addOptionRadio(cell, "opt_modifier", "None", handleModifierGroup, true);
    addOptionRadio(cell, "opt_modifier", "Shift", handleModifierGroup, false);
    row.appendChild(cell);

    table.appendChild(row);
    options.appendChild(table);

    body.appendChild(options);
}

function addHelpText(div, text) {
    var p = document.createElement('p');
    p.classList.add("help");
    p.textContent = text;
    div.appendChild(p);
}

function createHelp(body) {
    var help = document.createElement('div');
    help.id = "help";
    help.style.display = "none";

    addHelpText(help, "Click on the \"Start Test\" button to begin testing.");
    addHelpText(help, "Press the hilighted key to test it.");
    addHelpText(help, "Clicking anywhere outside the \"Test Input\" editbox will pause testing. To resume, click back inside the editbox.");
    addHelpText(help, "To skip a key while testing, press Escape.");
    addHelpText(help, "When testing with modifier keys, the modifier must be pressed before the keydown and released after the keyup of the key being tested.");

    body.appendChild(help);
}

function createKeyboard(body, keytable) {
    var keyboard = document.createElement('div');
    keyboard.classList.add("keyboard");

    var currRow = 0;
    var row = document.createElement('div');
    row.classList.add("key-row");

    for (var i = 0; i < keytable.length; i++) {
        var code = keytable[i][KEYINFO_CODE];
        var rowId = keytable[i][KEYINFO_ROW];
        var type = keytable[i][KEYINFO_TYPE];
        var width = keytable[i][KEYINFO_WIDTH];
        var keyCap = keytable[i][KEYINFO_KEYCAP];

        if (type == KEYTYPE_END) {
            continue;
        }

        if (rowId != currRow) {
            keyboard.appendChild(row);
            row = document.createElement('div');
            row.classList.add("key-row");
            currRow = rowId;
        }

        var key = document.createElement('div');
        key.id = code;
        key.classList.add("key");
        if (width != 0) {
            key.classList.add("wide" + width);
        }
        key.textContent = keyCap;

        row.appendChild(key);
    }

    keyboard.appendChild(row);
    body.appendChild(keyboard);
}