chromium/src/third_party/blink/web_tests/fast/forms/select/add-selected-option.html

<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=13287">bug 13287</a>:
Cannot change SELECT to a dynamically created option.</p>
<form>
<select onchange="onChange()"><option selected>FAILURE</option></select>
<select onchange="onChange()"><option selected>FAILURE</option></select>
<select onchange="onChange()"><option selected>SUCCESS</option></select>
<select onchange="onChange()" size=2><option selected>FAILURE</option></select>
<select onchange="onChange()" size=2><option selected>FAILURE</option></select>
<select onchange="onChange()" size=2><option selected>SUCCESS</option></select>
<select onchange="onChange()" size=2 multiple><option selected>SELECTED</option></select>
<select onchange="onChange()" size=2 multiple><option selected>SELECTED</option></select>
<select onchange="onChange()" size=2><option>FAILURE</option><option selected>FAILURE</option></select>
<select onchange="onChange()" size=2><option>FAILURE</option></select>
</form>
<script>
function onChange() {
  assert_unreached('onChange fired');
}

function testResults(expectedArr, sl) {
  let resultsArr = new Array(sl.options.length);

  for (let i=0; i < sl.options.length; i++) {
    resultsArr[i] = sl.options[i].selected;
  }
  assert_array_equals(resultsArr, expectedArr);
}

let theSelect;

test(() => {
  theSelect = document.forms[0].elements[0];
  theSelect.options.add(new Option('SUCCESS', 'SUCCESS', false, true), 0);
  testResults([true, false], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[1];
  theSelect.insertBefore(new Option('SUCCESS', 'SUCCESS', false, true), theSelect.firstChild);
  testResults([true, false], theSelect);
});

test(() => {
  // defaultSelected doesn't make the element selected when inserted.
  theSelect = document.forms[0].elements[2];
  theSelect.options.add(new Option('FAILURE', 'FAILURE', true, false), 0);
  testResults([false, true], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[3];
  theSelect.options[0].selected = 1;
  theSelect.options.add(new Option('SUCCESS', 'SUCCESS', false, true), 0);
  testResults([true, false], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[4];
  theSelect.options[0].selected = 1;
  theSelect.insertBefore(new Option('SUCCESS', 'SUCCESS', false, true), theSelect.firstChild);
  testResults([true, false], theSelect);
});

test(() => {
  // defaultSelected doesn't make the element selected when inserted.
  theSelect = document.forms[0].elements[5];
  theSelect.options[0].selected = 1;
  theSelect.options.add(new Option('FAILURE', 'FAILURE', true, false), 0);
  testResults([false, true], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[6];
  theSelect.options.add(new Option('SELECTED', 'SELECTED', false, true), 0);
  testResults([true, true], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[7];
  theSelect.insertBefore(new Option('SELECTED', 'SELECTED', false, true), theSelect.firstChild);
  testResults([true, true], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[8];
  theSelect.replaceChild(new Option('SUCCESS', 'SUCCESS', false, true), theSelect.firstChild);
  testResults([true, false], theSelect);
});

test(() => {
  theSelect = document.forms[0].elements[9];
  theSelect.appendChild(new Option('SUCCESS', 'SUCCESS', false, true));
  testResults([false, true], theSelect);
});
</script>