Bug 863634 - Update the position of the thumb for <input type=range> when script uses .value, .valueAsNumber, .stepUp() or .stepDown(). r=mounir
authorJonathan Watt <jwatt@jwatt.org>
Tue, 23 Apr 2013 15:04:28 +0100
changeset 140582 18bd842b2897fe0eda5e923449624a024c93500d
parent 140581 2e589018543e6a967699bc166f18d6641a751cb1
child 140583 1706d6e0514b8a1f4ec24106898131f41fcc5057
push id2579
push userakeybl@mozilla.com
push dateMon, 24 Jun 2013 18:52:47 +0000
treeherdermozilla-beta@b69b7de8a05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmounir
bugs863634
milestone23.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 863634 - Update the position of the thumb for <input type=range> when script uses .value, .valueAsNumber, .stepUp() or .stepDown(). r=mounir
content/html/content/src/HTMLInputElement.cpp
layout/reftests/forms/input/range/input-75pct-common-ref.html
layout/reftests/forms/input/range/input-75pct-unthemed-common-ref.html
layout/reftests/forms/input/range/input-stepDown-unthemed.html
layout/reftests/forms/input/range/input-stepDown.html
layout/reftests/forms/input/range/input-stepUp-unthemed.html
layout/reftests/forms/input/range/input-stepUp.html
layout/reftests/forms/input/range/input-value-prop-unthemed.html
layout/reftests/forms/input/range/input-value-prop.html
layout/reftests/forms/input/range/input-valueAsNumber-prop-unthemed.html
layout/reftests/forms/input/range/input-valueAsNumber-prop.html
layout/reftests/forms/input/range/reftest.list
--- a/content/html/content/src/HTMLInputElement.cpp
+++ b/content/html/content/src/HTMLInputElement.cpp
@@ -1272,16 +1272,23 @@ HTMLInputElement::SetValue(const nsAStri
       //
       // NOTE: this is currently quite expensive work (too much string
       // manipulation). We should probably optimize that.
       nsAutoString currentValue;
       GetValueInternal(currentValue);
 
       SetValueInternal(aValue, false, true);
 
+      if (mType == NS_FORM_INPUT_RANGE) {
+        nsRangeFrame* frame = do_QueryFrame(GetPrimaryFrame());
+        if (frame) {
+          frame->UpdateForValueChange();
+        }
+      }
+
       if (mFocusedValue.Equals(currentValue)) {
         GetValueInternal(mFocusedValue);
       }
     } else {
       SetValueInternal(aValue, false, true);
     }
   }
 }
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-75pct-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type=range value=75>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-75pct-unthemed-common-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <input type=range value=75 style="-moz-appearance:none">
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-stepDown-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepDown();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=100 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-stepDown.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepDown();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=100 step=25>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-stepUp-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepUp();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-stepUp.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').stepUp();
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-value-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').value = "75";
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-value-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').value = "75";
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-valueAsNumber-prop-unthemed.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').valueAsNumber = 75;
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25 style='-moz-appearance:none'>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/forms/input/range/input-valueAsNumber-prop.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+  <!-- Test: when changing the 'value' IDL property, the thumb of the range
+             should be moved to the appropriate position -->
+  <script type="text/javascript">
+    function setValue()
+    {
+      document.getElementById('i').valueAsNumber = 75;
+      document.documentElement.className = '';
+    }
+    document.addEventListener("MozReftestInvalidate", setValue);
+    setTimeout(setValue, 2000); // useful when not running under reftest suite
+  </script>
+  <body>
+    <input type=range id='i' value=50 step=25>
+  </body>
+</html>
--- a/layout/reftests/forms/input/range/reftest.list
+++ b/layout/reftests/forms/input/range/reftest.list
@@ -9,16 +9,26 @@ default-preferences pref(dom.experimenta
 # dynamic type changes:
 == input-to-range-from-other-type-unthemed-1.html input-to-range-from-other-type-unthemed-1-ref.html
 == input-from-range-to-other-type-unthemed-1.html input-from-range-to-other-type-unthemed-1-ref.html
 
 # for different values:
 != input-range-different-fraction-of-range-unthemed-1.html input-range-different-fraction-of-range-unthemed-1-notref.html
 == input-range-same-fraction-of-range-unthemed-1.html input-range-same-fraction-of-range-unthemed-1-ref.html
 
+# dynamic value changes:
+== input-value-prop-unthemed.html input-75pct-unthemed-common-ref.html
+== input-value-prop.html input-75pct-common-ref.html
+== input-valueAsNumber-prop-unthemed.html input-75pct-unthemed-common-ref.html
+== input-valueAsNumber-prop.html input-75pct-common-ref.html
+== input-stepDown-unthemed.html input-75pct-unthemed-common-ref.html
+== input-stepDown.html input-75pct-common-ref.html
+== input-stepUp-unthemed.html input-75pct-unthemed-common-ref.html
+== input-stepUp.html input-75pct-common-ref.html
+
 # 'direction' property:
 == input-range-direction-unthemed-1.html input-range-direction-unthemed-1-ref.html
 
 # ::-moz-range-progress pseudo-element:
 == input-range-moz-range-progress-1.html input-range-moz-range-progress-1-ref.html
 == input-range-moz-range-progress-2.html input-range-moz-range-progress-2-ref.html
 == input-range-moz-range-progress-3.html input-range-moz-range-progress-3-ref.html