Clicking middle of input type=range with padding should set the value to middle.
-PASS input.value is "500"
+PASS input_ltr.value is "25"
+PASS input_rtl.value is "25"
+PASS input_vertical_ltr.value is "25"
+PASS input_vertical_rtl.value is "25"
+
PASS successfullyParsed is true
TEST COMPLETE
<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="input" type=range min=0 max=1000 step=1 value="0" style="width: 100px; padding: 0 20px;">
+<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>
-var input = document.getElementById("input");
-function clickSlider(offsetLeft) {
+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();
}
-clickSlider(70); // left padding (20px) + middle (50px)
-shouldBe('input.value', '"500"');
+var input_ltr = document.getElementById("ltr");
+clickHorizontalSlider(input_ltr, 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="../../js/resources/js-test-post.js"></script>
input->setTextAsOfLastFormControlChangeEvent(input->value());
LayoutPoint offset = roundedLayoutPoint(input->renderer()->absoluteToLocal(point, false, true));
bool isVertical = hasVerticalAppearance(input);
+ bool isLeftToRightDirection = renderBox()->style()->isLeftToRightDirection();
LayoutUnit trackSize;
LayoutUnit position;
LayoutUnit currentPosition;
} else {
trackSize = trackElement->renderBox()->contentWidth();
position = offset.x() - renderBox()->width() / 2 - trackBoundingBox.x() + inputBoundingBox.x();
+ if (!isLeftToRightDirection)
+ position += renderBox()->width();
currentPosition = absoluteThumbOrigin.x() - absoluteSliderContentOrigin.x();
}
position = max<LayoutUnit>(0, min(position, trackSize));
return;
const Decimal ratio = Decimal::fromDouble(static_cast<double>(position) / trackSize);
- const Decimal fraction = isVertical || !renderBox()->style()->isLeftToRightDirection() ? Decimal(1) - ratio : ratio;
+ const Decimal fraction = isVertical || !isLeftToRightDirection ? Decimal(1) - ratio : ratio;
StepRange stepRange(input->createStepRange(RejectAny));
const Decimal value = stepRange.clampValue(stepRange.valueFromProportion(fraction));