optgroup-disabled.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<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>
</select>
</form>
<script>
description('Test disabled attribute of optgroup element');

var disabledSet;
var enabledSet;

function querySelectorAll(selector)
{
    var set = {};
    var elements = document.querySelectorAll(selector);
    for (var i = 0; i < elements.length; ++i) {
        var element = elements[i];
        set[element.value || element.id] = true;
    }
    return set;
}

debug('Check :disabled pseudo-class');
disabledSet = querySelectorAll(":disabled");

shouldBeTrue('disabledSet["listbox_optgroup_disabled"]');
shouldBeTrue('disabledSet["listbox_d1"]');
shouldBeTrue('disabledSet["listbox_d2"]');
shouldBeTrue('disabledSet["listbox_d3"]');
shouldBeTrue('disabledSet["listbox_d4"]');

shouldBeTrue('disabledSet["menulist_optgroup_disabled"]');
shouldBeTrue('disabledSet["menulist_d1"]');
shouldBeTrue('disabledSet["menulist_d2"]');
shouldBeTrue('disabledSet["menulist_d3"]');
shouldBeTrue('disabledSet["menulist_d4"]');

enabledSet = querySelectorAll(':enabled');
shouldBeTrue('enabledSet["listbox_optgroup_enabled"]');
shouldBeTrue('enabledSet["menulist_optgroup_enabled"]');

debug('Check IDL attribute');
shouldBeTrue('$("listbox_optgroup_disabled").disabled');
shouldBeFalse('$("listbox_optgroup_enabled").disabled');
shouldBeTrue('$("menulist_optgroup_disabled").disabled');
shouldBeFalse('$("menulist_optgroup_enabled").disabled');

debug("select.disabled doesn't affect optgroup.disabled");
$("listbox").disabled = true;
$("menulist").disabled = true;
shouldBeTrue('$("listbox_optgroup_disabled").disabled');
shouldBeFalse('$("listbox_optgroup_enabled").disabled');
shouldBeTrue('$("menulist_optgroup_disabled").disabled');
shouldBeFalse('$("menulist_optgroup_enabled").disabled');

debug("select.disabled doesn't affect pseudo-class :disabled");
disabledSet = querySelectorAll(':disabled');
shouldBeTrue('disabledSet["listbox_optgroup_disabled"]');
shouldBeTrue('disabledSet["menulist_optgroup_disabled"]');
shouldBeUndefined('disabledSet["listbox_optgroup_enabled"]');
shouldBeUndefined('disabledSet["menulist_optgroup_enabled"]');

debug("form.disabled doesn't affect optgroup.disabled");
$("form").disabled = true;
shouldBeTrue('$("listbox_optgroup_disabled").disabled');
shouldBeFalse('$("listbox_optgroup_enabled").disabled');
shouldBeTrue('$("menulist_optgroup_disabled").disabled');
shouldBeFalse('$("menulist_optgroup_enabled").disabled');
$("form").disabled = false;

debug("form.disabled doesn't affect pseudo-class :disabled");
disabledSet = querySelectorAll(':disabled');
shouldBeTrue('disabledSet["listbox_optgroup_disabled"]');
shouldBeTrue('disabledSet["menulist_optgroup_disabled"]');
shouldBeUndefined('disabledSet["listbox_optgroup_enabled"]');
shouldBeUndefined('disabledSet["menulist_optgroup_enabled"]');

debug("Check IDL [Reflect]");
$("listbox_optgroup_disabled").removeAttribute("disabled");
$("menulist_optgroup_disabled").removeAttribute("disabled");

shouldBeFalse('$("listbox_optgroup_disabled").disabled');
shouldBeFalse('$("menulist_optgroup_disabled").disabled');

$("listbox_optgroup_disabled").setAttribute("disabled", "");
$("menulist_optgroup_disabled").setAttribute("disabled", "");
shouldBeTrue('$("listbox_optgroup_disabled").disabled');
shouldBeTrue('$("menulist_optgroup_disabled").disabled');

debug("optgroup.disabled doesn't affect option.selected");
$("listbox_option_enabled").selected = true;
shouldBe('$("listbox").selectedIndex', '0');

$("listbox_option_disabled").selected = true;
shouldBe('$("listbox").selectedIndex', '4');

$("menulist_option_enabled").selected = true;
shouldBe('$("menulist").selectedIndex', '0');

$("menulist_option_disabled").selected = true;
shouldBe('$("menulist").selectedIndex', '4');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/select/optgroup-disabled.html
