| <!DOCTYPE html> |
| <title>HTMLSelectMenuElement Test: value</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <selectmenu id="selectMenu0"></selectmenu> |
| |
| <selectmenu id="selectMenu1"> |
| <option>one</option> |
| <option>two</option> |
| <div>I'm a div with no part attr</div> |
| <option>three</option> |
| <option>four</option> |
| </selectmenu> |
| |
| <selectmenu id="selectMenu2"> |
| <div part="option">one</div> |
| <div part="option">two</div> |
| <div>I'm a div with no part attr</div> |
| <div part="option">three</div> |
| <div part="option">four</div> |
| </selectmenu> |
| |
| <selectmenu id="selectMenu3"> |
| <div>I'm a div with no part attr</div> |
| <option id="selectMenu3-child1">one</option> |
| <div part="option" id="selectMenu3-child2">two</div> |
| <option id="selectMenu3-child3">three</option> |
| </selectmenu> |
| |
| <selectmenu id="selectMenu4"> |
| <div part="option" id="selectMenu4-child1">two</div> |
| <div part="option" id="selectMenu4-child2">two</div> |
| </selectmenu> |
| |
| <selectmenu id="selectMenu5"> |
| <div slot="button" part="button"> |
| <div part="selected-value" id="selectMenu5-custom-selected-value">Default custom selected-value text</div> |
| </div> |
| <option>one</option> |
| <option>two</option> |
| </selectmenu> |
| |
| <selectmenu id="selectMenu6"> |
| <div slot="button" part="button"> |
| <div part="selected-value" id="selectMenu6-custom-selected-value">Default custom selected-value text</div> |
| </div> |
| <popup slot="listbox" part="listbox"> |
| <option>one</option> |
| <div part="option">two</div> |
| </popup> |
| </selectmenu> |
| |
| <script> |
| |
| test(() => { |
| const selectMenu0 = document.getElementById("selectMenu0"); |
| assert_equals(selectMenu0.value, ""); |
| selectMenu0.value = "something"; |
| assert_equals(selectMenu0.value, "", "Setting value should have no effect if there is no matching option"); |
| }, "Test that HTMLSelectMenu with no options has empty string for value"); |
| |
| test(() => { |
| const selectMenu1 = document.getElementById("selectMenu1"); |
| assert_equals(selectMenu1.value, "one", "value should start with the text of the first option part"); |
| |
| selectMenu1.value = "three"; |
| assert_equals(selectMenu1.value, "three", "value can be set to the text of an option part"); |
| |
| selectMenu1.value = "I'm a div with no part attr"; |
| assert_equals(selectMenu1.value, "three", "Setting value should have no effect if there is no matching option"); |
| }, "Test value with HTMLOptionElement element option parts"); |
| |
| test(() => { |
| const selectMenu2 = document.getElementById("selectMenu2"); |
| assert_equals(selectMenu2.value, "one", "value should start with the text of the first option part"); |
| |
| selectMenu2.value = "three"; |
| assert_equals(selectMenu2.value, "three", "value can be set to the text of an option part"); |
| |
| selectMenu2.value = "I'm a div with no part attr"; |
| assert_equals(selectMenu2.value, "three", "Setting value should have no effect if there is no matching option"); |
| }, "Test value with non-HTMLOptionElement element option parts"); |
| |
| test(() => { |
| const selectMenu3 = document.getElementById("selectMenu3"); |
| assert_equals(selectMenu3.value, "one", "value should start with the text of the first option part"); |
| |
| document.getElementById("selectMenu3-child3").remove(); |
| assert_equals(selectMenu3.value, "one", "Removing a non-selected option should not change the value"); |
| |
| document.getElementById("selectMenu3-child1").remove(); |
| assert_equals(selectMenu3.value, "two", "When the selected option is removed, the new first option should become selected"); |
| |
| document.getElementById("selectMenu3-child2").remove(); |
| assert_equals(selectMenu3.value, "", "When all options are removed, value should be the empty string"); |
| }, "Test that value is updated when options are removed"); |
| |
| test(() => { |
| const selectMenu4 = document.getElementById("selectMenu4"); |
| assert_equals(selectMenu4.value, "one", "value should start with the text of the first option part"); |
| |
| document.getElementById("selectMenu4-child1").setAttribute("part", "notOption"); |
| assert_equals(selectMenu4.value, "two", "Changing the part attribute of the selected option should remove its status as the selected option"); |
| }, "Test that value is updated when the part attribute is removed"); |
| |
| test(() => { |
| const selectMenu5 = document.getElementById("selectMenu5"); |
| let customSelectedValuePart = document.getElementById("selectMenu5-custom-selected-value"); |
| assert_equals(selectMenu5.value, "one", "value should start with the text of the first option part"); |
| assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu"); |
| |
| selectMenu5.value = "two"; |
| assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes"); |
| }, "Test that slotted-in selected-value part is updated to value of selectmenu"); |
| |
| test(() => { |
| const selectMenu6 = document.getElementById("selectMenu6"); |
| let customSelectedValuePart = document.getElementById("selectMenu6-custom-selected-value"); |
| assert_equals(selectMenu6.value, "one", "value should start with the text of the first option part"); |
| assert_equals(customSelectedValuePart.innerText, "one", "Custom selected value part should be set to initial value of selectmenu"); |
| |
| selectMenu6.value = "two"; |
| assert_equals(customSelectedValuePart.innerText, "two", "Custom selected value part should be updated when value of selectmenu changes"); |
| }, "Test that option parts in a slotted-in listbox are reflected in the value property"); |
| |
| </script> |
