| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <form style="visibility: hidden"> |
| <select name=menuListBoxNoSize> |
| <option disabled>A</option> |
| <option>B</option> |
| <option>C</option> |
| </select> |
| <select name=menuListBoxSize1 size=1> |
| <option disabled>A</option> |
| <option>B</option> |
| <option>C</option> |
| </select> |
| <select name=menuListBoxSize3 size=3> |
| <option>A</option> |
| <option>B</option> |
| <option>C</option> |
| </select> |
| <select multiple name=multipleListBox> |
| <option>X</option> |
| <option>Y</option> |
| <option>Z</option> |
| </select> |
| <select multiple name=multipleListBox2> |
| <option selected>X</option> |
| <option selected>Y</option> |
| <option>Z</option> |
| </select> |
| </form> |
| <script> |
| description("Test the behavior of selecting and deselecting options in <select> elements."); |
| |
| var menuListBoxNoSize = document.forms[0].elements.menuListBoxNoSize; |
| debug("ListBox with no size attribute specified."); |
| shouldBe("menuListBoxNoSize.selectedIndex", "1"); |
| shouldBe("menuListBoxNoSize.options[1].selected", "true"); |
| debug("Setting menuListBoxNoSize.options[2].selected = true"); |
| menuListBoxNoSize.options[2].selected = true; |
| debug("Setting menuListBoxNoSize.options[2].selected = false"); |
| menuListBoxNoSize.options[2].selected = false; |
| shouldBe("menuListBoxNoSize.selectedIndex", "1"); |
| shouldBe("menuListBoxNoSize.options[1].selected", "true"); |
| |
| |
| var menuListBoxSize1 = document.forms[0].elements.menuListBoxSize1; |
| debug("\nListBox with size=1 attribute."); |
| shouldBe("menuListBoxSize1.selectedIndex", "1"); |
| shouldBe("menuListBoxSize1.options[1].selected", "true"); |
| debug("Setting menuListBoxSize1.options[2].selected = true"); |
| menuListBoxSize1.options[2].selected = true; |
| debug("Setting menuListBoxSize1.options[2].selected = false"); |
| menuListBoxSize1.options[2].selected = false; |
| shouldBe("menuListBoxSize1.selectedIndex", "1"); |
| shouldBe("menuListBoxSize1.options[1].selected", "true"); |
| |
| |
| var menuListBoxSize3 = document.forms[0].elements.menuListBoxSize3; |
| debug("\nListBox with size=3 attribute."); |
| shouldBe("menuListBoxSize3.selectedIndex", "-1"); |
| debug("Setting menuListBoxSize3.options[1].selected = true"); |
| menuListBoxSize3.options[1].selected = true; |
| debug("Setting menuListBoxSize3.options[1].selected = false"); |
| menuListBoxSize3.options[1].selected = false; |
| shouldBe("menuListBoxSize3.selectedIndex", "-1"); |
| shouldBe("menuListBoxSize3.options[0].selected", "false"); |
| shouldBe("menuListBoxSize3.options[1].selected", "false"); |
| |
| debug("Setting menuListBoxSize3.selectedIndex = 1"); |
| menuListBoxSize3.selectedIndex = 1; |
| shouldBe("menuListBoxSize3.selectedIndex", "1"); |
| shouldBe("menuListBoxSize3.options[1].selected", "true"); |
| |
| menuListBoxSize3.selectedIndex = -1; |
| debug("Setting menuListBoxSize3.selectedIndex = -1"); |
| shouldBe("menuListBoxSize3.selectedIndex", "-1"); |
| shouldBe("menuListBoxSize3.options[0].selected", "false"); |
| shouldBe("menuListBoxSize3.options[1].selected", "false"); |
| |
| |
| var multipleListBox = document.forms[0].elements.multipleListBox; |
| debug("\nListBox with multiple attribute."); |
| shouldBe("multipleListBox.selectedIndex", "-1"); |
| debug("Setting multipleListBox.options[1].selected = true"); |
| multipleListBox.options[1].selected = true; |
| debug("Setting multipleListBox.options[1].selected = false"); |
| multipleListBox.options[1].selected = false; |
| shouldBe("multipleListBox.selectedIndex", "-1"); |
| shouldBe("multipleListBox.options[0].selected", "false"); |
| shouldBe("multipleListBox.options[1].selected", "false"); |
| debug("Setting multipleListBox.options[1].selected = true"); |
| multipleListBox.options[1].selected = true; |
| debug("Setting multipleListBox.options[2].selected = true"); |
| multipleListBox.options[2].selected = true; |
| shouldBe("multipleListBox.options[1].selected", "true"); |
| shouldBe("multipleListBox.options[2].selected", "true"); |
| |
| debug("Unselecting selected first option:"); |
| var multipleListBox2 = document.forms[0].elements.multipleListBox2; |
| shouldBeTrue("multipleListBox2.options[0].selected"); |
| shouldBeFalse("multipleListBox2.options[0].selected = false; multipleListBox2.options[0].selected"); |
| |
| </script> |
| </body> |
| </html> |
