select-options-id.html (4692B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/9799"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <select> 8 <option class=one>one</option> 9 <div id=div1> 10 <option class=two>two</option> 11 <div> 12 <option class=three>three</option> 13 </div> 14 <option class=four>four</option> 15 </div> 16 <div> 17 <option class=five>five</option> 18 </div> 19 <div id=div2> 20 <option class=six>six</option> 21 </div> 22 </select> 23 24 <script> 25 const select = document.querySelector('select'); 26 27 function runTest() { 28 const wrapperDiv = document.getElementById('div1'); 29 const firstOption = select.querySelector('option.one'); 30 const secondOption = select.querySelector('option.two'); 31 const thirdOption = select.querySelector('option.three'); 32 const fourthOption = select.querySelector('option.four'); 33 const fifthOption = select.querySelector('option.five'); 34 const sixthOption = select.querySelector('option.six'); 35 const selectChildDiv = document.getElementById('div2'); 36 37 assert_equals(select.length, 6, 'select.length'); 38 assert_equals(select.options.length, 6, 'select.options.length'); 39 assert_equals(select.options[0], firstOption, 'select.options[0]'); 40 assert_equals(select.options[1], secondOption, 'select.options[1]'); 41 assert_equals(select.options[2], thirdOption, 'select.options[2]'); 42 assert_equals(select.options[3], fourthOption, 'select.options[3]'); 43 assert_equals(select.options[4], fifthOption, 'select.options[4]'); 44 assert_equals(select.options[5], sixthOption, 'select.options[5]'); 45 46 assert_equals(select.value, 'one', 'initial select.value'); 47 select.value = 'two'; 48 assert_equals(select.value, 'two', 'select.value after modifying'); 49 50 fourthOption.remove(); 51 assert_equals(select.length, 5, 'select.length after removing an option'); 52 assert_equals(select.options.length, 5, 'select.options.length after removing an option'); 53 assert_equals(select.options[0], firstOption, 'select.options[0] after removing an option'); 54 assert_equals(select.options[1], secondOption, 'select.options[1] after removing an option'); 55 assert_equals(select.options[2], thirdOption, 'select.options[0] after removing an option'); 56 assert_equals(select.options[3], fifthOption, 'select.options[1] after removing an option'); 57 assert_equals(select.options[4], sixthOption, 'select.options[1] after removing an option'); 58 59 wrapperDiv.appendChild(fourthOption); 60 assert_equals(select.length, 6, 'select.length after re-adding an option'); 61 assert_equals(select.options.length, 6, 'select.options.length after re-adding an option'); 62 assert_equals(select.options[0], firstOption, 'select.options[0] after re-adding an option'); 63 assert_equals(select.options[1], secondOption, 'select.options[1] after re-adding an option'); 64 assert_equals(select.options[2], thirdOption, 'select.options[2] after re-adding an option'); 65 assert_equals(select.options[3], fourthOption, 'select.options[2] after re-adding an option'); 66 assert_equals(select.options[4], fifthOption, 'select.options[2] after re-adding an option'); 67 assert_equals(select.options[5], sixthOption, 'select.options[2] after re-adding an option'); 68 69 selectChildDiv.appendChild(fourthOption); 70 assert_equals(select.length, 6, 'select.length after moving option to child div'); 71 assert_equals(select.options.length, 6, 'select.options.length after moving option to child div'); 72 assert_equals(select.options[0], firstOption, 'select.options[0] after moving option to child div'); 73 assert_equals(select.options[1], secondOption, 'select.options[1] after moving option to child div'); 74 assert_equals(select.options[2], thirdOption, 'select.options[2] after moving option to child div'); 75 assert_equals(select.options[3], fifthOption, 'select.options[3] after moving option to child div'); 76 assert_equals(select.options[4], sixthOption, 'select.options[4] after moving option to child div'); 77 assert_equals(select.options[5], fourthOption, 'select.options[5] after moving option to child div'); 78 79 // reset back to normal for the next test 80 wrapperDiv.appendChild(fourthOption); 81 select.value = 'one'; 82 } 83 84 test(() => { 85 runTest(); 86 }, 'Option elements should work if they are a descendant of a selects wrapper div.'); 87 88 test(() => { 89 select.setAttribute('multiple', ''); 90 runTest(); 91 }, 'Options in wrapper div should still work when the multiple attribute is added.'); 92 93 test(() => { 94 select.innerHTML = select.innerHTML; 95 select.value = 'one'; 96 runTest(); 97 }, 'Options in wrapper div in multiple should work after re-parsing and re-attaching.'); 98 </script>