Bug 863634 - Update the position of the thumb for <input type=range> when script uses .value, .valueAsNumber, .stepUp() or .stepDown(). r=mounir

This commit is contained in:
Jonathan Watt 2013-04-23 15:04:28 +01:00
parent 3b914a21d8
commit 3bde9433bd
12 changed files with 165 additions and 0 deletions

View File

@ -1277,6 +1277,13 @@ HTMLInputElement::SetValue(const nsAString& aValue, ErrorResult& aRv)
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);
}

View File

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<input type=range value=75>
</body>
</html>

View File

@ -0,0 +1,6 @@
<!DOCTYPE html>
<html>
<body>
<input type=range value=75 style="-moz-appearance:none">
</body>
</html>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -14,6 +14,16 @@ default-preferences pref(dom.experimental_forms_range,true)
!= 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