Skip to content

Commit

Permalink
Merge pull request #167 from tomoyukilabs/submissions/tomoyukilabs
Browse files Browse the repository at this point in the history 
TestTWF, tomoyukilabs: Submissions/tomoyukilabs
  • Loading branch information
@odinho
odinho committed Jun 8, 2013
2 parents bb38c87 + bc4f49a commit acda4bb
Showing 1 changed file with 260 additions and 21 deletions.
281 changes: 260 additions & 21 deletions html/semantics/forms/the-input-element/range.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,274 @@

<head>
<title>Input Range</title>
<meta name=viewport content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="author" title="Fabrice Clari" href="mailto:f.clari@inno-group.com">
<link rel="author" title="Dimitri Bocquet" href="mailto:Dimitri.Bocquet@mosquito-fp7.eu">
<link rel="help" href="http://www.w3.org/TR/html5/the-input-element.html#the-input-element">
<script src="/resources/testharness.js"></script>
<meta name=viewport content="width=device-width, maximum-scale=1.0, user-scalable=no" />
<link rel="author" title="Fabrice Clari" href="mailto:f.clari@inno-group.com">
<link rel="author" title="Dimitri Bocquet" href="mailto:Dimitri.Bocquet@mosquito-fp7.eu">
<link rel="author" title="Tomoyuki SHIMIZU" href="mailto:tomoyuki.labs@gmail.com">
<link rel="help" href="http://www.w3.org/TR/html5/the-input-element.html#the-input-element">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>

<body>


<h1>Input Range</h1>
<input type="range" style="display:none" min=0 max=5 />

<h1>Input Range</h1>
<div style="display:none">
<input type="range" id="range_basic" min=0 max=5 />
<input type="range" id="value_smaller_than_min" min=0 max=5 value=-10 />
<input type="range" id="value_larger_than_max" min=0 max=5 value=7 />
<input type="range" id="empty_attributes" />
<input type="range" id="value_not_specified" min=2 max=6 />
<input type="range" id="control_step_mismatch" min=0 max=7 step=2 />
<input type="range" id="max_smaller_than_min" min=2 max=-3 />
<input type="range" id="default_step_scale_factor_1" min=5 max=12.6 value=6.7 />
<input type="range" id="default_step_scale_factor_2" min=5.3 max=12 value=6.7 />
<input type="range" id="default_step_scale_factor_3"min=5 max=12.6 step=0.5 value=6.7 />
<input type="range" id="float_step_scale_factor" min=5.3 max=12 step=0.5 value=6.7 />
<input type="range" id="stepup" min=3 max=14 value=6 step=3 />
<input type="range" id="stepdown" min=3 max=11 value=9 step=3 />
<input type="range" id="stepup_beyond_max" min=3 max=14 value=9 step=3 />
<input type="range" id="stepdown_beyond_min" min=3 max=11 value=6 step=3 />
<input type="range" id="illegal_min_and_max" min="ab" max="f" />
<input type="range" id="illegal_value_and_step" min=0 max=5 value="ppp" step="xyz" />
</div>

<div id="log">
</div>

<script type="text/javascript">


test(function() {assert_equals(document.getElementsByTagName("input")[0].type, "range")}, "range type support on input element", {
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-type" });
test(function() {assert_equals(document.getElementsByTagName("input")[0].min, "0")}, "min attribute support on input element", {
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-min" });
test(function() {assert_equals(document.getElementsByTagName("input")[0].max, "5")}, "max attribute support on input element", {
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-max" });

</script>


<script type="text/javascript">

test(
function() {
assert_equals(document.getElementById('range_basic').type, "range");
},
"range type support on input element",
{
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-type"
}
);

test(
function() {
assert_equals(document.getElementById('range_basic').min, "0")
},
"min attribute support on input element",
{
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-min"
}
);

test(
function() {
assert_equals(document.getElementById('range_basic').max, "5")
},
"max attribute support on input element",
{
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-max"
}
);

// HTML5 spec says the default vaules of min and max attributes are 0 and 100 respectively,
// however, Chrome, Opera and Firefox would not give any default value at all...
test(
function() {
assert_equals(document.getElementById('illegal_min_and_max').min, "0")
},
"Illegal value of min attribute",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('illegal_min_and_max').max, "100")
},
"Illegal value of max attribute",
{ "help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)" }
);

test(
function() {
assert_equals(document.getElementById('illegal_value_and_step').value, "3")
},
"Converting an illegal string to the default value",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('illegal_value_and_step').step, "1")
},
"Converting an illegal string to the default step",
{ "help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)" }
);

test(
function() {
assert_equals(document.getElementById('value_smaller_than_min').value, "0")
},
"the value is set to min when a smaller value than min attribute is given",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('value_larger_than_max').value, "5")
},
"the value is set to max when a larger value than max attribute is given",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('empty_attributes').min, "0")
},
"default value of min attribute in input type=range",
{ "help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-min" }
);

test(
function() {
assert_equals(document.getElementById('empty_attributes').max, "100")
},
"default value of max attribute in input type=range",
{
"help" : "http://www.w3.org/TR/html5/the-input-element.html#dom-input-max"
}
);

test(
function() {
assert_equals(document.getElementById('value_not_specified').value, "4")
},
"default value when min and max attributes are given (= min plus half the difference between min and max)",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('control_step_mismatch').value, "4")
},
"default value with step control when both min and max attributes are given",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

// Chrome would result in different value out of the range between min and max. Why?
test(
function() {
assert_equals(document.getElementById('max_smaller_than_min').value, "2")
},
"default value when both min and max attributes are given, while min > max",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('default_step_scale_factor_1').value, "7")
},
"The default step scale factor is 1, unless min attribute has non-integer value",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('default_step_scale_factor_2').value, "6.3")
},
"Step scale factor behavior when min attribute has integer value but max attribute is non-integer ",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)" }
);

test(
function() {
assert_equals(document.getElementById('default_step_scale_factor_3').step, "1")
},
"The default scale factor is 1 even if step attribute is explicitly set to non-integer value, unless min attribute has non-integer value",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

test(
function() {
assert_equals(document.getElementById('float_step_scale_factor').value, "6.8")
},
"Solving the step mismatch",
{
"help" : "http://www.w3.org/TR/html5/forms.html#range-state-(type=range)"
}
);

// Firefox Nightly (24.0a1) would result in the possible maximum value in this range... (i.e. 12)
test(
function() {
var e = document.getElementById('stepup');
e.stepUp();
assert_equals(e.value, "9")
},
"Performing stepUp()",
{
"help" : "http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-input-stepup"
}
);

// Firefox Nightly (24.0a1) would result in the possible minimum value in this range... (i.e. 3)
test(
function() {
var e = document.getElementById('stepdown');
e.stepDown();
assert_equals(e.value, "6")
},
"Performing stepDown()",
{
"help" : "http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-input-stepdown"
}
);

// Chrome and Opera would throw DOM Exception 11 (InvalidStateError)
// Firefox Nightly gives the correct result
test(
function() {
var e = document.getElementById('stepup_beyond_max');
e.stepUp(2);
assert_equals(e.value, "12")
},
"Performing stepUp() beyond the value of the max attribute",
{
"help" : "http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-input-stepup"
}
);

// Chrome and Opera would throw DOM Exception 11 (InvalidStateError)
// Firefox Nightly gives the correct result
test(
function() {
var e = document.getElementById('stepdown_beyond_min');
e.stepDown(2);
assert_equals(e.value, "3")
}, "Performing stepDown() beyond the value of the min attribute", {
"help" : "http://www.w3.org/html/wg/drafts/html/master/forms.html#dom-input-stepdown"
}
);

</script>

</body>

</html>

0 comments on commit acda4bb

Please sign in to comment.