[CherryPick] Clicking input type=range with padding or border sets wrong value
authorJiyeon Kim <jiyeon0402.kim@samsung.com>
Thu, 18 Apr 2013 04:26:27 +0000 (13:26 +0900)
committerGerrit Code Review <gerrit2@kim11>
Tue, 4 Jun 2013 05:23:52 +0000 (14:23 +0900)
[Title] [CherryPick] Clicking input type=range with padding or border sets wrong value
[Problem] N/A
[Cause] N/A
[Solution] N/A
[Cherry-Picker] Jiyeon Kim

https://bugs.webkit.org/show_bug.cgi?id=94473

Change-Id: I41c047cea50be6fe50e21cbb687ebb2a2efd82f2

LayoutTests/fast/forms/range/range-hit-test-with-padding-expected.txt [new file with mode: 0644]
LayoutTests/fast/forms/range/range-hit-test-with-padding.html [new file with mode: 0644]
Source/WebCore/html/shadow/SliderThumbElement.cpp
Source/WebCore/html/shadow/SliderThumbElement.h

diff --git a/LayoutTests/fast/forms/range/range-hit-test-with-padding-expected.txt b/LayoutTests/fast/forms/range/range-hit-test-with-padding-expected.txt
new file mode 100644 (file)
index 0000000..664c8ba
--- /dev/null
@@ -0,0 +1,7 @@
+Clicking middle of input type=range with padding should set the value to middle.
+
+PASS input.value is "500"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
diff --git a/LayoutTests/fast/forms/range/range-hit-test-with-padding.html b/LayoutTests/fast/forms/range/range-hit-test-with-padding.html
new file mode 100644 (file)
index 0000000..b987600
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../../js/resources/js-test-pre.js"></script>
+<style>
+input::before {
+  content: "lorem ipsum";
+  display: inline-block;
+  height: 20px;
+  background-color: red;
+}
+</style>
+</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="input" type=range min=0 max=1000 step=1 value="0" style="width: 100px; padding: 0 20px;">
+<script>
+var input = document.getElementById("input");
+function clickSlider(offsetLeft) {
+    var centerY = input.offsetTop + input.offsetHeight / 2;
+    eventSender.mouseMoveTo(input.offsetLeft + offsetLeft, centerY);
+    eventSender.mouseDown();
+    eventSender.mouseUp();
+}
+
+clickSlider(70); // left padding (20px) + middle (50px)
+shouldBe('input.value', '"500"');
+
+</script>
+
+<script src="../../js/resources/js-test-post.js"></script>
+</body>
+</html>
index 1d33459..967b48a 100644 (file)
@@ -81,6 +81,16 @@ SliderThumbElement* sliderThumbElementOf(Node* node)
     return toSliderThumbElement(thumb);
 }
 
+HTMLElement* sliderTrackElementOf(Node* node)
+{
+    ASSERT(node);
+    ShadowRoot* shadow = node->toInputElement()->userAgentShadowRoot();
+    ASSERT(shadow);
+    Node* track = shadow->firstChild()->firstChild();
+    ASSERT(track);
+    return toHTMLElement(track);
+}
+
 // --------------------------------
 
 RenderSliderThumb::RenderSliderThumb(Node* node)
@@ -233,8 +243,9 @@ void SliderThumbElement::dragFrom(const LayoutPoint& point)
 void SliderThumbElement::setPositionFromPoint(const LayoutPoint& point)
 {
     HTMLInputElement* input = hostInput();
+    HTMLElement* trackElement = sliderTrackElementOf(input);
 
-    if (!input->renderer() || !renderer())
+    if (!input->renderer() || !renderer() || !trackElement->renderer())
         return;
 
     input->setTextAsOfLastFormControlChangeEvent(input->value());
@@ -249,13 +260,15 @@ void SliderThumbElement::setPositionFromPoint(const LayoutPoint& point)
     // FIXME: This should probably respect transforms.
     LayoutPoint absoluteThumbOrigin = renderBox()->absoluteBoundingBoxRectIgnoringTransforms().location();
     LayoutPoint absoluteSliderContentOrigin = roundedLayoutPoint(input->renderer()->localToAbsolute());
+    IntRect trackBoundingBox = trackElement->renderer()->absoluteBoundingBoxRectIgnoringTransforms();
+    IntRect inputBoundingBox = input->renderer()->absoluteBoundingBoxRectIgnoringTransforms();
     if (isVertical) {
-        trackSize = input->renderBox()->contentHeight() - renderBox()->height();
-        position = offset.y() - renderBox()->height() / 2;
+        trackSize = trackElement->renderBox()->contentHeight();
+        position = offset.y() - renderBox()->height() / 2 - trackBoundingBox.y() + inputBoundingBox.y();
         currentPosition = absoluteThumbOrigin.y() - absoluteSliderContentOrigin.y();
     } else {
-        trackSize = input->renderBox()->contentWidth() - renderBox()->width();
-        position = offset.x() - renderBox()->width() / 2;
+        trackSize = trackElement->renderBox()->contentWidth();
+        position = offset.x() - renderBox()->width() / 2 - trackBoundingBox.x() + inputBoundingBox.x();
         currentPosition = absoluteThumbOrigin.x() - absoluteSliderContentOrigin.x();
     }
     position = max<LayoutUnit>(0, min(position, trackSize));
index 11d3503..f393c1d 100644 (file)
@@ -99,6 +99,7 @@ inline SliderThumbElement* toSliderThumbElement(Node* node)
 // This always return a valid pointer.
 // An assertion fails if the specified node is not a range input.
 SliderThumbElement* sliderThumbElementOf(Node*);
+HTMLElement* sliderTrackElementOf(Node*);
 
 // --------------------------------