listbox-tap.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test.js"></script>
<select id="select1" multiple size="4">
<option>1</option>
<option>2</option>
<option>3</option>
</select>

<script>
description('Tapping on listbox items should toggle selection.');

function tapOption(select, index) {
    var itemHeight = Math.floor(select.offsetHeight / select.size);
    var border = 1;
    var y = border + index * itemHeight;

    select.focus();
    if (window.eventSender) {
        eventSender.gestureTap(select.offsetLeft + border, select.offsetTop + y - window.pageYOffset + itemHeight / 2);
    }
}

function getSelectedValues(select) {
    var selectedValues = [];
    for (var i = 0; i < select.options.length; i++) {
        var option = select.options[i];
        if (option.selected)
            selectedValues.push(option.value);
    }
    return selectedValues.join(',');
}

var select = document.getElementById('select1');

if (!window.eventSender) {
    debug('Tap on the options and see if it toggles the selection.');
} else {
    shouldBeEqualToString('getSelectedValues(select)', '');

    tapOption(select, 0);
    shouldBeEqualToString('getSelectedValues(select)', '1');
    tapOption(select, 1);
    shouldBeEqualToString('getSelectedValues(select)', '1,2');
    tapOption(select, 2);
    shouldBeEqualToString('getSelectedValues(select)', '1,2,3');
    tapOption(select, 3);
    shouldBeEqualToString('getSelectedValues(select)', '1,2,3');
    tapOption(select, 1);
    shouldBeEqualToString('getSelectedValues(select)', '1,3');
    tapOption(select, 0);
    shouldBeEqualToString('getSelectedValues(select)', '3');
    tapOption(select, 2);
    shouldBeEqualToString('getSelectedValues(select)', '');
}
</script>

</html>
chromium/third_party/blink/web_tests/fast/forms/select/listbox-tap.html
