mirror of
https://github.com/servo/servo.git
synced 2025-10-16 16:29:18 +01:00
stepUp, stepDown, valueAsNumber, valueAsDate, and list work and have tests
This commit is contained in:
Patrick Shaughnessy
parent
6b79a8f042
commit
87e86c81b9
27 changed files with 1119 additions and 1244 deletions
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>input list attribute</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<h3>input_list</h3>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<form method="post"
|
||||
enctype="application/x-www-form-urlencoded"
|
||||
action=""
|
||||
name="input_form">
|
||||
<datalist id="thelist">
|
||||
<option value="one">one</option>
|
||||
<option value="two">two</option>
|
||||
</datalist>
|
||||
|
||||
<p id="non_datalist_first">
|
||||
<datalist id="non_datalist_first">
|
||||
<option value="one">one</option>
|
||||
<option value="two">two</option>
|
||||
</datalist>
|
||||
|
||||
<datalist id="datalist_first">
|
||||
<option value="one">one</option>
|
||||
<option value="two">two</option>
|
||||
</datalist>
|
||||
<p id="datalist_first">
|
||||
|
||||
<p><input list="thelist" id='input_with_list'></p>
|
||||
<p><input id='input_without_list'></p>
|
||||
<p><input list="input_with_list" id='input_with_nondatalist_list'></p>
|
||||
<p><input list="not_an_id" id='input_with_missing_list'></p>
|
||||
<p><input list="non_datalist_first" id='input_with_non_datalist_first'></p>
|
||||
<p><input list="datalist_first" id='input_with_datalist_first'></p>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("input_with_list").list, document.getElementById("thelist"));
|
||||
}, "getting .list of input must return the datalist with that id");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("input_without_list").list, null);
|
||||
}, "getting .list of input must return null if it has no list attribute");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("input_with_nondatalist_list").list, null);
|
||||
}, "getting .list of input must return null if the list attribute is a non-datalist's id");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("input_with_missing_list").list, null);
|
||||
}, "getting .list of input must return null if the list attribute is no element's id");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("input_with_non_datalist_first").list, null);
|
||||
}, "getting .list of input must return null if the list attribute is used in a non-datalist earlier than a datalist");
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("input_with_datalist_first").list, document.querySelector("datalist#datalist_first"));
|
||||
}, "getting .list of input must return the datalist with that id even if a later non-datalist also has the id");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>valueAsDate stepping</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<h3>input_valueAsDate_stepping</h3>
|
||||
<!-- This test verifies that valueAsDate reads and writes Date values,
|
||||
that those values step by the correct default step, and that the values
|
||||
represent the correct times.
|
||||
-->
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<form method="post"
|
||||
enctype="application/x-www-form-urlencoded"
|
||||
action=""
|
||||
name="input_form">
|
||||
<p><input type='date' id='input_date'></p>
|
||||
<p><input type='time' id='input_time'></p>
|
||||
<p><input type='week' id='input_week'></p>
|
||||
<p><input type='month' id='input_month'></p>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function test_stepping(inputType, stringValue, steppedString, baseMillis, stepAmount) {
|
||||
test(function() {
|
||||
// put date in, constructed from a UTC timestamp so the test doesn't
|
||||
// vary by local timezone
|
||||
input = document.getElementById("input_" + inputType);
|
||||
input.valueAsDate = new Date(baseMillis)
|
||||
|
||||
// get string out (using startsWith here to allow for optional
|
||||
// seconds and milliseconds)
|
||||
var sanitizedStr = input.value;
|
||||
assert_true(sanitizedStr.startsWith(stringValue),
|
||||
"The input value [" + sanitizedStr + "] must resemble [" + stringValue + "]");
|
||||
|
||||
// get date out
|
||||
var sanitized = input.valueAsDate;
|
||||
assert_equals(sanitized.getTime(), baseMillis, "The input valueAsDate must represent the same time as the original Date.")
|
||||
|
||||
// step up, get new date out
|
||||
input.stepUp()
|
||||
var steppedDate = input.valueAsDate;
|
||||
assert_equals(steppedDate.getTime(), baseMillis + stepAmount, "Stepping must be by the correct amount")
|
||||
|
||||
// get new string out
|
||||
var steppedStrOut = input.value;
|
||||
assert_true(steppedStrOut.startsWith(steppedString),
|
||||
"The changed input value [" + steppedStrOut + "] must resemble ["+steppedString+"]");
|
||||
|
||||
// step back down, get first date out again
|
||||
input.stepDown()
|
||||
var backDown = input.valueAsDate;
|
||||
assert_equals(backDown.getTime(), baseMillis, "Stepping back down must return the date to its original value");
|
||||
|
||||
}, inputType + " should step correctly");
|
||||
}
|
||||
|
||||
var millis_per_day = 24 * 60 * 60 * 1000;
|
||||
|
||||
// jan 1 midnight, step 1 day to jan 2
|
||||
test_stepping("date", "1970-01-01", "1970-01-02", 0, millis_per_day);
|
||||
|
||||
// jan 1 midnight, step 1 minute to 00:01:00
|
||||
test_stepping("time", "00:00", "00:01", 0, 60 * 1000);
|
||||
|
||||
// jan 1 midnight, step 31 days to feb 1
|
||||
test_stepping("month", "1970-01", "1970-02", 0, 31 * millis_per_day);
|
||||
|
||||
// monday jan 5 1970 midnight, step 7 days to jan 12
|
||||
// (this has to start on a monday for stepping up and down to return)
|
||||
test_stepping("week", "1970-W02", "1970-W03", 4 * millis_per_day, 7 * millis_per_day);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>valueAsNumber stepping</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
<h3>input_valueAsNumber_stepping</h3>
|
||||
<!-- This test verifies that valueAsNumber reads and writes number values,
|
||||
that those values step by the correct default step, and that the values
|
||||
represent the correct milliseconds/months.
|
||||
-->
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<form method="post"
|
||||
enctype="application/x-www-form-urlencoded"
|
||||
action=""
|
||||
name="input_form">
|
||||
<p><input type='date' id='input_date'></p>
|
||||
<p><input type='time' id='input_time'></p>
|
||||
<p><input type='week' id='input_week'></p>
|
||||
<p><input type='month' id='input_month'></p>
|
||||
<p><input type='datetime-local' id='input_datetime-local'></p>
|
||||
<p><input type='range' id='input_range'></p>
|
||||
<p><input type='number' id='input_number'></p>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function test_stepping(inputType, stringValue, steppedString, baseNumber, stepAmount) {
|
||||
test(function() {
|
||||
// put number in
|
||||
input = document.getElementById("input_" + inputType);
|
||||
input.valueAsNumber = baseNumber
|
||||
|
||||
// get string out
|
||||
// startsWith is here to allow for optional seconds and milliseconds.
|
||||
// the replace("T", " ") fallback is for https://github.com/web-platform-tests/wpt/issues/20994
|
||||
var sanitizedStr = input.value;
|
||||
assert_true(sanitizedStr.startsWith(stringValue) || sanitizedStr.startsWith(stringValue.replace("T", " ")),
|
||||
"The input value [" + sanitizedStr + "] must resemble [" + stringValue + "]");
|
||||
|
||||
// get number out
|
||||
var sanitized = input.valueAsNumber;
|
||||
assert_equals(sanitized, baseNumber, "The input valueAsNumber must equal the original number.")
|
||||
|
||||
// step up, get new date out
|
||||
input.stepUp()
|
||||
var steppedNumber = input.valueAsNumber;
|
||||
assert_equals(steppedNumber, baseNumber + stepAmount, "Stepping must be by the correct amount")
|
||||
|
||||
// get new string out
|
||||
var steppedStrOut = input.value;
|
||||
assert_true(steppedStrOut.startsWith(steppedString) || steppedStrOut.startsWith(steppedString.replace("T", " ")),
|
||||
"The changed input value [" + steppedStrOut + "] must resemble [" + steppedString + "]");
|
||||
|
||||
// step back down, get first date out again
|
||||
input.stepDown()
|
||||
var backDown = input.valueAsNumber;
|
||||
assert_equals(backDown, baseNumber, "Stepping back down must return the number to its original value");
|
||||
|
||||
}, inputType + " should step correctly");
|
||||
}
|
||||
|
||||
var millis_per_day = 24 * 60 * 60 * 1000;
|
||||
|
||||
// jan 1 midnight, step 1 day to jan 2
|
||||
test_stepping("date", "1970-01-01", "1970-01-02", 0, millis_per_day);
|
||||
|
||||
// jan 1 midnight, step 1 minute to 00:01:00
|
||||
test_stepping("time", "00:00", "00:01", 0, 60 * 1000);
|
||||
|
||||
// jan 1 midnight, step 1 month (not counting by milliseconds) to feb 1
|
||||
test_stepping("month", "1970-01", "1970-02", 0, 1);
|
||||
|
||||
// monday jan 5 1970 midnight, step 7 days to jan 12
|
||||
// (this has to start on a monday for stepping up and down to return)
|
||||
test_stepping("week", "1970-W02", "1970-W03", 4 * millis_per_day, 7 * millis_per_day);
|
||||
|
||||
// jan 1 midnight, step 1 minute to 00:01:00
|
||||
test_stepping("datetime-local", "1970-01-01T00:00", "1970-01-01T00:01", 0, 60 * 1000);
|
||||
|
||||
// numbers, for which the default step is 1
|
||||
test_stepping("range", "22", "23", 22, 1);
|
||||
test_stepping("number", "24", "25", 24, 1);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue