| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <p id="description">Test for keyboard operations of <input type=range></p> |
| <div id="console"></div> |
| <script> |
| |
| function sendKey(element, keyName) { |
| var event = document.createEvent('KeyboardEvent'); |
| event.initKeyboardEvent('keydown', true, true, document.defaultView, keyName); |
| element.dispatchEvent(event); |
| } |
| |
| var changeEventCounter = 0; |
| function handleChange() { |
| changeEventCounter++; |
| } |
| |
| var parent = document.createElement('div'); |
| document.body.appendChild(parent); |
| parent.innerHTML = '<input type=range id=range min=0 max=100 value=50>'; |
| |
| var input = document.getElementById('range'); |
| input.onchange = handleChange; |
| input.focus(); |
| |
| debug('Tests for a horizontal range'); |
| debug('Press the up arrow key:'); |
| var lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"51"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Press the down arrow key:'); |
| sendKey(input, 'Down'); |
| shouldBe('input.value', '"50"'); |
| |
| debug('Press the left arrow key:'); |
| sendKey(input, 'Left'); |
| shouldBe('input.value', '"49"'); |
| |
| debug('Press the right arrow key:'); |
| sendKey(input, 'Right'); |
| shouldBe('input.value', '"50"'); |
| |
| debug('Press the PageUp key:'); |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"60"'); |
| |
| debug('Press the PageDown key:'); |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"50"'); |
| |
| debug('Press the Home key:'); |
| sendKey(input, 'Home'); |
| shouldBe('input.value', '"0"'); |
| |
| debug('Press the End key:'); |
| sendKey(input, 'End'); |
| shouldBe('input.value', '"100"'); |
| |
| debug('Edge cases'); |
| input.valueAsNumber = 0; |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Left'); |
| shouldBe('input.value', '"0"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'Right'); |
| shouldBe('input.value', '"1"'); |
| input.valueAsNumber = 100; |
| sendKey(input, 'Right'); |
| shouldBe('input.value', '"100"'); |
| sendKey(input, 'Left'); |
| shouldBe('input.value', '"99"'); |
| |
| input.valueAsNumber = 0; |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"0"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'Home'); |
| shouldBe('input.value', '"0"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| |
| input.valueAsNumber = 100; |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"100"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'End'); |
| shouldBe('input.value', '"100"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| |
| debug(''); |
| input.setAttribute('style', '-webkit-appearance:slider-vertical; height: 40px;'); |
| input.offsetLeft; // force layout |
| |
| input.valueAsNumber = 50; |
| debug('Tests for a vertical range'); |
| debug('Press the up arrow key:'); |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"51"'); |
| |
| debug('Press the down arrow key:'); |
| sendKey(input, 'Down'); |
| shouldBe('input.value', '"50"'); |
| |
| debug('Press the left arrow key:'); |
| sendKey(input, 'Left'); |
| shouldBe('input.value', '"51"'); |
| |
| debug('Press the right arrow key:'); |
| sendKey(input, 'Right'); |
| shouldBe('input.value', '"50"'); |
| |
| debug('Press the PageUp key:'); |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"60"'); |
| |
| debug('Press the PageDown key:'); |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"50"'); |
| |
| debug('Press the Home key:'); |
| sendKey(input, 'Home'); |
| shouldBe('input.value', '"100"'); |
| |
| debug('Press the End key:'); |
| sendKey(input, 'End'); |
| shouldBe('input.value', '"0"'); |
| |
| debug(''); |
| debug('step=any cases'); |
| input.step = 'any'; |
| input.min = '0'; |
| input.max = '200'; |
| input.valueAsNumber = 100; |
| |
| debug('Press the up arrow key:'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"102"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Press the down arrow key:'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Down'); |
| shouldBe('input.value', '"100"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Press the pageup key:'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"120"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Press the pagedown key:'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"100"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Press the home key:'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Home'); |
| shouldBe('input.value', '"200"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Press the end key:'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'End'); |
| shouldBe('input.value', '"0"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter + 1'); |
| |
| debug('Edge cases'); |
| input.valueAsNumber = 199; |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"200"'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"200"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'Down'); |
| shouldBe('input.value', '"198"'); |
| |
| input.valueAsNumber = 199; |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"200"'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"200"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"180"'); |
| |
| input.valueAsNumber = 1; |
| sendKey(input, 'Down'); |
| shouldBe('input.value', '"0"'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'Down'); |
| shouldBe('input.value', '"0"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"2"'); |
| |
| input.valueAsNumber = 1; |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"0"'); |
| lastChangeEventCounter = changeEventCounter; |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"0"'); |
| shouldBe('changeEventCounter', 'lastChangeEventCounter'); |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"20"'); |
| |
| debug(''); |
| debug('small range'); |
| input.min = '0'; |
| input.max = '10'; |
| input.step = '3'; |
| input.valueAsNumber = 6; |
| |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"9"'); |
| |
| sendKey(input, 'PageDown'); |
| shouldBe('input.value', '"6"'); |
| |
| sendKey(input, 'End'); |
| shouldBe('input.value', '"0"'); |
| |
| sendKey(input, 'Home'); |
| shouldBe('input.value', '"9"'); |
| |
| sendKey(input, 'End'); |
| shouldBe('input.value', '"0"'); |
| |
| |
| debug(''); |
| debug('Disabled and read-only'); |
| input.min = '0'; |
| input.max = '100'; |
| input.step = '1'; |
| input.value = '1'; |
| |
| input.disabled = true; |
| sendKey(input, 'Up'); |
| shouldBe('input.value', '"1"'); |
| sendKey(input, 'Home'); |
| shouldBe('input.value', '"1"'); |
| sendKey(input, 'PageUp'); |
| shouldBe('input.value', '"1"'); |
| input.removeAttribute('disabled'); |
| |
| input.readOnly = true; |
| sendKey(input, 'Up'); |
| shouldBeEqualToString('input.value', '2'); |
| sendKey(input, 'Home'); |
| shouldBeEqualToString('input.value', '100'); |
| sendKey(input, 'PageUp'); |
| shouldBeEqualToString('input.value', '100'); |
| input.readOnly = false; |
| |
| debug(''); |
| </script> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
