select-dialog-mode-focus.optional.html (6617B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <link rel="help" href="http://crbug.com/374908738"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <!-- This test is optional because the HTML spec does not require that specific 10 behaviors are mapped to specific keyboard buttons. --> 11 12 <style> 13 select, select::picker(select) { 14 appearance: base-select; 15 } 16 </style> 17 18 <select id="target"> 19 <div></div> 20 <span></span> 21 <a id="interactive1" href="https://www.example.com/">Elephant</a> 22 <option id="option1">Tiger</option> 23 <option id="option2">Kangaroo</option> 24 <button id="interactive2">Dolphin</button> 25 <option id="option3">Giraffe</option> 26 <button id="interactive3">Panda</button> 27 <hr/> 28 <button id="interactive4">Zebra</button> 29 <button id="interactive5">Koala</button> 30 <option id="option4"> 31 <button id="interactive6">Hippopotamus</button> 32 </option> 33 <option id="option5">Rhinoceros</option> 34 <option id="option6"> 35 <button id="interactive7">Flamingo</button> 36 </option> 37 <option id="option7"> 38 <button id="interactive8">Crocodile</button> 39 </option> 40 <optgroup> 41 <option id="option8">Polar Bear</option> 42 </optgroup> 43 <option id="option9"> 44 <button id="interactive9">Chimpanzee</button> 45 </option> 46 <optgroup> 47 <option id="option10"> 48 <button id="interactive10">Ostrich</button> 49 </option> 50 </optgroup> 51 <optgroup> 52 <option id="option11"> 53 <button id="interactive11">Wolf</button> 54 </option> 55 </optgroup> 56 </select> 57 58 <script> 59 const Space = ' '; 60 const Tab = '\uE004'; 61 const ArrowDown = '\uE015'; 62 63 promise_test(async (t) => { 64 assert_false( 65 target.matches(':open'), 66 'The select should initially be closed.' 67 ); 68 69 target.focus(); 70 assert_equals( 71 document.activeElement, 72 target, 73 'The select should be focused.' 74 ); 75 76 await test_driver.send_keys(document.activeElement, Space); 77 assert_equals( 78 document.activeElement, 79 interactive1, 80 'The anchor should be focused.' 81 ); 82 83 await test_driver.send_keys(document.activeElement, Tab); 84 assert_equals( 85 document.activeElement, 86 option1, 87 'The option should be focused.' 88 ); 89 90 await test_driver.send_keys(document.activeElement, Space); 91 assert_false( 92 target.matches(':open'), 93 'The select should be closed.' 94 ); 95 }, 'In dialog mode the first focusable element should get focus.'); 96 97 promise_test(async (t) => { 98 assert_false( 99 target.matches(':open'), 100 'The select should initially be closed.' 101 ); 102 103 target.focus(); 104 assert_equals( 105 document.activeElement, 106 target, 107 'The select should be focused.' 108 ); 109 110 await test_driver.send_keys(document.activeElement, Space); 111 assert_equals( 112 document.activeElement, 113 interactive1, 114 'The anchor should be focused.' 115 ); 116 117 await test_driver.send_keys(document.activeElement, Tab); 118 assert_equals( 119 document.activeElement, 120 option1, 121 'The option should be focused.' 122 ); 123 124 await test_driver.send_keys(document.activeElement, Tab); 125 assert_equals( 126 document.activeElement, 127 option2, 128 'The option should be focused.' 129 ); 130 131 await test_driver.send_keys(document.activeElement, Tab); 132 assert_equals( 133 document.activeElement, 134 interactive2, 135 'The button should be focused.' 136 ); 137 138 await test_driver.send_keys(document.activeElement, Tab); 139 assert_equals( 140 document.activeElement, 141 option3, 142 'The option should be focused.' 143 ); 144 145 await test_driver.send_keys(document.activeElement, Tab); 146 assert_equals( 147 document.activeElement, 148 interactive3, 149 'The anchor should be focused.' 150 ); 151 152 await test_driver.send_keys(document.activeElement, Tab); 153 assert_equals( 154 document.activeElement, 155 interactive4, 156 'The anchor should be focused.' 157 ); 158 159 await test_driver.send_keys(document.activeElement, Tab); 160 assert_equals( 161 document.activeElement, 162 interactive5, 163 'The button should be focused.' 164 ); 165 166 await test_driver.send_keys(document.activeElement, Tab); 167 assert_equals( 168 document.activeElement, 169 option4, 170 'The option should be focused.' 171 ); 172 173 await test_driver.send_keys(document.activeElement, Tab); 174 assert_equals( 175 document.activeElement, 176 interactive6, 177 'The button should be focused.' 178 ); 179 180 await test_driver.send_keys(document.activeElement, ArrowDown); 181 assert_equals( 182 document.activeElement, 183 option5, 184 'The option should be focused.' 185 ); 186 187 await test_driver.send_keys(document.activeElement, Tab); 188 assert_equals( 189 document.activeElement, 190 option6, 191 'The option should be focused.' 192 ); 193 194 await test_driver.send_keys(document.activeElement, Tab); 195 assert_equals( 196 document.activeElement, 197 interactive7, 198 'The button should be focused.' 199 ); 200 201 await test_driver.send_keys(document.activeElement, ArrowDown); 202 assert_equals( 203 document.activeElement, 204 option7, 205 'The option should be focused.' 206 ); 207 208 await test_driver.send_keys(document.activeElement, Tab); 209 assert_equals( 210 document.activeElement, 211 interactive8, 212 'The button should be focused.' 213 ); 214 215 await test_driver.send_keys(document.activeElement, ArrowDown); 216 assert_equals( 217 document.activeElement, 218 option8, 219 'The option should be focused.' 220 ); 221 222 await test_driver.send_keys(document.activeElement, ArrowDown); 223 assert_equals( 224 document.activeElement, 225 option9, 226 'The option should be focused.' 227 ); 228 229 await test_driver.send_keys(document.activeElement, Tab); 230 assert_equals( 231 document.activeElement, 232 interactive9, 233 'The button should be focused.' 234 ); 235 236 await test_driver.send_keys(document.activeElement, ArrowDown); 237 assert_equals( 238 document.activeElement, 239 option10, 240 'The option should be focused.' 241 ); 242 243 await test_driver.send_keys(document.activeElement, Tab); 244 assert_equals( 245 document.activeElement, 246 interactive10, 247 'The button should be focused.' 248 ); 249 250 await test_driver.send_keys(document.activeElement, ArrowDown); 251 assert_equals( 252 document.activeElement, 253 option11, 254 'The option should be focused.' 255 ); 256 257 await test_driver.send_keys(document.activeElement, Tab); 258 assert_equals( 259 document.activeElement, 260 interactive11, 261 'The button should be focused.' 262 ); 263 264 option11.focus(); 265 await test_driver.send_keys(document.activeElement, Space); 266 assert_false( 267 target.matches(':open'), 268 'The select should be closed.' 269 ); 270 }, 'In dialog mode tab should not close the picker.'); 271 272 </script>