<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<p id="description">Test for keyboard operations of &lt;input type=range></p>
<div id="console"></div>

<input type=range id=horiz-range min=0 max=100 value=50 onchange='handleChange()'>
<input type=range id=horiz-range-rtl dir=rtl min=0 max=100 value=50 onchange='handleChange()'>
<input type=range id=vert-range min=0 max=100 value=50 onchange='handleChange()' style='-webkit-appearance:slider-vertical;'>
<input type=range id=vert-range-rtl dir=rtl min=0 max=100 value=50 onchange='handleChange()' style='-webkit-appearance:slider-vertical;'>
<input type=range id=step-any min=0 max=200 value=100 step='any' onchange='handleChange()' style='-webkit-appearance:slider-vertical;'>
<input type=range id=small-range min=0 max=10 value=6 step=3 onchange='handleChange()' style='-webkit-appearance:slider-vertical;'>
<input type=range id=disabled disabled min=0 max=100 value=1 step=1 onchange='handleChange()' style='-webkit-appearance:slider-vertical;'>

<script>

function sendKey(element, keyName) {
    eventSender.keyDown(keyName);
}

var changeEventCounter = 0;
function handleChange() {
  changeEventCounter++;
}

debug('Tests for a horizontal range');
var input = document.getElementById('horiz-range');
input.focus();

debug('Press the up arrow key:');
var lastChangeEventCounter = changeEventCounter;
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"51"');
shouldBe('changeEventCounter', 'lastChangeEventCounter + 1');

debug('Press the down arrow key:');
sendKey(input, 'ArrowDown');
shouldBe('input.value', '"50"');

debug('Press the left arrow key:');
sendKey(input, 'ArrowLeft');
shouldBe('input.value', '"49"');

debug('Press the right arrow key:');
sendKey(input, 'ArrowRight');
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, 'ArrowLeft');
shouldBe('input.value', '"0"');
shouldBe('changeEventCounter', 'lastChangeEventCounter');
sendKey(input, 'ArrowRight');
shouldBe('input.value', '"1"');
input.valueAsNumber = 100;
sendKey(input, 'ArrowRight');
shouldBe('input.value', '"100"');
sendKey(input, 'ArrowLeft');
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('');
debug('Tests for a horizontal range with RTL');
var input = document.getElementById('horiz-range-rtl');
input.focus();

debug('Press the up arrow key:');
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"51"');

debug('Press the down arrow key:');
sendKey(input, 'ArrowDown');
shouldBe('input.value', '"50"');

debug('Press the left arrow key:');
sendKey(input, 'ArrowLeft');
shouldBe('input.value', '"51"');

debug('Press the right arrow key:');
sendKey(input, 'ArrowRight');
shouldBe('input.value', '"50"');


debug('');
debug('Tests for a vertical range');
var input = document.getElementById('vert-range');
input.focus();

debug('Press the up arrow key:');
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"51"');

debug('Press the down arrow key:');
sendKey(input, 'ArrowDown');
shouldBe('input.value', '"50"');

debug('Press the left arrow key:');
sendKey(input, 'ArrowLeft');
shouldBe('input.value', '"49"');

debug('Press the right arrow key:');
sendKey(input, 'ArrowRight');
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('');
debug('Tests for a vertical range with rtl');
var input = document.getElementById('vert-range-rtl');
input.focus();

debug('Press the up arrow key:');
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"51"');

debug('Press the down arrow key:');
sendKey(input, 'ArrowDown');
shouldBe('input.value', '"50"');

debug('Press the left arrow key:');
sendKey(input, 'ArrowLeft');
shouldBe('input.value', '"51"');

debug('Press the right arrow key:');
sendKey(input, 'ArrowRight');
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('');
debug('step=any cases');
var input = document.getElementById('step-any');
input.focus();

debug('Press the up arrow key:');
lastChangeEventCounter = changeEventCounter;
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"102"');
shouldBe('changeEventCounter', 'lastChangeEventCounter + 1');

debug('Press the down arrow key:');
lastChangeEventCounter = changeEventCounter;
sendKey(input, 'ArrowDown');
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', '"0"');
shouldBe('changeEventCounter', 'lastChangeEventCounter + 1');

debug('Press the end key:');
lastChangeEventCounter = changeEventCounter;
sendKey(input, 'End');
shouldBe('input.value', '"200"');
shouldBe('changeEventCounter', 'lastChangeEventCounter + 1');

debug('Edge cases');
input.valueAsNumber = 199;
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"200"');
lastChangeEventCounter = changeEventCounter;
sendKey(input, 'ArrowUp');
shouldBe('input.value', '"200"');
shouldBe('changeEventCounter', 'lastChangeEventCounter');
sendKey(input, 'ArrowDown');
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, 'ArrowDown');
shouldBe('input.value', '"0"');
lastChangeEventCounter = changeEventCounter;
sendKey(input, 'ArrowDown');
shouldBe('input.value', '"0"');
shouldBe('changeEventCounter', 'lastChangeEventCounter');
sendKey(input, 'ArrowUp');
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');
var input = document.getElementById('small-range');
input.focus();

sendKey(input, 'PageUp');
shouldBe('input.value', '"9"');

sendKey(input, 'PageDown');
shouldBe('input.value', '"6"');

sendKey(input, 'End');
shouldBe('input.value', '"9"');

sendKey(input, 'Home');
shouldBe('input.value', '"0"');

sendKey(input, 'End');
shouldBe('input.value', '"9"');


debug('');
debug('Disabled and read-only');
var input = document.getElementById('disabled');
input.focus();

sendKey(input, 'ArrowUp');
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, 'ArrowUp');
shouldBe('input.value', '"1"');
sendKey(input, 'Home');
shouldBe('input.value', '"1"');
sendKey(input, 'PageUp');
shouldBe('input.value', '"1"');
input.readOnly = false;

debug('');
</script>
</body>
</html>