test_select_selectedOptions.html (3327B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=596681 5 --> 6 <head> 7 <title>Test for HTMLSelectElement.selectedOptions</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 </head> 11 <body> 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=596681">Mozilla Bug 596681</a> 13 <p id="display"></p> 14 <pre id="test"> 15 <script type="application/javascript"> 16 17 /** 18 * Test for HTMLSelectElement's selectedOptions attribute. 19 * 20 * selectedOptions is a live list of the options that have selectedness of true 21 * (not the selected content attribute). 22 * 23 * See http://www.whatwg.org/html/#dom-select-selectedoptions 24 */ 25 26 function checkSelectedOptions(size, elements) 27 { 28 is(selectedOptions.length, size, 29 "select should have " + size + " selected options"); 30 for (let i = 0; i < size; ++i) { 31 ok(selectedOptions[i], "selected option is valid"); 32 if (selectedOptions[i]) { 33 is(selectedOptions[i].value, elements[i].value, "selected options are correct"); 34 } 35 } 36 } 37 38 let select = document.createElement("select"); 39 document.body.appendChild(select); 40 let selectedOptions = select.selectedOptions; 41 42 ok("selectedOptions" in select, 43 "select element should have a selectedOptions IDL attribute"); 44 45 ok(select.selectedOptions instanceof HTMLCollection, 46 "selectedOptions should be an HTMLCollection instance"); 47 48 let option1 = document.createElement("option"); 49 let option2 = document.createElement("option"); 50 let option3 = document.createElement("option"); 51 option1.id = "option1"; 52 option1.value = "option1"; 53 option2.value = "option2"; 54 option3.value = "option3"; 55 56 checkSelectedOptions(0, null); 57 58 select.add(option1, null); 59 is(selectedOptions.namedItem("option1").value, "option1", "named getter works"); 60 checkSelectedOptions(1, [option1]); 61 62 select.add(option2, null); 63 checkSelectedOptions(1, [option1]); 64 65 select.options[1].selected = true; 66 checkSelectedOptions(1, [option2]); 67 68 select.multiple = true; 69 checkSelectedOptions(1, [option2]); 70 71 select.options[0].selected = true; 72 checkSelectedOptions(2, [option1, option2]); 73 74 option1.selected = false; 75 // Usinig selected directly on the option should work. 76 checkSelectedOptions(1, [option2]); 77 78 select.remove(1); 79 select.add(option2, 0); 80 select.options[0].selected = true; 81 select.options[1].selected = true; 82 // Should be in tree order. 83 checkSelectedOptions(2, [option2, option1]); 84 85 select.add(option3, null); 86 checkSelectedOptions(2, [option2, option1]); 87 88 select.options[2].selected = true; 89 checkSelectedOptions(3, [option2, option1, option3]); 90 91 select.length = 0; 92 option1.selected = false; 93 option2.selected = false; 94 option3.selected = false; 95 var optgroup1 = document.createElement("optgroup"); 96 optgroup1.appendChild(option1); 97 optgroup1.appendChild(option2); 98 select.add(optgroup1) 99 var optgroup2 = document.createElement("optgroup"); 100 optgroup2.appendChild(option3); 101 select.add(optgroup2); 102 103 checkSelectedOptions(0, null); 104 105 option2.selected = true; 106 checkSelectedOptions(1, [option2]); 107 108 option3.selected = true; 109 checkSelectedOptions(2, [option2, option3]); 110 111 optgroup1.removeChild(option2); 112 checkSelectedOptions(1, [option3]); 113 114 document.body.removeChild(select); 115 option1.selected = true; 116 checkSelectedOptions(2, [option1, option3]); 117 </script> 118 </pre> 119 </body> 120 </html>