1 files changed, 210 insertions, 0 deletions
diff --git a/dom/html/test/forms/test_input_range_key_events.html b/dom/html/test/forms/test_input_range_key_events.html
new file mode 100644
index 000000000..efb1f7e4b
--- /dev/null
+++ b/dom/html/test/forms/test_input_range_key_events.html
@@ -0,0 +1,210 @@
+<!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();
+
+// Turn off Spatial Navigation because it hijacks arrow keydown events:
+SimpleTest.waitForFocus(function() {
+  SpecialPowers.pushPrefEnv({"set":[["snav.enabled", false]]}, 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, String(expectedVal), "Test " + key + " for " + dir + " range with value set to the midpoint (" + oldVal + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, String(expectedVal), "Test repeat of " + key + " for " + dir + " range");
+
+    // Start at maximum:
+    elem.value = oldVal = maximum(elem);
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, String(expectedVal), "Test " + key + " for " + dir + " range with value set to the maximum (" + oldVal + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, String(expectedVal), "Test repeat of " + key + " for " + dir + " range");
+
+    // Start at minimum:
+    elem.value = oldVal = minimum(elem);
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, String(expectedVal), "Test " + key + " for " + dir + " range with value set to the minimum (" + oldVal + ")");
+
+    // Same again:
+    expectedVal = expectedFunc(elem);
+    synthesizeKey(key, {});
+    is(elem.value, String(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, String(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, String(expectedVal), "Test repeat of " + key + " for " + dir + " range");
+
+    // reset step:
+    elem.step = 2;
+  }
+}
+
+</script>
+</pre>
+</body>
+</html>