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

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

function dragMouseFromCenter() {
    var centerX = input.offsetLeft + input.offsetWidth / 2;
    var centerY = input.offsetTop + input.offsetHeight / 2;
    eventSender.mouseMoveTo(centerX, centerY);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth, centerY);
    eventSender.mouseUp();
}

function dragMouseFromEdge() {
    var centerY = input.offsetTop + input.offsetHeight / 2;

    eventSender.mouseMoveTo(input.offsetLeft + 1, centerY);
    eventSender.mouseDown();
    eventSender.mouseMoveTo(input.offsetLeft + input.offsetWidth, centerY);
    eventSender.mouseUp();
}

function testInput(dragsFromEdge) {
    if (!window.eventSender)
        return;

    var dragMouse = dragsFromEdge ? dragMouseFromEdge : dragMouseFromCenter;

    debug('readOnly=false, disabled=false');
    input.valueAsNumber = 50;
    lastChangeEventCounter = changeEventCounter;
    dragMouse();
    shouldBe('input.value', '"100"');
    shouldBeGreaterThanOrEqual('changeEventCounter', 'lastChangeEventCounter + 1');

    debug('readOnly=true');
    input.disabled = false;
    input.readOnly = true;
    input.valueAsNumber = 50;
    lastChangeEventCounter = changeEventCounter;
    dragMouse();
    shouldBe('input.value', '"100"');
    shouldBeGreaterThanOrEqual('changeEventCounter', 'lastChangeEventCounter + 1');

    debug('disabled=true');
    input.readOnly = false;
    input.disabled = true;
    input.valueAsNumber = 50;
    lastChangeEventCounter = changeEventCounter;
    dragMouse();
    shouldBe('input.value', '"50"');
    shouldBe('lastChangeEventCounter', 'changeEventCounter');
}

var parent = document.createElement('div');
document.body.appendChild(parent);
parent.innerHTML = '<input type=range id=range1 min=0 max=100 value=50>' +
'<input type=range id=range2 min=0 max=100 value=50>';

debug('Tests for range dragging from center.');
var input = document.getElementById('range1');
input.onchange = handleChange;
input.focus();
testInput(false);
debug('');

debug('Tests for range dragging from edge');
var input = document.getElementById('range2');
input.onchange = handleChange;
input.focus();
testInput(true);
debug('');
</script>
</body>
</html>