test_select.html (5082B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML select options test</title> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 <script type="application/javascript" 15 src="../events.js"></script> 16 17 <script type="application/javascript"> 18 19 function addOptions(aID) { 20 this.selectNode = getNode(aID); 21 this.select = getAccessible(this.selectNode); 22 this.selectList = this.select.firstChild; 23 24 this.invoke = function addOptions_invoke() { 25 for (let i = 0; i < 2; i++) { 26 var opt = document.createElement("option"); 27 opt.value = i; 28 opt.text = "Option: Value " + i; 29 30 this.selectNode.add(opt, null); 31 } 32 }; 33 34 this.eventSeq = [ 35 new invokerChecker(EVENT_REORDER, this.selectList), 36 ]; 37 38 this.finalCheck = function addOptions_finalCheck() { 39 var tree = 40 { COMBOBOX: [ 41 { COMBOBOX_LIST: [ 42 { COMBOBOX_OPTION: [ ] }, 43 { COMBOBOX_OPTION: [ ] }, 44 ] }, 45 ] }; 46 testAccessibleTree(this.select, tree); 47 }; 48 49 this.getID = function addOptions_getID() { 50 return "test elements insertion into a select"; 51 }; 52 } 53 54 function removeOptions(aID) { 55 this.selectNode = getNode(aID); 56 this.select = getAccessible(this.selectNode); 57 this.selectList = this.select.firstChild; 58 59 this.invoke = function removeOptions_invoke() { 60 while (this.selectNode.length) 61 this.selectNode.remove(0); 62 }; 63 64 this.eventSeq = [ 65 new invokerChecker(EVENT_REORDER, this.selectList), 66 ]; 67 68 this.finalCheck = function removeOptions_finalCheck() { 69 var tree = 70 { COMBOBOX: [ 71 { COMBOBOX_LIST: [] }, 72 ] }; 73 testAccessibleTree(this.select, tree); 74 }; 75 76 this.getID = function removeptions_getID() { 77 return "test elements removal from a select"; 78 }; 79 } 80 81 /** 82 * Setting role=option on option makes the accessible recreate. 83 */ 84 function setRoleOnOption() { 85 this.eventSeq = [ 86 new invokerChecker(EVENT_HIDE, "s2_o"), 87 new invokerChecker(EVENT_SHOW, "s2_o"), 88 ]; 89 90 this.invoke = function setRoleOnOption_setRole() { 91 getNode("s2_o").setAttribute("role", "option"); 92 }; 93 94 this.finalCheck = function() { 95 var tree = 96 { COMBOBOX: [ 97 { COMBOBOX_LIST: [ 98 { COMBOBOX_OPTION: [ ] }, 99 ] }, 100 ] }; 101 testAccessibleTree("s2", tree); 102 }; 103 104 this.getID = function removeptions_getID() { 105 return "setting role=option on select option"; 106 }; 107 } 108 109 /** 110 * Setting multiple on select makes the accessible recreate. 111 */ 112 function setMultipleOnSelect() { 113 this.eventSeq = [ 114 new invokerChecker(EVENT_HIDE, "s3"), 115 new invokerChecker(EVENT_SHOW, "s3"), 116 ]; 117 118 this.invoke = function setRoleOnOption_setRole() { 119 getNode("s3").multiple = true; 120 }; 121 122 this.finalCheck = function() { 123 var tree = 124 { LISTBOX: [ 125 { OPTION: [ ] }, 126 ] }; 127 testAccessibleTree("s3", tree); 128 }; 129 130 this.getID = function removeptions_getID() { 131 return "setting multiple on select element"; 132 }; 133 } 134 135 136 /** 137 * Removing size on select makes the accessible recreate. 138 */ 139 function removeSizeFromSelect() { 140 this.eventSeq = [ 141 new invokerChecker(EVENT_HIDE, "s4"), 142 new invokerChecker(EVENT_SHOW, "s4"), 143 ]; 144 145 this.invoke = function setRoleOnOption_setRole() { 146 getNode("s4").removeAttribute("size"); 147 }; 148 149 this.finalCheck = function() { 150 var tree = 151 { COMBOBOX: [ 152 { COMBOBOX_LIST: [ 153 { COMBOBOX_OPTION: [ ] }, 154 ] }, 155 ] }; 156 testAccessibleTree("s4", tree); 157 }; 158 159 this.getID = function removeptions_getID() { 160 return "removing size from select element"; 161 }; 162 } 163 164 function doTest() { 165 const gQueue = new eventQueue(); 166 167 gQueue.push(new addOptions("select")); 168 gQueue.push(new removeOptions("select")); 169 gQueue.push(new setRoleOnOption()); 170 gQueue.push(new setMultipleOnSelect()); 171 gQueue.push(new removeSizeFromSelect()); 172 173 gQueue.invoke(); // Will call SimpleTest.finish(); 174 } 175 176 SimpleTest.waitForExplicitFinish(); 177 addA11yLoadEvent(doTest); 178 </script> 179 </head> 180 <body> 181 <p id="display"></p> 182 <div id="content" style="display: none"></div> 183 <pre id="test"> 184 </pre> 185 186 <select id="select"></select> 187 <select id="s2"><option id="s2_o"></option></select> 188 <select id="s3"><option></option></select> 189 <select id="s4" size="3"><option></option></select> 190 </body> 191 </html>