<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<!--
  Touch tests that involve the ontouchstart, ontouchmove, ontouchend or ontouchcancel callbacks
  should be written in an asynchronous fashion so they can be run on mobile platforms like Android.
  You will need to invoke isSuccessfullyParsed() in your test script when the test completes.
-->
</head>
<body>
<p id="description"></p>
<div id="console"></div>
<script>
var div = document.createElement("div");
div.style.width = "200%";
var slider1 = document.createElement("input");
slider1.id = "slider1";
slider1.setAttribute("type", "range");
slider1.style.width = "200px";
slider1.style.height = "30px";
var slider2 = document.createElement("input");
slider2.id = "slider2";
slider2.setAttribute("type", "range");
slider2.style.width = "30px";
slider2.style.height = "200px";
slider2.style.setProperty("-webkit-appearance", "slider-vertical");
var slider3 = document.createElement("input");
slider3.id = "slider3";
slider3.setAttribute("type", "range");
slider3.style.width = "200px";
slider3.style.height = "30px";
slider3.style.setProperty("-webkit-transform", "rotate(-90deg)");
slider3.style.setProperty("margin", "120px 0");

document.body.insertBefore(div, document.getElementById('console'));
div.appendChild(slider1);
div.appendChild(slider2);
div.appendChild(slider3);

var onTouchStart = (function() {

    var slider = [slider1, slider2, slider3];
    var nCheck = 0;

    return function() {
        shouldBeEqualToString("event.touches[0].target.id", slider[nCheck++].id);
        checkPosition();
    }

})();

function onTouchMove() {
    checkPosition();
}

function onTouchEnd() {
    checkPosition();
}

function onKeyDown() {
    isSuccessfullyParsed();
    testRunner.notifyDone();
}

var sliderValue = 0;

var checkPosition = (function() {

    var nCheck = 0;
    var slider = [slider1, slider2, slider3];
    var expectedPositions = [50, 50, 0, 100, 50];
    var sliderIndex = 0;

    return function() {
        sliderValue = slider[sliderIndex].value;
        shouldBeEqualToString("sliderValue", String(expectedPositions[nCheck++]));
        if (nCheck % expectedPositions.length == 0) {
            sliderIndex++;
            nCheck = 0;
        }
    };

})();

function runTest(slider, rotated) {

    var w = slider.clientWidth;
    var h = slider.clientHeight;
    var x = slider.offsetLeft + w/2;
    var y = slider.offsetTop + h/2;

    if (rotated) {
      w = slider.clientHeight;
      h = slider.clientWidth;
    }

    eventSender.clearTouchPoints();
    eventSender.addTouchPoint(x, y);
    eventSender.touchStart();

    eventSender.updateTouchPoint(0, x - w/2, y + h/2);
    eventSender.touchMove();

    eventSender.updateTouchPoint(0, x + w/2, y - h/2);
    eventSender.touchMove();

    eventSender.updateTouchPoint(0, x, y);
    eventSender.touchMove();

    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();
}

document.addEventListener("touchstart", onTouchStart, false);
document.addEventListener("touchmove", onTouchMove, false);
document.addEventListener("touchend", onTouchEnd, false);
document.addEventListener("keydown", onKeyDown, false);

description("Tests that the touch events originating on an input element with type=range update the slider position. This test is only expected to pass if ENABLE_TOUCH_SLIDER is defined.");

if (window.testRunner) {
    testRunner.waitUntilDone();
}

if (window.eventSender) {
    runTest(slider1, false);
    runTest(slider2, false);
    runTest(slider3, true);

    eventSender.keyDown(' ');
} else {
    debug('This test requires DRT.');
}
</script>
</body>
</html>