inserted-or-removed.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/inserted-or-removed.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel="help" href="https://html.spec.whatwg.org/C/#the-select-element:nodes-are-inserted">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<body>

<select id="by-parser">

<option selected>First</option>

<option selected>Second</option>

</select>

<select id="by-parser-optgroup">

<optgroup>

<option selected>First</option>

<option selected>Second</option>

</optgroup>

</select>

<select id="by-dom"></select>

<select id="by-innerHTML"></select>

<script>

test(() => {

  const target = document.querySelector("#by-parser");

  assert_equals(target.selectedOptions[0].textContent, 'Second');

  const target2 = document.querySelector("#by-parser-optgroup");

  assert_equals(target2.selectedOptions[0].textContent, 'Second');

}, 'The last selected OPTION should win; Inserted by parser');

test(() => {

  const target = document.querySelector("#by-dom");

  const option1 = document.createElement('option');

  option1.defaultSelected = true;

  option1.textContent = 'First';

  const option2 = document.createElement('option');

  option2.defaultSelected = true;

  option2.textContent = 'Second';

  target.appendChild(option1);

  target.appendChild(option2);

  assert_equals(target.selectedOptions[0].textContent, 'Second');

  target.innerHTML = '';

  const optgroup = document.createElement('optgroup');

  const option3 = document.createElement('option');

  option3.defaultSelected = true;

  option3.textContent = 'First';

  const option4 = document.createElement('option');

  option4.defaultSelected = true;

  option4.textContent = 'Second';

  optgroup.appendChild(option3);

  optgroup.appendChild(option4);

  target.appendChild(optgroup);

  assert_equals(target.selectedOptions[0].textContent, 'Second');

}, 'The last selected OPTION should win; Inserted by DOM API');

test(() => {

  const target = document.querySelector("#by-dom");

  target.innerHTML = '';

  const inner = `<option value="one" selected>First</option>

      <option value="two" selected>Second</option>`;

  // Emulate what jQuery 1.x/2.x does in append(inner).

  const fragment = document.createDocumentFragment();

  const div = document.createElement('div');

  div.innerHTML = '<select multiple>' + inner + '</select>';

  while (div.firstChild.firstChild)

    fragment.appendChild(div.firstChild.firstChild);

  target.appendChild(fragment);

  assert_equals(target.selectedOptions[0].textContent, 'Second');

}, 'The last selected OPTION should win; Inserted by jQuery append()');

test(() => {

  const target = document.querySelector("#by-innerHTML");

  target.innerHTML = '<option selected>First</option>' +

      '<option selected>Second</option>';

  assert_equals(target.selectedOptions[0].textContent, 'Second');

  target.innerHTML = '<option selected>First</option>' +

      '<optgroup><option selected>Second</option>' +

      '<option selected>Third</option></optgroup>' +

      '<option selected>Fourth</option>';

  assert_equals(target.selectedOptions[0].textContent, 'Fourth');

}, 'The last selected OPTION should win; Inserted by innerHTML');

test (() => {

  for (let insert_location = 0; insert_location < 3; ++insert_location) {

    const target = document.querySelector('#by-innerHTML');

    target.innerHTML = '<option>A</option>' +

        '<option selected>C</option>' +

        '<option>D</option>';

    const refNode = target.querySelectorAll('option')[insert_location];

    const opt = document.createElement('option');

    opt.selected = true;

    opt.textContent = 'B';

    target.insertBefore(opt, refNode);

    assert_equals(target.selectedOptions[0].textContent, 'B');

}, 'If an OPTION says it is selected, it should be selected after it is inserted.');

</script>

</body>