From ad65ad92aefcd6eb66840ecde6be4db86a1f2755 Mon Sep 17 00:00:00 2001
From: Jonathan Watt <jwatt@jwatt.org>
Date: Fri, 1 Mar 2013 15:34:06 +0000
Subject: [PATCH] Bug 843725 - Add support for changing the value of <input
 type=range> using the up/down/left/right/pgup/pgdn/home/end keys. r=mounir,
 r=smaug.

---
 .../html/content/src/nsHTMLInputElement.cpp   |  82 ++++++-
 content/html/content/test/forms/Makefile.in   |   1 +
 .../forms/test_input_range_key_events.html    | 206 ++++++++++++++++++
 layout/style/forms.css                        |   6 +-
 4 files changed, 292 insertions(+), 3 deletions(-)
 create mode 100644 content/html/content/test/forms/test_input_range_key_events.html

diff --git a/content/html/content/src/nsHTMLInputElement.cpp b/content/html/content/src/nsHTMLInputElement.cpp
index 44c4cdfded74..4f6164af993f 100644
--- a/content/html/content/src/nsHTMLInputElement.cpp
+++ b/content/html/content/src/nsHTMLInputElement.cpp
@@ -2569,6 +2569,17 @@ SelectTextFieldOnFocus()
   return gSelectTextFieldOnFocus == 1;
 }
 
+static bool
+IsLTR(Element* aElement)
+{
+  nsIFrame *frame = aElement->GetPrimaryFrame();
+  if (frame) {
+    return frame->StyleVisibility()->mDirection == NS_STYLE_DIRECTION_LTR;
+  }
+  // at least for HTML, directionality is exclusively LTR or RTL
+  return aElement->GetDirectionality() == eDir_LTR;
+}
+
 nsresult
 nsHTMLInputElement::PostHandleEvent(nsEventChainPostVisitor& aVisitor)
 {
@@ -2835,6 +2846,74 @@ nsHTMLInputElement::PostHandleEvent(nsEventChainPostVisitor& aVisitor)
             NS_ENSURE_SUCCESS(rv, rv);
           }
 
+          if (aVisitor.mEvent->message == NS_KEY_PRESS &&
+              mType == NS_FORM_INPUT_RANGE && !keyEvent->IsAlt() &&
+              !keyEvent->IsControl() && !keyEvent->IsMeta() &&
+              (keyEvent->keyCode == NS_VK_LEFT ||
+               keyEvent->keyCode == NS_VK_RIGHT ||
+               keyEvent->keyCode == NS_VK_UP ||
+               keyEvent->keyCode == NS_VK_DOWN ||
+               keyEvent->keyCode == NS_VK_PAGE_UP ||
+               keyEvent->keyCode == NS_VK_PAGE_DOWN ||
+               keyEvent->keyCode == NS_VK_HOME ||
+               keyEvent->keyCode == NS_VK_END)) {
+            double minimum = GetMinimum();
+            double maximum = GetMaximum();
+            MOZ_ASSERT(MOZ_DOUBLE_IS_FINITE(minimum) &&
+                       MOZ_DOUBLE_IS_FINITE(maximum));
+            if (minimum < maximum) { // else the value is locked to the minimum
+              double value = GetValueAsDouble();
+              double step = GetStep();
+              if (step == kStepAny) {
+                step = GetDefaultStep();
+              }
+              MOZ_ASSERT(MOZ_DOUBLE_IS_FINITE(value) &&
+                         MOZ_DOUBLE_IS_FINITE(step));
+              double newValue;
+              switch (keyEvent->keyCode) {
+                case  NS_VK_LEFT:
+                  newValue = value + (IsLTR(this) ? -step : step);
+                  break;
+                case  NS_VK_RIGHT:
+                  newValue = value + (IsLTR(this) ? step : -step);
+                  break;
+                case  NS_VK_UP:
+                  // Even for horizontal range, "up" means "increase"
+                  newValue = value + step;
+                  break;
+                case  NS_VK_DOWN:
+                  // Even for horizontal range, "down" means "decrease"
+                  newValue = value - step;
+                  break;
+                case  NS_VK_HOME:
+                  newValue = minimum;
+                  break;
+                case  NS_VK_END:
+                  newValue = maximum;
+                  break;
+                case  NS_VK_PAGE_UP:
+                  // For PgUp/PgDn we jump 10% of the total range, unless step
+                  // requires us to jump more.
+                  newValue = value + std::max(step, 0.1 * (maximum - minimum));
+                  break;
+                case  NS_VK_PAGE_DOWN:
+                  newValue = value - std::max(step, 0.1 * (maximum - minimum));
+                  break;
+              }
+              MOZ_ASSERT(MOZ_DOUBLE_IS_FINITE(newValue));
+              nsAutoString val;
+              ConvertNumberToString(newValue, val);
+              SetValueInternal(val, true, true);
+              nsIFrame* frame = GetPrimaryFrame();
+              if (frame) {
+                // Trigger reflow to update the position of the thumb:
+                frame->PresContext()->GetPresShell()->
+                  FrameNeedsReflow(frame, nsIPresShell::eResize, NS_FRAME_IS_DIRTY);
+              }
+              aVisitor.mEventStatus = nsEventStatus_eConsumeNoDefault;
+            }
+          }
+
         } break; // NS_KEY_PRESS || NS_KEY_UP
 
         case NS_MOUSE_BUTTON_DOWN:
@@ -4353,7 +4432,8 @@ nsHTMLInputElement::IsHTMLFocusable(bool aWithMouse, bool *aIsFocusable, int32_t
     return true;
   }
 
-  if (IsSingleLineTextControl(false)) {
+  if (IsSingleLineTextControl(false) ||
+      mType == NS_FORM_INPUT_RANGE) {
     *aIsFocusable = true;
     return false;
   }
diff --git a/content/html/content/test/forms/Makefile.in b/content/html/content/test/forms/Makefile.in
index 5f7a08373e69..7a7cf86be2fd 100644
--- a/content/html/content/test/forms/Makefile.in
+++ b/content/html/content/test/forms/Makefile.in
@@ -18,6 +18,7 @@ MOCHITEST_FILES = \
 		test_input_attributes_reflection.html \
 		test_input_list_attribute.html \
 		test_input_email.html \
+		test_input_range_key_events.html \
 		test_input_url.html \
 		test_pattern_attribute.html \
 		test_required_attribute.html \
diff --git a/content/html/content/test/forms/test_input_range_key_events.html b/content/html/content/test/forms/test_input_range_key_events.html
new file mode 100644
index 000000000000..c8f8d182d4f0
--- /dev/null
+++ b/content/html/content/test/forms/test_input_range_key_events.html
@@ -0,0 +1,206 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=843725
+-->
+<head>
+  <title>Test key events for range</title>
+  <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
+  <meta charset="UTF-8">
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=843725">Mozilla Bug 843725</a>
+<p id="display"></p>
+<div id="content">
+</div>
+<pre id="test">
+<script type="application/javascript">
+
+/**
+ * Test for Bug 843725
+ * This test checks how the value of <input type=range> changes in response to
+ * various key events while it is in various states.
+ **/
+SimpleTest.waitForExplicitFinish();
+SimpleTest.waitForFocus(function() {
+  test();
+  SimpleTest.finish();
+});
+
+const defaultMinimum = 0;
+const defaultMaximum = 100;
+const defaultStep = 1;
+
+// Helpers:
+// For the sake of simplicity, we do not currently support fractional value,
+// step, etc.
+
+function minimum(element) {
+  return Number(element.min || defaultMinimum);
+}
+
+function maximum(element) {
+  return Number(element.max || defaultMaximum);
+}
+
+function range(element) {
+  var max = maximum(element);
+  var min = minimum(element);
+  if (max < min) {
+    return 0;
+  }
+  return max - min;
+}
+
+function defaultValue(element) {
+  return minimum(element) + range(element)/2;
+}
+
+function value(element) {
+  return Number(element.value || defaultValue(element));
+}
+
+function step(element) {
+  var step = Number(element.step || defaultStep);
+  return step <= 0 ? defaultStep : step;
+}
+
+function clampToRange(value, element) {
+  var min = minimum(element);
+  var max = maximum(element);
+  if (max < min) {
+    return min;
+  }
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+// Functions used to specify expected test results:
+
+function valuePlusStep(element) {
+  return clampToRange(value(element) + step(element), element);
+}
+
+function valueMinusStep(element) {
+  return clampToRange(value(element) - step(element), element);
+}
+
+/**
+ * Returns the current value of the range plus whichever is greater of either
+ * 10% of the range or its current step value, clamped to the range's minimum/
+ * maximum. The reason for using the step if it is greater than 10% of the
+ * range is because otherwise the PgUp/PgDn keys would do nothing in that case.
+ */
+function valuePlusTenPctOrStep(element) {
+  var tenPct = range(element)/10;
+  var stp = step(element);
+  return clampToRange(value(element) + Math.max(tenPct, stp), element);
+}
+
+function valueMinusTenPctOrStep(element) {
+  var tenPct = range(element)/10;
+  var stp = step(element);
+  return clampToRange(value(element) - Math.max(tenPct, stp), element);
+}
+
+// Test table:
+
+const LTR = "ltr";
+const RTL = "rtl";
+
+var testTable = [
+  ["VK_LEFT",      LTR, valueMinusStep],
+  ["VK_LEFT",      RTL, valuePlusStep],
+  ["VK_RIGHT",     LTR, valuePlusStep],
+  ["VK_RIGHT",     RTL, valueMinusStep],
+  ["VK_UP",        LTR, valuePlusStep],
+  ["VK_UP",        RTL, valuePlusStep],
+  ["VK_DOWN",      LTR, valueMinusStep],
+  ["VK_DOWN",      RTL, valueMinusStep],
+  ["VK_PAGE_UP",   LTR, valuePlusTenPctOrStep],
+  ["VK_PAGE_UP",   RTL, valuePlusTenPctOrStep],
+  ["VK_PAGE_DOWN", LTR, valueMinusTenPctOrStep],
+  ["VK_PAGE_DOWN", RTL, valueMinusTenPctOrStep],
+  ["VK_HOME",      LTR, minimum],
+  ["VK_HOME",      RTL, minimum],
+  ["VK_END",       LTR, maximum],
+  ["VK_END",       RTL, maximum],
+]
+
+function test() {
+  var elem = document.createElement("input");
+  elem.type = "range";
+
+  var content = document.getElementById("content");
+  content.appendChild(elem);
+  elem.focus();
+
+  for (test of testTable) {
+    var [key, dir, expectedFunc] = test;
+    var oldVal, expectedVal;
+
+    elem.step = "2";
+    elem.style.direction = dir;
+    var flush = document.body.clientWidth;
+
+    // Start at middle:
+    elem.value = oldVal = defaultValue(elem);
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test " + key + " for " + dir + " range with value set to the midpoint (" + oldVal + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test repeat of " + key + " for " + dir + " range");
+
+    // Start at maximum:
+    elem.value = oldVal = maximum(elem);
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test " + key + " for " + dir + " range with value set to the maximum (" + oldVal + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test repeat of " + key + " for " + dir + " range");
+
+    // Start at minimum:
+    elem.value = oldVal = minimum(elem);
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test " + key + " for " + dir + " range with value set to the minimum (" + oldVal + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test repeat of " + key + " for " + dir + " range");
+
+    // Test for a step value that is greater than 10% of the range:
+    elem.step = 20;
+    elem.value = 60;
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test " + key + " for " + dir + " range with a step that is greater than 10% of the range (step=" + elem.step + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, expectedVal, "Test repeat of " + key + " for " + dir + " range");
+
+    // reset step:
+    elem.step = 2;
+  }
+}
+
+</script>
+</pre>
+</body>
+</html>
diff --git a/layout/style/forms.css b/layout/style/forms.css
index 0b49e90fb53d..a7ad31fe76f7 100644
--- a/layout/style/forms.css
+++ b/layout/style/forms.css
@@ -720,12 +720,14 @@ meter {
 input[type="range"] {
   -moz-appearance: none;
   display: inline-block !important;
-  cursor: default;
   width: 12em;
   height: 1.3em;
+  margin: 0 0.7em;
+  /* Override some rules that apply on all input types: */
+  cursor: default;
   background: none;
   border: none;
-  margin: 0 0.7em;
+  -moz-binding: none; /* we don't want any of platformHTMLBindings.xml#inputFields */
 }
 
 /**