| OLD | NEW |
| 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <script src="../../../resources/js-test.js"></script> | 4 <script src="../../../resources/js-test.js"></script> |
| 5 </head> | 5 </head> |
| 6 <body> | 6 <body> |
| 7 <p id="description">Test for keyboard operations of <input type=range></p> | 7 <p id="description">Test for keyboard operations of <input type=range></p> |
| 8 <div id="console"></div> | 8 <div id="console"></div> |
| 9 <script> | 9 <script> |
| 10 | 10 |
| (...skipping 10 matching lines...) Expand all Loading... |
| 21 document.body.appendChild(parent); | 21 document.body.appendChild(parent); |
| 22 parent.innerHTML = '<input type=range id=range min=0 max=100 value=50>'; | 22 parent.innerHTML = '<input type=range id=range min=0 max=100 value=50>'; |
| 23 | 23 |
| 24 var input = document.getElementById('range'); | 24 var input = document.getElementById('range'); |
| 25 input.onchange = handleChange; | 25 input.onchange = handleChange; |
| 26 input.focus(); | 26 input.focus(); |
| 27 | 27 |
| 28 debug('Tests for a horizontal range'); | 28 debug('Tests for a horizontal range'); |
| 29 debug('Press the up arrow key:'); | 29 debug('Press the up arrow key:'); |
| 30 var lastChangeEventCounter = changeEventCounter; | 30 var lastChangeEventCounter = changeEventCounter; |
| 31 sendKey(input, 'upArrow'); | 31 sendKey(input, 'ArrowUp'); |
| 32 shouldBe('input.value', '"51"'); | 32 shouldBe('input.value', '"51"'); |
| 33 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 33 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 34 | 34 |
| 35 debug('Press the down arrow key:'); | 35 debug('Press the down arrow key:'); |
| 36 sendKey(input, 'downArrow'); | 36 sendKey(input, 'ArrowDown'); |
| 37 shouldBe('input.value', '"50"'); | 37 shouldBe('input.value', '"50"'); |
| 38 | 38 |
| 39 debug('Press the left arrow key:'); | 39 debug('Press the left arrow key:'); |
| 40 sendKey(input, 'leftArrow'); | 40 sendKey(input, 'ArrowLeft'); |
| 41 shouldBe('input.value', '"49"'); | 41 shouldBe('input.value', '"49"'); |
| 42 | 42 |
| 43 debug('Press the right arrow key:'); | 43 debug('Press the right arrow key:'); |
| 44 sendKey(input, 'rightArrow'); | 44 sendKey(input, 'ArrowRight'); |
| 45 shouldBe('input.value', '"50"'); | 45 shouldBe('input.value', '"50"'); |
| 46 | 46 |
| 47 debug('Press the PageUp key:'); | 47 debug('Press the PageUp key:'); |
| 48 sendKey(input, 'pageUp'); | 48 sendKey(input, 'PageUp'); |
| 49 shouldBe('input.value', '"60"'); | 49 shouldBe('input.value', '"60"'); |
| 50 | 50 |
| 51 debug('Press the PageDown key:'); | 51 debug('Press the PageDown key:'); |
| 52 sendKey(input, 'pageDown'); | 52 sendKey(input, 'PageDown'); |
| 53 shouldBe('input.value', '"50"'); | 53 shouldBe('input.value', '"50"'); |
| 54 | 54 |
| 55 debug('Press the Home key:'); | 55 debug('Press the Home key:'); |
| 56 sendKey(input, 'home'); | 56 sendKey(input, 'Home'); |
| 57 shouldBe('input.value', '"0"'); | 57 shouldBe('input.value', '"0"'); |
| 58 | 58 |
| 59 debug('Press the End key:'); | 59 debug('Press the End key:'); |
| 60 sendKey(input, 'end'); | 60 sendKey(input, 'End'); |
| 61 shouldBe('input.value', '"100"'); | 61 shouldBe('input.value', '"100"'); |
| 62 | 62 |
| 63 debug('Edge cases'); | 63 debug('Edge cases'); |
| 64 input.valueAsNumber = 0; | 64 input.valueAsNumber = 0; |
| 65 lastChangeEventCounter = changeEventCounter; | 65 lastChangeEventCounter = changeEventCounter; |
| 66 sendKey(input, 'leftArrow'); | 66 sendKey(input, 'ArrowLeft'); |
| 67 shouldBe('input.value', '"0"'); | 67 shouldBe('input.value', '"0"'); |
| 68 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 68 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 69 sendKey(input, 'rightArrow'); | 69 sendKey(input, 'ArrowRight'); |
| 70 shouldBe('input.value', '"1"'); | 70 shouldBe('input.value', '"1"'); |
| 71 input.valueAsNumber = 100; | 71 input.valueAsNumber = 100; |
| 72 sendKey(input, 'rightArrow'); | 72 sendKey(input, 'ArrowRight'); |
| 73 shouldBe('input.value', '"100"'); | 73 shouldBe('input.value', '"100"'); |
| 74 sendKey(input, 'leftArrow'); | 74 sendKey(input, 'ArrowLeft'); |
| 75 shouldBe('input.value', '"99"'); | 75 shouldBe('input.value', '"99"'); |
| 76 | 76 |
| 77 input.valueAsNumber = 0; | 77 input.valueAsNumber = 0; |
| 78 lastChangeEventCounter = changeEventCounter; | 78 lastChangeEventCounter = changeEventCounter; |
| 79 sendKey(input, 'pageDown'); | 79 sendKey(input, 'PageDown'); |
| 80 shouldBe('input.value', '"0"'); | 80 shouldBe('input.value', '"0"'); |
| 81 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 81 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 82 sendKey(input, 'home'); | 82 sendKey(input, 'Home'); |
| 83 shouldBe('input.value', '"0"'); | 83 shouldBe('input.value', '"0"'); |
| 84 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 84 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 85 | 85 |
| 86 input.valueAsNumber = 100; | 86 input.valueAsNumber = 100; |
| 87 lastChangeEventCounter = changeEventCounter; | 87 lastChangeEventCounter = changeEventCounter; |
| 88 sendKey(input, 'pageUp'); | 88 sendKey(input, 'PageUp'); |
| 89 shouldBe('input.value', '"100"'); | 89 shouldBe('input.value', '"100"'); |
| 90 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 90 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 91 sendKey(input, 'end'); | 91 sendKey(input, 'End'); |
| 92 shouldBe('input.value', '"100"'); | 92 shouldBe('input.value', '"100"'); |
| 93 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 93 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 94 | 94 |
| 95 input.dir = 'rtl'; | 95 input.dir = 'rtl'; |
| 96 input.value = '50'; | 96 input.value = '50'; |
| 97 input.offsetLeft; | 97 input.offsetLeft; |
| 98 debug(''); | 98 debug(''); |
| 99 debug('RTL'); | 99 debug('RTL'); |
| 100 sendKey(input, 'leftArrow'); | 100 sendKey(input, 'ArrowLeft'); |
| 101 shouldBeEqualToString('input.value', '51'); | 101 shouldBeEqualToString('input.value', '51'); |
| 102 sendKey(input, 'rightArrow'); | 102 sendKey(input, 'ArrowRight'); |
| 103 shouldBeEqualToString('input.value', '50'); | 103 shouldBeEqualToString('input.value', '50'); |
| 104 input.dir = 'ltr'; | 104 input.dir = 'ltr'; |
| 105 | 105 |
| 106 debug(''); | 106 debug(''); |
| 107 input.setAttribute('style', '-webkit-appearance:slider-vertical; height: 40px;')
; | 107 input.setAttribute('style', '-webkit-appearance:slider-vertical; height: 40px;')
; |
| 108 input.offsetLeft; // force layout | 108 input.offsetLeft; // force layout |
| 109 | 109 |
| 110 input.valueAsNumber = 50; | 110 input.valueAsNumber = 50; |
| 111 debug('Tests for a vertical range'); | 111 debug('Tests for a vertical range'); |
| 112 debug('Press the up arrow key:'); | 112 debug('Press the up arrow key:'); |
| 113 sendKey(input, 'upArrow'); | 113 sendKey(input, 'ArrowUp'); |
| 114 shouldBe('input.value', '"51"'); | 114 shouldBe('input.value', '"51"'); |
| 115 | 115 |
| 116 debug('Press the down arrow key:'); | 116 debug('Press the down arrow key:'); |
| 117 sendKey(input, 'downArrow'); | 117 sendKey(input, 'ArrowDown'); |
| 118 shouldBe('input.value', '"50"'); | 118 shouldBe('input.value', '"50"'); |
| 119 | 119 |
| 120 debug('Press the left arrow key:'); | 120 debug('Press the left arrow key:'); |
| 121 sendKey(input, 'leftArrow'); | 121 sendKey(input, 'ArrowLeft'); |
| 122 shouldBe('input.value', '"51"'); | 122 shouldBe('input.value', '"51"'); |
| 123 | 123 |
| 124 debug('Press the right arrow key:'); | 124 debug('Press the right arrow key:'); |
| 125 sendKey(input, 'rightArrow'); | 125 sendKey(input, 'ArrowRight'); |
| 126 shouldBe('input.value', '"50"'); | 126 shouldBe('input.value', '"50"'); |
| 127 | 127 |
| 128 debug('Press the PageUp key:'); | 128 debug('Press the PageUp key:'); |
| 129 sendKey(input, 'pageUp'); | 129 sendKey(input, 'PageUp'); |
| 130 shouldBe('input.value', '"60"'); | 130 shouldBe('input.value', '"60"'); |
| 131 | 131 |
| 132 debug('Press the PageDown key:'); | 132 debug('Press the PageDown key:'); |
| 133 sendKey(input, 'pageDown'); | 133 sendKey(input, 'PageDown'); |
| 134 shouldBe('input.value', '"50"'); | 134 shouldBe('input.value', '"50"'); |
| 135 | 135 |
| 136 debug('Press the Home key:'); | 136 debug('Press the Home key:'); |
| 137 sendKey(input, 'home'); | 137 sendKey(input, 'Home'); |
| 138 shouldBe('input.value', '"100"'); | 138 shouldBe('input.value', '"100"'); |
| 139 | 139 |
| 140 debug('Press the End key:'); | 140 debug('Press the End key:'); |
| 141 sendKey(input, 'end'); | 141 sendKey(input, 'End'); |
| 142 shouldBe('input.value', '"0"'); | 142 shouldBe('input.value', '"0"'); |
| 143 | 143 |
| 144 debug(''); | 144 debug(''); |
| 145 debug('step=any cases'); | 145 debug('step=any cases'); |
| 146 input.step = 'any'; | 146 input.step = 'any'; |
| 147 input.min = '0'; | 147 input.min = '0'; |
| 148 input.max = '200'; | 148 input.max = '200'; |
| 149 input.valueAsNumber = 100; | 149 input.valueAsNumber = 100; |
| 150 | 150 |
| 151 debug('Press the up arrow key:'); | 151 debug('Press the up arrow key:'); |
| 152 lastChangeEventCounter = changeEventCounter; | 152 lastChangeEventCounter = changeEventCounter; |
| 153 sendKey(input, 'upArrow'); | 153 sendKey(input, 'ArrowUp'); |
| 154 shouldBe('input.value', '"102"'); | 154 shouldBe('input.value', '"102"'); |
| 155 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 155 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 156 | 156 |
| 157 debug('Press the down arrow key:'); | 157 debug('Press the down arrow key:'); |
| 158 lastChangeEventCounter = changeEventCounter; | 158 lastChangeEventCounter = changeEventCounter; |
| 159 sendKey(input, 'downArrow'); | 159 sendKey(input, 'ArrowDown'); |
| 160 shouldBe('input.value', '"100"'); | 160 shouldBe('input.value', '"100"'); |
| 161 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 161 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 162 | 162 |
| 163 debug('Press the pageup key:'); | 163 debug('Press the pageup key:'); |
| 164 lastChangeEventCounter = changeEventCounter; | 164 lastChangeEventCounter = changeEventCounter; |
| 165 sendKey(input, 'pageUp'); | 165 sendKey(input, 'PageUp'); |
| 166 shouldBe('input.value', '"120"'); | 166 shouldBe('input.value', '"120"'); |
| 167 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 167 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 168 | 168 |
| 169 debug('Press the pagedown key:'); | 169 debug('Press the pagedown key:'); |
| 170 lastChangeEventCounter = changeEventCounter; | 170 lastChangeEventCounter = changeEventCounter; |
| 171 sendKey(input, 'pageDown'); | 171 sendKey(input, 'PageDown'); |
| 172 shouldBe('input.value', '"100"'); | 172 shouldBe('input.value', '"100"'); |
| 173 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 173 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 174 | 174 |
| 175 debug('Press the home key:'); | 175 debug('Press the home key:'); |
| 176 lastChangeEventCounter = changeEventCounter; | 176 lastChangeEventCounter = changeEventCounter; |
| 177 sendKey(input, 'home'); | 177 sendKey(input, 'Home'); |
| 178 shouldBe('input.value', '"200"'); | 178 shouldBe('input.value', '"200"'); |
| 179 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 179 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 180 | 180 |
| 181 debug('Press the end key:'); | 181 debug('Press the end key:'); |
| 182 lastChangeEventCounter = changeEventCounter; | 182 lastChangeEventCounter = changeEventCounter; |
| 183 sendKey(input, 'end'); | 183 sendKey(input, 'End'); |
| 184 shouldBe('input.value', '"0"'); | 184 shouldBe('input.value', '"0"'); |
| 185 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); | 185 shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| 186 | 186 |
| 187 debug('Edge cases'); | 187 debug('Edge cases'); |
| 188 input.valueAsNumber = 199; | 188 input.valueAsNumber = 199; |
| 189 sendKey(input, 'upArrow'); | 189 sendKey(input, 'ArrowUp'); |
| 190 shouldBe('input.value', '"200"'); | 190 shouldBe('input.value', '"200"'); |
| 191 lastChangeEventCounter = changeEventCounter; | 191 lastChangeEventCounter = changeEventCounter; |
| 192 sendKey(input, 'upArrow'); | 192 sendKey(input, 'ArrowUp'); |
| 193 shouldBe('input.value', '"200"'); | 193 shouldBe('input.value', '"200"'); |
| 194 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 194 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 195 sendKey(input, 'downArrow'); | 195 sendKey(input, 'ArrowDown'); |
| 196 shouldBe('input.value', '"198"'); | 196 shouldBe('input.value', '"198"'); |
| 197 | 197 |
| 198 input.valueAsNumber = 199; | 198 input.valueAsNumber = 199; |
| 199 sendKey(input, 'pageUp'); | 199 sendKey(input, 'PageUp'); |
| 200 shouldBe('input.value', '"200"'); | 200 shouldBe('input.value', '"200"'); |
| 201 lastChangeEventCounter = changeEventCounter; | 201 lastChangeEventCounter = changeEventCounter; |
| 202 sendKey(input, 'pageUp'); | 202 sendKey(input, 'PageUp'); |
| 203 shouldBe('input.value', '"200"'); | 203 shouldBe('input.value', '"200"'); |
| 204 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 204 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 205 sendKey(input, 'pageDown'); | 205 sendKey(input, 'PageDown'); |
| 206 shouldBe('input.value', '"180"'); | 206 shouldBe('input.value', '"180"'); |
| 207 | 207 |
| 208 input.valueAsNumber = 1; | 208 input.valueAsNumber = 1; |
| 209 sendKey(input, 'downArrow'); | 209 sendKey(input, 'ArrowDown'); |
| 210 shouldBe('input.value', '"0"'); | 210 shouldBe('input.value', '"0"'); |
| 211 lastChangeEventCounter = changeEventCounter; | 211 lastChangeEventCounter = changeEventCounter; |
| 212 sendKey(input, 'downArrow'); | 212 sendKey(input, 'ArrowDown'); |
| 213 shouldBe('input.value', '"0"'); | 213 shouldBe('input.value', '"0"'); |
| 214 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 214 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 215 sendKey(input, 'upArrow'); | 215 sendKey(input, 'ArrowUp'); |
| 216 shouldBe('input.value', '"2"'); | 216 shouldBe('input.value', '"2"'); |
| 217 | 217 |
| 218 input.valueAsNumber = 1; | 218 input.valueAsNumber = 1; |
| 219 sendKey(input, 'pageDown'); | 219 sendKey(input, 'PageDown'); |
| 220 shouldBe('input.value', '"0"'); | 220 shouldBe('input.value', '"0"'); |
| 221 lastChangeEventCounter = changeEventCounter; | 221 lastChangeEventCounter = changeEventCounter; |
| 222 sendKey(input, 'pageDown'); | 222 sendKey(input, 'PageDown'); |
| 223 shouldBe('input.value', '"0"'); | 223 shouldBe('input.value', '"0"'); |
| 224 shouldBe('changeEventCounter', 'lastChangeEventCounter'); | 224 shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| 225 sendKey(input, 'pageUp'); | 225 sendKey(input, 'PageUp'); |
| 226 shouldBe('input.value', '"20"'); | 226 shouldBe('input.value', '"20"'); |
| 227 | 227 |
| 228 debug(''); | 228 debug(''); |
| 229 debug('small range'); | 229 debug('small range'); |
| 230 input.min = '0'; | 230 input.min = '0'; |
| 231 input.max = '10'; | 231 input.max = '10'; |
| 232 input.step = '3'; | 232 input.step = '3'; |
| 233 input.valueAsNumber = 6; | 233 input.valueAsNumber = 6; |
| 234 | 234 |
| 235 sendKey(input, 'pageUp'); | 235 sendKey(input, 'PageUp'); |
| 236 shouldBe('input.value', '"9"'); | 236 shouldBe('input.value', '"9"'); |
| 237 | 237 |
| 238 sendKey(input, 'pageDown'); | 238 sendKey(input, 'PageDown'); |
| 239 shouldBe('input.value', '"6"'); | 239 shouldBe('input.value', '"6"'); |
| 240 | 240 |
| 241 sendKey(input, 'end'); | 241 sendKey(input, 'End'); |
| 242 shouldBe('input.value', '"0"'); | 242 shouldBe('input.value', '"0"'); |
| 243 | 243 |
| 244 sendKey(input, 'home'); | 244 sendKey(input, 'Home'); |
| 245 shouldBe('input.value', '"9"'); | 245 shouldBe('input.value', '"9"'); |
| 246 | 246 |
| 247 sendKey(input, 'end'); | 247 sendKey(input, 'End'); |
| 248 shouldBe('input.value', '"0"'); | 248 shouldBe('input.value', '"0"'); |
| 249 | 249 |
| 250 | 250 |
| 251 debug(''); | 251 debug(''); |
| 252 debug('Disabled and read-only'); | 252 debug('Disabled and read-only'); |
| 253 input.min = '0'; | 253 input.min = '0'; |
| 254 input.max = '100'; | 254 input.max = '100'; |
| 255 input.step = '1'; | 255 input.step = '1'; |
| 256 input.value = '1'; | 256 input.value = '1'; |
| 257 | 257 |
| 258 input.disabled = true; | 258 input.disabled = true; |
| 259 sendKey(input, 'upArrow'); | 259 sendKey(input, 'ArrowUp'); |
| 260 shouldBe('input.value', '"1"'); | 260 shouldBe('input.value', '"1"'); |
| 261 sendKey(input, 'home'); | 261 sendKey(input, 'Home'); |
| 262 shouldBe('input.value', '"1"'); | 262 shouldBe('input.value', '"1"'); |
| 263 sendKey(input, 'pageUp'); | 263 sendKey(input, 'PageUp'); |
| 264 shouldBe('input.value', '"1"'); | 264 shouldBe('input.value', '"1"'); |
| 265 input.removeAttribute('disabled'); | 265 input.removeAttribute('disabled'); |
| 266 | 266 |
| 267 input.readOnly = true; | 267 input.readOnly = true; |
| 268 sendKey(input, 'upArrow'); | 268 sendKey(input, 'ArrowUp'); |
| 269 shouldBe('input.value', '"1"'); | 269 shouldBe('input.value', '"1"'); |
| 270 sendKey(input, 'home'); | 270 sendKey(input, 'Home'); |
| 271 shouldBe('input.value', '"1"'); | 271 shouldBe('input.value', '"1"'); |
| 272 sendKey(input, 'pageUp'); | 272 sendKey(input, 'PageUp'); |
| 273 shouldBe('input.value', '"1"'); | 273 shouldBe('input.value', '"1"'); |
| 274 input.readOnly = false; | 274 input.readOnly = false; |
| 275 | 275 |
| 276 debug(''); | 276 debug(''); |
| 277 </script> | 277 </script> |
| 278 </body> | 278 </body> |
| 279 </html> | 279 </html> |
| OLD | NEW |