select-add-optgroup.html (1227B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1477785"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#dom-htmloptionscollection-add"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <select> 9 <option id=opt1>opt1</option> 10 <optgroup label=group1> 11 <option id=opt2>opt2</option> 12 </optgroup> 13 </select> 14 15 <script> 16 test(() => { 17 const select = document.querySelector('select'); 18 const optgroup = document.querySelector('optgroup'); 19 const newOption = document.createElement('option'); 20 newOption.textContent = 'new option'; 21 22 select.options.add(newOption, 1); 23 assert_equals(select.options.length, 3); 24 assert_equals(select.options[0], opt1, 'First item should be opt1.'); 25 assert_equals(select.options[1], newOption, 'Second item should be newOption.'); 26 assert_equals(select.options[2], opt2, 'Third item should be opt2.'); 27 assert_equals(newOption.parentNode, optgroup, 'The new option should be inside the optgroup.'); 28 }, 'select.add() with an index should work when the target is inside an optgroup.'); 29 </script>