<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description">Clicking middle of input type=range with padding should set the value to middle.</p>
<div id="console"></div>
<input id="ltr" type=range min=0 max=50 step=1 value="0" style="width: 100px; padding: 0 40px;">
<input id="rtl" dir="rtl" type=range min=0 max=50 step=1 value="0" style="width: 100px; padding: 0 40px;">
<input id="vertical_ltr" type=range min=0 max=50 step=1 value="0" style="-webkit-appearance:slider-vertical; width: 20px; height: 100px; padding: 40px 0;">
<input id="vertical_rtl" dir="rtl" type=range min=0 max=50 step=1 value="0" style="-webkit-appearance:slider-vertical; width: 20px; height: 100px; padding: 40px 0;">
<script>
function clickHorizontalSlider(input, offsetLeft) {
    var centerY = input.offsetTop + input.offsetHeight / 2;
    if (!window.eventSender)
        return;
    eventSender.mouseMoveTo(input.offsetLeft + offsetLeft, centerY);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

function clickVerticalSlider(input, offsetTop) {
    var centerX = input.offsetLeft + input.offsetWidth / 2;
    if (!window.eventSender)
        return;
    eventSender.mouseMoveTo(centerX, input.offsetTop + offsetTop);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

var input_ltr = document.getElementById("ltr");
clickHorizontalSlider(input_ltr, 90); // left padding (40px) + middle (50px)
shouldBe('input_ltr.value', '"25"');

var input_rtl = document.getElementById("rtl");
clickHorizontalSlider(input_rtl, 90); // left padding (40px) + middle (50px)
shouldBe('input_rtl.value', '"25"');

var input_vertical_ltr = document.getElementById("vertical_rtl");
clickVerticalSlider(input_vertical_ltr, 90); // top padding (40px) + middle (50px)
shouldBe('input_vertical_ltr.value', '"25"');

var input_vertical_rtl = document.getElementById("vertical_rtl");
clickVerticalSlider(input_vertical_rtl, 90); // top padding (40px) + middle (50px)
shouldBe('input_vertical_rtl.value', '"25"');
</script>

<script src="../../../resources/js-test-post.js"></script>
</body>
</html>