blob: 8c29134bbcef94cff09f7590e97184455f233a7e [file] [log] [blame]
<!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 &lt;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>