select-value-selectedOption.html (9181B)
1 <!DOCTYPE html> 2 <title>HTMLselectElement Test: value and selectedOption</title> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <select id="select0"></select> 7 8 <select id="select1"> 9 <option>one</option> 10 <option>two</option> 11 <div>I'm a div with no part attr</div> 12 <option id="select1-option3">three</option> 13 <option>four</option> 14 </select> 15 16 <select id="select2"> 17 <div behavior="option">one</div> 18 <div behavior="option">two</div> 19 <div>I'm a div with no part attr</div> 20 <div behavior="option">three</div> 21 <div behavior="option">four</div> 22 </select> 23 24 <select id="select3"> 25 <div>I'm a div with no part attr</div> 26 <option id="select3-child1">one</option> 27 <option id="select3-child2">two</option> 28 <option id="select3-child3">three</option> 29 </select> 30 31 <select id="select4"> 32 <button> 33 <selectedcontent id="select4-custom-selected-value">Default custom selected-value text</selectedcontent> 34 </button> 35 <option id="select4-option1">one</option> 36 <option id="select4-option2">two</option> 37 </select> 38 39 <select id="select5"> 40 <button> 41 <selectedcontent id="select5-custom-selected-value">Default custom selected-value text</selectedcontent> 42 </button> 43 <div> 44 <option id="select5-option1">one</option> 45 <option id="select5-option2">two</option> 46 </div> 47 </select> 48 49 <select id="select6"> 50 <option id="select6-option1">one</option> 51 <option id="select6-option2" selected>two</option> 52 <option id="select6-option3">three</option> 53 </select> 54 55 <select id="select7"> 56 <option id="select7-option1">one</option> 57 <option id="select7-option2" selected value="test">two</option> 58 <option>three</option> 59 </select> 60 61 <style> 62 select, ::picker(select) { 63 appearance: base-select; 64 } 65 </style> 66 67 <script> 68 69 test(() => { 70 const select0 = document.getElementById("select0"); 71 assert_equals(select0.value, ""); 72 assert_equals(select0.selectedOptions.length, 0); 73 select0.value = "something"; 74 assert_equals(select0.value, "", "If there is no matching option, select should be cleared"); 75 assert_equals(select0.selectedOptions.length, 0); 76 }, "Test that HTMLselect with no options has empty string for value and null for selectedOption"); 77 78 test(() => { 79 const select1 = document.getElementById("select1"); 80 assert_equals(select1.value, "one", "value should start with the text of the first option part"); 81 82 select1.value = "three"; 83 assert_equals(select1.value, "three", "value can be set to the text of an option part"); 84 assert_equals(select1.selectedOptions[0], document.getElementById("select1-option3")); 85 86 select1.value = "I'm a div with no part attr"; 87 assert_equals(select1.value, "", "If there is no matching option select should be cleared"); 88 assert_equals(select1.selectedOptions.length, 0); 89 }, "Test value and selectedOption with HTMLOptionElement element option parts"); 90 91 test(() => { 92 const select1 = document.getElementById("select1"); 93 select1.value = "one"; 94 assert_equals(select1.value, "one"); 95 96 select1.value = null; 97 assert_equals(select1.value, ""); 98 assert_equals(select1.selectedOptions.length, 0); 99 }, "Test value and selectedOption when value is null"); 100 101 test(() => { 102 const select1 = document.getElementById("select1"); 103 select1.value = "one"; 104 assert_equals(select1.value, "one"); 105 106 select1.value = undefined; 107 assert_equals(select1.value, ""); 108 assert_equals(select1.selectedOptions.length, 0); 109 }, "Test value and selectedOption when value is undefined"); 110 111 test(() => { 112 const select2 = document.getElementById("select2"); 113 assert_equals(select2.value, "", "Non-HTMLOptionElements shouldn't be treated as option parts"); 114 assert_equals(select2.selectedOptions.length, 0); 115 116 select2.value = "three"; 117 assert_equals(select2.value, "", "value can't be set when there are no option parts'"); 118 assert_equals(select2.selectedOptions.length, 0); 119 }, "Test value with non-HTMLOptionElement elements labeled as parts"); 120 121 test(() => { 122 const select3 = document.getElementById("select3"); 123 assert_equals(select3.value, "one", "value should start with the text of the first option part"); 124 assert_equals(select3.selectedOptions[0], document.getElementById("select3-child1")); 125 126 document.getElementById("select3-child3").remove(); 127 assert_equals(select3.value, "one", "Removing a non-selected option should not change the value"); 128 assert_equals(select3.selectedOptions[0], document.getElementById("select3-child1")); 129 130 document.getElementById("select3-child1").remove(); 131 assert_equals(select3.value, "two", "When the selected option is removed, the new first option should become selected"); 132 assert_equals(select3.selectedOptions[0], document.getElementById("select3-child2")); 133 134 document.getElementById("select3-child2").remove(); 135 assert_equals(select3.value, "", "When all options are removed, value should be the empty string"); 136 assert_equals(select3.selectedOptions.length, 0); 137 }, "Test that value and selectedOption are updated when options are removed"); 138 139 test(() => { 140 const select4 = document.getElementById("select4"); 141 let customSelectedValuePart = document.getElementById("select4-custom-selected-value"); 142 assert_equals(select4.value, "one", "value should start with the text of the first option part"); 143 assert_equals(select4.selectedOptions[0], document.getElementById("select4-option1")); 144 assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of select"); 145 146 select4.value = "two"; 147 assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of select changes"); 148 assert_equals(select4.selectedOptions[0], document.getElementById("select4-option2")); 149 }, "Test that slotted-in selected-value part is updated to value of select"); 150 151 test(() => { 152 const select5 = document.getElementById("select5"); 153 let customSelectedValuePart = document.getElementById("select5-custom-selected-value"); 154 assert_equals(select5.value, "one", "value should start with the text of the first option part"); 155 assert_equals(select5.selectedOptions[0], document.getElementById("select5-option1")); 156 assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of select"); 157 158 select5.value = "two"; 159 assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of select changes"); 160 assert_equals(select5.selectedOptions[0], document.getElementById("select5-option2")); 161 }, "Test that option parts in a slotted-in listbox are reflected in the value property"); 162 163 test(() => { 164 let select = document.createElement('select'); 165 assert_equals(select.value, ""); 166 let option = document.createElement('option'); 167 option.innerText = "one"; 168 select.appendChild(option); 169 assert_equals(select.value, "one"); 170 assert_equals(select.selectedOptions[0], option); 171 172 let newOption = document.createElement('option'); 173 newOption.innerText = 'two'; 174 select.appendChild(newOption); 175 select.value = "two"; 176 assert_equals(select.value, "two"); 177 assert_equals(select.selectedOptions[0], newOption); 178 179 select.value = "one"; 180 assert_equals(select.value, "one"); 181 assert_equals(select.selectedOptions[0], option); 182 }, "Test that value and selectedOption are correctly updated"); 183 184 test(() => { 185 const select = document.getElementById("select6"); 186 let selectOption1 = document.getElementById("select6-option1"); 187 188 assert_equals(select.value, "two"); 189 assert_equals(select.selectedOptions[0], document.getElementById("select6-option2")); 190 assert_false(selectOption1.selected); 191 selectOption1.selected = true; 192 assert_equals(select.value, "one"); 193 assert_equals(select.selectedOptions[0], selectOption1); 194 195 let newOption = document.createElement("option"); 196 newOption.innerText = "four"; 197 newOption.selected = true; 198 select.appendChild(newOption); 199 assert_equals(select.value, "four"); 200 assert_equals(select.selectedOptions[0], newOption); 201 assert_false(selectOption1.selected); 202 203 select.value = "three"; 204 assert_equals(select.selectedOptions[0], document.getElementById("select6-option3")); 205 assert_false(newOption.selected); 206 }, "Test that HTMLOption.selected updates select.value and select.selectedOptions"); 207 208 test(() => { 209 const select = document.getElementById("select7"); 210 let selectOption1 = document.getElementById("select7-option1"); 211 212 assert_equals(select.value, "test"); 213 assert_equals(select.selectedOptions[0], document.getElementById("select7-option2")); 214 assert_false(selectOption1.selected); 215 selectOption1.selected = true; 216 assert_equals(select.value, "one"); 217 assert_equals(select.selectedOptions[0], selectOption1); 218 219 selectOption1.value = "new test"; 220 assert_equals(select.value, "new test"); 221 assert_equals(select.selectedOptions[0], selectOption1); 222 selectOption1.removeAttribute("value"); 223 assert_equals(select.value, "one"); 224 assert_equals(select.selectedOptions[0], selectOption1); 225 selectOption1.value = ""; 226 assert_equals(select.value, ""); 227 assert_equals(select.selectedOptions[0], selectOption1); 228 }, "Test that HTMLOption.value updates select.value"); 229 230 </script>