third_party/WebKit/LayoutTests/fast/forms/select/option-selecting.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta charset="utf-8">
   5 <script src="../../../resources/js-test.js"></script>
   6 </head>
   7 <body>
   8 <form style="visibility: hidden">
   9     <select name=menuListBoxNoSize>
  10         <option disabled>A</option>
  11         <option>B</option>
  12         <option>C</option>
  13     </select>
  14     <select name=menuListBoxSize1 size=1>
  15         <option disabled>A</option>
  16         <option>B</option>
  17         <option>C</option>
  18     </select>
  19     <select name=menuListBoxSize3 size=3>
  20         <option>A</option>
  21         <option>B</option>
  22         <option>C</option>
  23     </select>
  24     <select multiple name=multipleListBox>
  25         <option>X</option>
  26         <option>Y</option>
  27         <option>Z</option>
  28     </select>
  29     <select multiple name=multipleListBox2>
  30         <option selected>X</option>
  31         <option selected>Y</option>
  32         <option>Z</option>
  33     </select>
  34 </form>
  35 <script>
  36 description("Test the behavior of selecting and deselecting options in &lt;select&gt; elements.");
  37
  38 var menuListBoxNoSize = document.forms[0].elements.menuListBoxNoSize;
  39 debug("ListBox with no size attribute specified.");
  40 shouldBe("menuListBoxNoSize.selectedIndex", "1");
  41 shouldBe("menuListBoxNoSize.options[1].selected", "true");
  42 debug("Setting menuListBoxNoSize.options[2].selected = true");
  43 menuListBoxNoSize.options[2].selected = true;
  44 debug("Setting menuListBoxNoSize.options[2].selected = false");
  45 menuListBoxNoSize.options[2].selected = false;
  46 shouldBe("menuListBoxNoSize.selectedIndex", "1");
  47 shouldBe("menuListBoxNoSize.options[1].selected", "true");
  48
  49
  50 var menuListBoxSize1 = document.forms[0].elements.menuListBoxSize1;
  51 debug("\nListBox with size=1 attribute.");
  52 shouldBe("menuListBoxSize1.selectedIndex", "1");
  53 shouldBe("menuListBoxSize1.options[1].selected", "true");
  54 debug("Setting menuListBoxSize1.options[2].selected = true");
  55 menuListBoxSize1.options[2].selected = true;
  56 debug("Setting menuListBoxSize1.options[2].selected = false");
  57 menuListBoxSize1.options[2].selected = false;
  58 shouldBe("menuListBoxSize1.selectedIndex", "1");
  59 shouldBe("menuListBoxSize1.options[1].selected", "true");
  60
  61
  62 var menuListBoxSize3 = document.forms[0].elements.menuListBoxSize3;
  63 debug("\nListBox with size=3 attribute.");
  64 shouldBe("menuListBoxSize3.selectedIndex", "-1");
  65 debug("Setting menuListBoxSize3.options[1].selected = true");
  66 menuListBoxSize3.options[1].selected = true;
  67 debug("Setting menuListBoxSize3.options[1].selected = false");
  68 menuListBoxSize3.options[1].selected = false;
  69 shouldBe("menuListBoxSize3.selectedIndex", "-1");
  70 shouldBe("menuListBoxSize3.options[0].selected", "false");
  71 shouldBe("menuListBoxSize3.options[1].selected", "false");
  72
  73 debug("Setting menuListBoxSize3.selectedIndex = 1");
  74 menuListBoxSize3.selectedIndex = 1;
  75 shouldBe("menuListBoxSize3.selectedIndex", "1");
  76 shouldBe("menuListBoxSize3.options[1].selected", "true");
  77
  78 menuListBoxSize3.selectedIndex = -1;
  79 debug("Setting menuListBoxSize3.selectedIndex = -1");
  80 shouldBe("menuListBoxSize3.selectedIndex", "-1");
  81 shouldBe("menuListBoxSize3.options[0].selected", "false");
  82 shouldBe("menuListBoxSize3.options[1].selected", "false");
  83
  84
  85 var multipleListBox = document.forms[0].elements.multipleListBox;
  86 debug("\nListBox with multiple attribute.");
  87 shouldBe("multipleListBox.selectedIndex", "-1");
  88 debug("Setting multipleListBox.options[1].selected = true");
  89 multipleListBox.options[1].selected = true;
  90 debug("Setting multipleListBox.options[1].selected = false");
  91 multipleListBox.options[1].selected = false;
  92 shouldBe("multipleListBox.selectedIndex", "-1");
  93 shouldBe("multipleListBox.options[0].selected", "false");
  94 shouldBe("multipleListBox.options[1].selected", "false");
  95 debug("Setting multipleListBox.options[1].selected = true");
  96 multipleListBox.options[1].selected = true;
  97 debug("Setting multipleListBox.options[2].selected = true");
  98 multipleListBox.options[2].selected = true;
  99 shouldBe("multipleListBox.options[1].selected", "true");
 100 shouldBe("multipleListBox.options[2].selected", "true");
 101
 102 debug("Unselecting selected first option:");
 103 var multipleListBox2 = document.forms[0].elements.multipleListBox2;
 104 shouldBeTrue("multipleListBox2.options[0].selected");
 105 shouldBeFalse("multipleListBox2.options[0].selected = false; multipleListBox2.options[0].selected");
 106
 107 </script>
 108 </body>
 109 </html>