Bug 1917456 - Fix nsRangeFrame::GetValueAtEventPoint on themed range inputs with padding. r=dholbert

emilio · emilio · commit 5a708d8f449b · 2024-09-10T15:30:26.000Z
Other browsers agree with us on drawing at the border-box size when themed, so just fix the code to deal with it. Differential Revision: https://phabricator.services.mozilla.com/D221519
diff --git a/dom/html/test/forms/test_input_range_mouse_and_touch_events.html b/dom/html/test/forms/test_input_range_mouse_and_touch_events.html
@@ -19,14 +19,15 @@
      * predict exactly what value the input should take on for events at
      * certain coordinates.)
      */
-    input { margin: 0 ! important; width: 200px ! important; }
+    input { margin: 0 !important; width: 200px !important; padding-inline: 100px; }
   </style>
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=846380">Mozilla Bug 846380</a>
 <p id="display"></p>
 <div id="content">
-  <input id="range" type="range">
+  <input id="range" type="range"><br>
+  <input id="range-appearance-none" type="range" style="appearance: none">
 </div>
 <pre id="test">
 <script type="application/javascript">
@@ -40,10 +41,13 @@
  * This test checks how the value of <input type=range> changes in response to
  * various mouse and touch events.
  **/
+SimpleTest.expectAssertions(0, 2); // bug 1917867
 SimpleTest.waitForExplicitFinish();
 SimpleTest.waitForFocus(function() {
-  test(synthesizeMouse, "click", "mousedown", "mousemove", "mouseup");
-  test(synthesizeTouch, "tap", "touchstart", "touchmove", "touchend");
+  for (let element of document.querySelectorAll("input[type=range]")) {
+    test(element, synthesizeMouse, "click", "mousedown", "mousemove", "mouseup");
+    test(element, synthesizeTouch, "tap", "touchstart", "touchmove", "touchend");
+  }
   SimpleTest.finish();
 });
 
@@ -62,8 +66,9 @@
   document.body.clientWidth;
 }
 
-function test(synthesizeFunc, clickOrTap, startName, moveName, endName) {
-  var elem = document.getElementById("range");
+function test(elem, synthesizeFunc, clickOrTap, startName, moveName, endName) {
+  info(`Testing ${elem.id}`);
+
   elem.focus();
   flush();
 
@@ -74,6 +79,13 @@
   var paddingLeft = parseFloat(window.getComputedStyle(elem).paddingLeft);
   var paddingTop = parseFloat(window.getComputedStyle(elem).paddingTop);
 
+  // If themed then we use our border-box size.
+  if (elem.style.appearance != "none") {
+    width += borderLeft * 2 + paddingLeft * 2;
+    borderLeft = 0;
+    paddingLeft = 0;
+  }
+
   // Extrema for mouse/touch events:
   var midY = height / 2 + borderTop + paddingTop;
   var minX = borderLeft + paddingLeft;
@@ -206,7 +218,7 @@
   synthesizeKey("KEY_Home");
   // The KEY_Home tests are disabled until I can figure out why they fail on Android -jwatt
   //is(elem.value, MINIMUM_OF_RANGE, "Test KEY_Home during a drag sets the value to the minimum of the range");
-  synthesizeFunc(elem, midX+100, midY, { type: moveName });
+  synthesizeFunc(elem, maxX+100, midY, { type: moveName });
   is(elem.value, MAXIMUM_OF_RANGE, "Test " + moveName + " outside range after key press that occurred during a drag changes the value");
   synthesizeFunc(elem, midX, midY, { type: moveName });
   is(elem.value, MIDDLE_OF_RANGE, "Test " + moveName + " in middle of range");
diff --git a/layout/forms/nsRangeFrame.cpp b/layout/forms/nsRangeFrame.cpp
@@ -329,10 +329,11 @@ Decimal nsRangeFrame::GetValueAtEventPoint(WidgetGUIEvent* aEvent) {
         ->GetValueAsDecimal();
   }
 
-  const nsRect rangeContentRect = GetContentRectRelativeToSelf();
+  nsRect rangeRect;
   nsSize thumbSize;
-
   if (IsThemed()) {
+    // Themed ranges draw on the border-box rect.
+    rangeRect = GetRectRelativeToSelf();
     // We need to get the size of the thumb from the theme.
     nsPresContext* pc = PresContext();
     LayoutDeviceIntSize size = pc->Theme()->GetMinimumWidgetSize(
@@ -348,6 +349,7 @@ Decimal nsRangeFrame::GetValueAtEventPoint(WidgetGUIEvent* aEvent) {
                    (!IsHorizontal() && thumbSize.height > 0),
                "The thumb is expected to take up some slider space");
   } else {
+    rangeRect = GetContentRectRelativeToSelf();
     nsIFrame* thumbFrame = mThumbDiv->GetPrimaryFrame();
     if (thumbFrame) {  // diplay:none?
       thumbSize = thumbFrame->GetSize();
@@ -356,23 +358,23 @@ Decimal nsRangeFrame::GetValueAtEventPoint(WidgetGUIEvent* aEvent) {
 
   Decimal fraction;
   if (IsHorizontal()) {
-    nscoord traversableDistance = rangeContentRect.width - thumbSize.width;
+    nscoord traversableDistance = rangeRect.width - thumbSize.width;
     if (traversableDistance <= 0) {
       return minimum;
     }
-    nscoord posAtStart = rangeContentRect.x + thumbSize.width / 2;
+    nscoord posAtStart = rangeRect.x + thumbSize.width / 2;
     nscoord posAtEnd = posAtStart + traversableDistance;
     nscoord posOfPoint = mozilla::clamped(point.x, posAtStart, posAtEnd);
     fraction = Decimal(posOfPoint - posAtStart) / Decimal(traversableDistance);
     if (IsRightToLeft()) {
       fraction = Decimal(1) - fraction;
     }
   } else {
-    nscoord traversableDistance = rangeContentRect.height - thumbSize.height;
+    nscoord traversableDistance = rangeRect.height - thumbSize.height;
     if (traversableDistance <= 0) {
       return minimum;
     }
-    nscoord posAtStart = rangeContentRect.y + thumbSize.height / 2;
+    nscoord posAtStart = rangeRect.y + thumbSize.height / 2;
     nscoord posAtEnd = posAtStart + traversableDistance;
     nscoord posOfPoint = mozilla::clamped(point.y, posAtStart, posAtEnd);
     // For a vertical range, the top (posAtStart) is the highest value, so we
