<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>

let many_options = '';
for (let i = 0; i < 50; ++i) {
  many_options += `<option>${i}</option>`;
}

selection_test(
  `<div contenteditable="true">|select box: <select>${many_options}</select>the end ...</div>`,
  selection => {
    for (let i = 0; i < 30; ++i)
      selection.modify('move', 'forward', 'character');
  },
  `<div contenteditable="true">select box: <select>${many_options}</select>the end ...|</div>`,
  'The caret should skip over the select box (forward, character)');

selection_test(
  `<div contenteditable="true">select box: <select>${many_options}</select>the end ...|</div>`,
  selection => {
    for (let i = 0; i < 30; ++i)
      selection.modify('move', 'backward', 'character');
  },
  `<div contenteditable="true">|select box: <select>${many_options}</select>the end ...</div>`,
  'The caret should skip over the select box (backward, character)');

selection_test(
  '<div contenteditable="true">|<select><option>1</option></select></div>',
  selection => selection.modify('move', 'forward', 'paragraphBoundary'),
  '<div contenteditable="true"><select><option>1</option></select>|</div>',
  'The caret should skip over the select box (forward, paragraph)');
</script>
</html>