optgroup-clicking.html | Explore in Territory

<!DOCTYPE html>
<html>
<body onload="test()">
<script src="../../../resources/js-test.js"></script>
<script src="../resources/common.js"></script>

<form id="form">
<select size="10" id="listbox">
<optgroup label="Enabled" id="listbox_optgroup_enabled">
    <option value="listbox_e1" id="listbox_option_enabled">One</option>
    <option value="listbox_e2">Two</option>
    <option value="listbox_e3">Three</option>
    <option value="listbox_e4">Four</option>
</optgroup>
<optgroup label="Disabled" disabled id="listbox_optgroup_disabled">
    <option value="listbox_d1" id="listbox_option_disabled">One</option>
    <option value="listbox_d2">Two</option>
    <option value="listbox_d3">Three</option>
    <option value="listbox_d4">Four</option>
</optgroup>
</select>
<br />
<select size="1" id="menulist">
<optgroup label="Enabled" id="menulist_optgroup_enabled">
    <option value="listbox_e1" id="menulist_option_enabled">One</option>
    <option value="listbox_e2">Two</option>
    <option value="listbox_e3">Three</option>
    <option value="listbox_e4">Four</option>
</optgroup>
<optgroup label="Disabled" disabled id="menulist_optgroup_disabled">
    <option value="menulist_d1" id="menulist_option_disabled">One</option>
    <option value="menulist_d2">Two</option>
    <option value="menulist_d3">Three</option>
    <option value="menulist_d4">Four</option>
</optgroup>
<optgroup label="Enabled2">
    <option value="listbox_e21">One</option>
    <option value="listbox_e22">Two</option>
    <option value="listbox_e23">Three</option>
    <option value="listbox_e24">Four</option>
</optgroup>
</select>
</form>
<script>
description('Test clicking with optgroup element');

window.jsTestIsAsync = true;

function test()
{
    if (!window.testRunner) {
        debug("This test needs testRunner.");
        return;
    }

    debug("\nClick enabled option");
    $("listbox").selectedIndex = 2;
    mouseMoveToIndexInListbox(1 + 1, 'listbox'); // +1 for optgroup
    eventSender.mouseDown();
    eventSender.mouseUp();
    shouldBe('$("listbox").selectedIndex', '1');

    debug("\nClick on optgroup, should not deselect selectedIndex");
    mouseMoveToIndexInListbox(0, 'listbox'); // Select on optgroup
    eventSender.mouseDown();
    eventSender.mouseUp();
    shouldBe('$("listbox").selectedIndex', '1');

    debug("\nClick disabled option - doesn't change selectedIndex");
    mouseMoveToIndexInListbox(5 + 2, 'listbox'); // +2 for optgroup's
    eventSender.mouseDown();
    eventSender.mouseUp();
    shouldBe('$("listbox").selectedIndex', '1');

    debug("\nMenu list with arrow key. The test is expected to fail on OSX because of a key binding difference.");
    $("menulist").selectedIndex = 3;
    $("menulist").focus();
    eventSender.keyDown("ArrowDown");
    eventSender.keyDown("Enter");
    shouldBe('$("menulist").selectedIndex', '8');

    finishJSTest();
}
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/select/optgroup-clicking.html
