select-option-optgroup.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /dom/nodes/moveBefore/select-option-optgroup.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Selectedness is updated during moveBefore()</title>

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

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

<body>

<select>

  <option value=A>A</option>

  <optgroup label=Optgroup>

    <option value=B>B</option>

  </optgroup>

  <option value=C>C</option>

</select>

<script>

test(t => {

  const optionA = document.querySelector('option[value=A]');

  const optionB = document.querySelector('option[value=B]');

  const optionC = document.querySelector('option[value=C]');

  assert_true(optionA.selected, "A is selected by default");

  assert_false(optionB.selected, "B not selected before first move");

  assert_false(optionC.selected, "C not selected before first move");

  // `moveBefore()`, like `insertBefore()` and kin, leaves a text-only-rendered

  // non-select-owned <option> tag in the "selected" state.

  document.body.moveBefore(optionA, null);

  assert_true(optionA.selected, "A STILL selected after it is moved out");

  assert_true(optionB.selected, "B becomes selected after first move");

  assert_false(optionC.selected, "C is not selected after first move");

  document.body.moveBefore(optionB, null);

  assert_true(optionA.selected, "A STILL selected after second move");

  assert_true(optionB.selected, "B STILL selected after it is moved out");

  assert_true(optionC.selected, "C becomes selected after second move");

  // Move A back into <select> before C.

  document.querySelector('select').moveBefore(optionA, optionC);

  assert_true(optionA.selected, "A STILL selected after it is moved back in");

  assert_true(optionB.selected, "B STILL selected after third move");

  assert_false(optionC.selected, "C no longer selected after third move");

}, "Option selectedness is updated on option and optgroup DOM moves");

</script>

<select id=one>

  <div class=one>

    <option class=one>one</option>

  </div>

  <div class=two>

    <option class=two>two</option>

  </div>

</select>

<select id=two>

</select>

<div id=div></div>

<script>

test(() => {

  const selectOne = document.getElementById('one');

  const selectTwo = document.getElementById('two');

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

  const optionOne = selectOne.querySelector('option.one');

  const optionTwo = selectOne.querySelector('option.two');

  const oneWrapper = selectOne.querySelector('div.one');

  const twoWrapper = selectOne.querySelector('div.two');

  assert_true(optionOne.selected,

    'option one should be selected at the start of the test.');

  assert_false(optionTwo.selected,

    'option two should not be selected at the start of the test.');

  selectTwo.moveBefore(twoWrapper, null);

  assert_true(optionTwo.selected,

    'option two should become selected after moving into an empty select.');

  assert_equals(selectTwo.value, 'two',

    'select.value should update after moving option into it.');

  selectTwo.moveBefore(oneWrapper, null);

  assert_false(optionTwo.selected,

    'option two should become deselected after moving another selected option in.');

  assert_true(optionOne.selected,

    'option one should become stay selected after moving.');

  assert_equals(selectOne.value, '',

    'select.value should update after moving all options out.');

  assert_equals(selectTwo.value, 'one',

    'select.value should not change after moving another option in.');

  div.moveBefore(oneWrapper, null);

  div.moveBefore(twoWrapper, null);

  assert_equals(selectTwo.value, '',

    'select.value should update again after moving options out.');

}, 'Moving options between select elements.');

</script>