Google Git
Sign in
nest-open-source / manifest_repos / chromium_src / 1389d67935ffbffe8a70c1fa06867f6cf7ecf464 / . / chromium / src / third_party / blink / web_tests / fast / forms / range / range-keyoperation.html
blob: d528254cc5ba8bcc61864479d457f42598e0b3ad [file] [log] [blame]
<!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>