inserted-or-removed.html (3750B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://html.spec.whatwg.org/C/#the-select-element:nodes-are-inserted"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <body> 6 7 <select id="by-parser"> 8 <option selected>First</option> 9 <option selected>Second</option> 10 </select> 11 12 <select id="by-parser-optgroup"> 13 <optgroup> 14 <option selected>First</option> 15 <option selected>Second</option> 16 </optgroup> 17 </select> 18 19 <select id="by-dom"></select> 20 21 <select id="by-innerHTML"></select> 22 23 <script> 24 test(() => { 25 const target = document.querySelector("#by-parser"); 26 assert_equals(target.selectedOptions[0].textContent, 'Second'); 27 28 const target2 = document.querySelector("#by-parser-optgroup"); 29 assert_equals(target2.selectedOptions[0].textContent, 'Second'); 30 }, 'The last selected OPTION should win; Inserted by parser'); 31 32 test(() => { 33 const target = document.querySelector("#by-dom"); 34 const option1 = document.createElement('option'); 35 option1.defaultSelected = true; 36 option1.textContent = 'First'; 37 const option2 = document.createElement('option'); 38 option2.defaultSelected = true; 39 option2.textContent = 'Second'; 40 target.appendChild(option1); 41 target.appendChild(option2); 42 assert_equals(target.selectedOptions[0].textContent, 'Second'); 43 44 target.innerHTML = ''; 45 const optgroup = document.createElement('optgroup'); 46 const option3 = document.createElement('option'); 47 option3.defaultSelected = true; 48 option3.textContent = 'First'; 49 const option4 = document.createElement('option'); 50 option4.defaultSelected = true; 51 option4.textContent = 'Second'; 52 optgroup.appendChild(option3); 53 optgroup.appendChild(option4); 54 target.appendChild(optgroup); 55 assert_equals(target.selectedOptions[0].textContent, 'Second'); 56 }, 'The last selected OPTION should win; Inserted by DOM API'); 57 58 test(() => { 59 const target = document.querySelector("#by-dom"); 60 target.innerHTML = ''; 61 const inner = `<option value="one" selected>First</option> 62 <option value="two" selected>Second</option>`; 63 64 // Emulate what jQuery 1.x/2.x does in append(inner). 65 const fragment = document.createDocumentFragment(); 66 const div = document.createElement('div'); 67 div.innerHTML = '<select multiple>' + inner + '</select>'; 68 while (div.firstChild.firstChild) 69 fragment.appendChild(div.firstChild.firstChild); 70 target.appendChild(fragment); 71 assert_equals(target.selectedOptions[0].textContent, 'Second'); 72 }, 'The last selected OPTION should win; Inserted by jQuery append()'); 73 74 test(() => { 75 const target = document.querySelector("#by-innerHTML"); 76 target.innerHTML = '<option selected>First</option>' + 77 '<option selected>Second</option>'; 78 assert_equals(target.selectedOptions[0].textContent, 'Second'); 79 80 target.innerHTML = '<option selected>First</option>' + 81 '<optgroup><option selected>Second</option>' + 82 '<option selected>Third</option></optgroup>' + 83 '<option selected>Fourth</option>'; 84 assert_equals(target.selectedOptions[0].textContent, 'Fourth'); 85 }, 'The last selected OPTION should win; Inserted by innerHTML'); 86 87 test (() => { 88 for (let insert_location = 0; insert_location < 3; ++insert_location) { 89 const target = document.querySelector('#by-innerHTML'); 90 target.innerHTML = '<option>A</option>' + 91 '<option selected>C</option>' + 92 '<option>D</option>'; 93 const refNode = target.querySelectorAll('option')[insert_location]; 94 95 const opt = document.createElement('option'); 96 opt.selected = true; 97 opt.textContent = 'B'; 98 target.insertBefore(opt, refNode); 99 assert_equals(target.selectedOptions[0].textContent, 'B'); 100 } 101 }, 'If an OPTION says it is selected, it should be selected after it is inserted.'); 102 </script> 103 </body>