<!DOCTYPE html>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#ask-for-a-reset">
<div id="log"></div>
<script>
test(function() {
    var select = document.createElement('select');
    select.innerHTML = '<option>foo</option>';
    assert_equals(select.selectedIndex, 0);
    select.value = '';
    assert_equals(select.selectedIndex, -1);
    document.body.appendChild(select);
    // appendChild shouldn't change selection because it didn't change the
    // option list.
    assert_equals(select.selectedIndex, -1);
}, 'Adding a SELECT tree to another tree should not reset selection.');

test(function() {
    var select = document.createElement('select');
    document.body.appendChild(select);
    select.innerHTML = '<option>foo</option>';
    assert_equals(select.selectedIndex, 0);
    select.value = '';
    assert_equals(select.selectedIndex, -1);
    document.body.removeChild(select);
    // removeChild shouldn't change selection because it didn't change the
    // option list.
    assert_equals(select.selectedIndex, -1);
}, 'Removing a SELECT tree from another tree should not reset selection.');

test(function() {
    var form = document.createElement('form');
    document.body.appendChild(form);
    var select = document.createElement('select');
    form.appendChild(select);
    select.innerHTML = '<option disabled>Apple</option><option>Banana</option><option>Cherry</option>';
    assert_equals(select.selectedIndex, 1);
    form.reset();
    assert_equals(select.selectedIndex, 1);
}, 'Reset should select the first option element in the list of options that is not disabled to true');

test(function() {
    var select = document.createElement('select');
    select.innerHTML = '<option>foo</option><option>bar</option>';
    document.body.appendChild(select);
    select.selectedIndex = -1;
    select.removeChild(select.lastChild);
    assert_equals(select.selectedIndex, 0);
}, 'Removing an OPTION from a SELECT element should reset selection.');

test(function() {
    var select = document.createElement('select');
    select.multiple = true;
    select.innerHTML = '<option selected>foo</option><option selected>bar</option>';
    document.body.appendChild(select);
    select.removeAttribute('multiple');
    assert_equals(select.selectedOptions.length, 1);
    assert_equals(select.selectedIndex, 0, 'The first selected OPTION should be chosen.');

    select.selectedIndex = -1;
    select.multiple = true;
    select.multiple = false;
    assert_equals(select.selectedOptions.length, 1);
    assert_equals(select.selectedIndex, 0);
}, 'Changing multiple SELECT to single should reset selection.');
</script>
</body>