mirror of
https://github.com/servo/servo.git
synced 2025-08-06 06:00:15 +01:00
Update web-platform-tests to revision 0d318188757a9c996e20b82db201fd04de5aa255
This commit is contained in:
James Graham
parent
b2a5225831
commit
1a81b18b9f
12321 changed files with 544385 additions and 6 deletions
|
|
@ -0,0 +1,34 @@
|
|||
[
|
||||
{
|
||||
"id": "naming-form-controls-the-name-attribute",
|
||||
"original_id": "naming-form-controls:-the-name-attribute"
|
||||
},
|
||||
{
|
||||
"id": "submitting-element-directionality-the-dirname-attribute",
|
||||
"original_id": "submitting-element-directionality:-the-dirname-attribute"
|
||||
},
|
||||
{
|
||||
"id": "limiting-user-input-length-the-maxlength-attribute",
|
||||
"original_id": "limiting-user-input-length:-the-maxlength-attribute"
|
||||
},
|
||||
{
|
||||
"id": "enabling-and-disabling-form-controls-the-disabled-attribute",
|
||||
"original_id": "enabling-and-disabling-form-controls:-the-disabled-attribute"
|
||||
},
|
||||
{
|
||||
"id": "form-submission",
|
||||
"original_id": "form-submission"
|
||||
},
|
||||
{
|
||||
"id": "autofocusing-a-form-control-the-autofocus-attribute",
|
||||
"original_id": "autofocusing-a-form-control:-the-autofocus-attribute"
|
||||
},
|
||||
{
|
||||
"id": "input-modalities-the-inputmode-attribute",
|
||||
"original_id": "input-modalities:-the-inputmode-attribute"
|
||||
},
|
||||
{
|
||||
"id": "autofilling-form-controls-the-autocomplete-attribute",
|
||||
"original_id": "autofilling-form-controls:-the-autocomplete-attribute"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Submitting element directionality: the dirname attribute support</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Submitting element directionality: the dirname attribute</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#submitting-element-directionality:-the-dirname-attribute">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form action="dirname-ltr-iframe.html" method=get target="iframe">
|
||||
<p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
|
||||
<p><button type=submit>Post Comment</button></p>
|
||||
</form>
|
||||
<iframe name="iframe"></iframe>
|
||||
<script>
|
||||
function getParameterByName(name) {
|
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||
results = regex.exec(document.querySelector("iframe").contentWindow.location.search);
|
||||
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
var t = async_test("submit element directionality");
|
||||
document.querySelector("input").value="foobar";
|
||||
document.querySelector("button").click();
|
||||
|
||||
document.querySelector("iframe").onload = t.step_func_done(function() {
|
||||
assert_equals(getParameterByName("comment.dir"), "ltr");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Submitting element directionality: the dirname attribute (rtl)</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#submitting-element-directionality:-the-dirname-attribute">
|
||||
<form action="dirname-rtl-manual.html" method=get>
|
||||
<p><label>Comment: <input type=text name="comment" dirname="comment.dir" required></label></p>
|
||||
<p><button type=submit>Post Comment</button></p>
|
||||
</form>
|
||||
<p>Switch to a right-to-left writing direction, enter a text in the input and submit the form.</p>
|
||||
<p>Test passes if the word "PASS" appears below</p>
|
||||
<script>
|
||||
function getParameterByName(name) {
|
||||
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||
results = regex.exec(location.search);
|
||||
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||
}
|
||||
|
||||
var commentDir = getParameterByName("comment.dir");
|
||||
if (commentDir) {
|
||||
var p = document.createElement("p");
|
||||
p.textContent = (commentDir == "rtl") ? "PASS" : "FAIL";
|
||||
document.body.appendChild(p);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<title>HTMLFormElement: the disabled attribute</title>
|
||||
<link rel="author" title="Eric Casler" href="mailto:ericorange@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#enabling-and-disabling-form-controls:-the-disabled-attribute">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<div id="log"></div>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
// Elements tested for in this file
|
||||
var types = ["button", "input", "select", "textarea"];
|
||||
// no tests for: optgroup, option, fieldset
|
||||
|
||||
var root = document.getElementById("root");
|
||||
for (var element_type = 0; element_type < types.length; element_type++) {
|
||||
test(function() {
|
||||
root.innerHTML = "<"+types[element_type]+" + id='elem'></"+types[element_type]+">";
|
||||
|
||||
var elem = document.getElementById("elem");
|
||||
assert_false(elem.disabled);
|
||||
},
|
||||
"Test ["+types[element_type]+"]: default behaviour is NOT disabled");
|
||||
|
||||
test(function() {
|
||||
var formats = ["disabled",
|
||||
"disabled=disabled", "disabled='disabled'",
|
||||
"disabled='true'", "disabled=true",
|
||||
"disabled='false'", "disabled=false"];
|
||||
|
||||
for (var f = 0; f < formats.length; f++) {
|
||||
root.innerHTML = "<"+types[element_type]+" id='elem' " + formats[f] + "></"+types[element_type]+">";
|
||||
|
||||
var elem = document.getElementById("elem");
|
||||
assert_true(elem.disabled);
|
||||
}
|
||||
},
|
||||
"Test ["+types[element_type]+"]: verify disabled acts as boolean attribute");
|
||||
|
||||
test(function() {
|
||||
root.innerHTML = "<"+types[element_type]+" id='elem'></"+types[element_type]+"><input id='other' value='no event dispatched'></input>";
|
||||
var elem = document.getElementById("elem"),
|
||||
other = document.getElementById("other");
|
||||
|
||||
assert_equals(other.value, "no event dispatched");
|
||||
|
||||
elem.disabled = true;
|
||||
assert_true(elem.disabled);
|
||||
|
||||
elem.onclick = function () {
|
||||
// change value of other element, to avoid *.value returning "" for disabled elements
|
||||
document.getElementById("other").value = "event dispatched";
|
||||
};
|
||||
|
||||
// Check if dispatched event executes
|
||||
var evObj = document.createEvent('Events');
|
||||
evObj.initEvent("click", true, false);
|
||||
elem.dispatchEvent(evObj);
|
||||
assert_equals(other.value, "event dispatched");
|
||||
},
|
||||
"Test ["+types[element_type]+"]: synthetic click events should be dispatched");
|
||||
|
||||
test(function() {
|
||||
root.innerHTML = "<"+types[element_type]+" id='elem'></"+types[element_type]+"><input id='other' value='no event dispatched'></input>";
|
||||
var elem = document.getElementById("elem"),
|
||||
other = document.getElementById("other");
|
||||
|
||||
assert_equals(other.value, "no event dispatched");
|
||||
|
||||
elem.disabled = true;
|
||||
assert_true(elem.disabled);
|
||||
|
||||
elem.onclick = function () {
|
||||
// change value of other element, to avoid *.value returning "" for disabled elements
|
||||
document.getElementById("other").value = "event dispatched";
|
||||
};
|
||||
|
||||
// Check that click() on a disabled element doesn't dispatch a click event.
|
||||
elem.click();
|
||||
assert_equals(other.value, "no event dispatched");
|
||||
},
|
||||
"Test ["+types[element_type]+"]: click() should not dispatch a click event");
|
||||
}
|
||||
root.innerHTML = "";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML Test: formAction_document_address</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-fs-formaction">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-document's-address">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-button-element">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-input-element">
|
||||
<meta name="assert" content="On getting the formAction IDL attribute, when the content attribute is missing or its value is the empty string, the document's address must be returned instead.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
|
||||
<div id="missing" style="display:none">
|
||||
<button type="submit">Submit</button>
|
||||
<input type="submit">
|
||||
</div>
|
||||
|
||||
<div id="empty_string" style="display:none">
|
||||
<button type="submit" formaction="">Submit</button>
|
||||
<input type="submit" formaction="">
|
||||
</div>
|
||||
|
||||
<div id="no_assigned_value" style="display:none">
|
||||
<button type="submit" formaction>Submit</button>
|
||||
<input type="submit" formaction>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// formaction content attribute is missing
|
||||
test(function() {
|
||||
var formAction = document.querySelector('#missing button').formAction;
|
||||
var address = document.location.href;
|
||||
assert_equals(formAction, address);
|
||||
}, "Check if button.formAction is the document's address when formaction content attribute is missing");
|
||||
|
||||
test(function() {
|
||||
var formAction = document.querySelector('#missing input').formAction;
|
||||
var address = document.location.href;
|
||||
assert_equals(formAction, address);
|
||||
}, "Check if input.formAction is the document's address when formaction content attribute is missing");
|
||||
|
||||
// formaction content attribute value is empty string
|
||||
test(function() {
|
||||
var formAction = document.querySelector('#empty_string button').formAction;
|
||||
var address = document.location.href;
|
||||
assert_equals(formAction, address);
|
||||
}, "Check if button.formAction is the document's address when formaction content attribute value is empty string");
|
||||
|
||||
test(function() {
|
||||
var formAction = document.querySelector('#empty_string input').formAction;
|
||||
var address = document.location.href;
|
||||
assert_equals(formAction, address);
|
||||
}, "Check if input.formAction is the document's address when formaction content attribute value is empty string");
|
||||
|
||||
// formaction content attribute value is not assigned, just for comparison with empty string above
|
||||
test(function() {
|
||||
var formAction = document.querySelector('#no_assigned_value button').formAction;
|
||||
var address = document.location.href;
|
||||
assert_equals(formAction, address);
|
||||
}, "Check if button.formAction is the document's address when formaction content attribute value is not assigned");
|
||||
|
||||
test(function() {
|
||||
var formAction = document.querySelector('#no_assigned_value input').formAction;
|
||||
var address = document.location.href;
|
||||
assert_equals(formAction, address);
|
||||
}, "Check if input.formAction is the document's address when formaction content attribute value is not assigned");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>formaction on button element</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
|
||||
<meta content="formaction on button element" name="description">
|
||||
<link href="https://html.spec.whatwg.org/multipage/#dom-fs-formaction" rel="help">
|
||||
</head>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
<button formaction="http://www.example.com/" style="display: none" type="submit">Submit</button>
|
||||
<input formaction="http://www.example.com/" style="display: none" type="submit" value="submit">
|
||||
<input style="display: none" type="submit" value="submit">
|
||||
<input formaction="" style="display: none" type="submit" value="submit">
|
||||
|
||||
<script type="text/javascript">
|
||||
function relativeToAbsolute(relativeURL) {
|
||||
var a = document.createElement('a');
|
||||
a.href = relativeURL;
|
||||
return a.href;
|
||||
}
|
||||
test(function() {assert_equals(document.getElementsByTagName("button")[0].formAction, "http://www.example.com/")}, "formAction on button support");
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].formAction, "http://www.example.com/")}, "formAction on input support");
|
||||
|
||||
var testElem = document.getElementsByTagName("input")[0];
|
||||
testElem.formAction = "http://www.example.com/page2.html";
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].formAction, "http://www.example.com/page2.html")}, "formaction absolute URL value on input reflects correct value after being updated by the DOM");
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].getAttribute("formaction"), "http://www.example.com/page2.html")}, "formAction absolute URL value is correct using getAttribute");
|
||||
|
||||
var testElem = document.getElementsByTagName("input")[0];
|
||||
testElem.formAction = "../page3.html";
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].formAction, relativeToAbsolute('../page3.html'))}, "formAction relative URL value on input reflects correct value after being updated by the DOM");
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].getAttribute("formaction"), "../page3.html")}, "formAction relative URL value is correct using getAttribute");
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[1].formAction, document.URL)}, "On getting, when formaction is missing, the document's address must be returned");
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[2].formAction, document.URL)}, "On getting, when formaction value is the empty string, the document's address must be returned");
|
||||
</script>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
[
|
||||
{
|
||||
"id": "definitions",
|
||||
"original_id": "definitions"
|
||||
},
|
||||
{
|
||||
"id": "constraint-validation",
|
||||
"original_id": "constraint-validation"
|
||||
},
|
||||
{
|
||||
"id": "the-constraint-validation-api",
|
||||
"original_id": "the-constraint-validation-api"
|
||||
},
|
||||
{
|
||||
"id": "security-forms",
|
||||
"original_id": "security-forms"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.checkValidity()</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-checkvalidity">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "password"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {maxLength: "4", value: "abcdef"}, expected: false, name: "[target] suffering from being too long", dirty: true},
|
||||
{conditions: {pattern: "[A-Z]", value: "abc"}, expected: false, name: "[target] suffering from a pattern mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["url"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {maxLength: "20", value: "http://www.example.com"}, expected: false, name: "[target] suffering from being too long", dirty: true},
|
||||
{conditions: {pattern: "http://www.example.com", value: "http://www.example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
|
||||
{conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["email"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {maxLength: "10", value: "test@example.com"}, expected: false, name: "[target] suffering from being too long", dirty: true},
|
||||
{conditions: {pattern: "test@example.com", value: "test@example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
|
||||
{conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-01-01T12:00:00Z", value: "2001-01-01T12:00:00Z"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-01-01T12:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "2001-01-01T12:03:00Z"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-01-01", value: "2001-01-01"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-01-01", value: "2000-01-01"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 86400000, value: "2001-01-03"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-01", value: "2001-01"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-01", value: "2000-01"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "2001-03"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-W01", value: "2001-W01"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-W01", value: "2000-W01"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 604800000, value: "2001-W03"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "12:00:00", value: "11:00:00"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {max: "5", value: "6"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "5", value: "4"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "3"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["checkbox", "radio"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, checked: false, name: "test1"}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["file"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, files: null}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "select",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "checkValidity");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.reportValidity()</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-reportvalidity">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "password"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {maxLength: "4", value: "abcdef"}, expected: false, name: "[target] suffering from being too long", dirty: true},
|
||||
{conditions: {pattern: "[A-Z]", value: "abc"}, expected: false, name: "[target] suffering from a pattern mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["url"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {maxLength: "20", value: "http://www.example.com"}, expected: false, name: "[target] suffering from being too long", dirty: true},
|
||||
{conditions: {pattern: "http://www.example.com", value: "http://www.example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
|
||||
{conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["email"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {maxLength: "10", value: "test@example.com"}, expected: false, name: "[target] suffering from being too long", dirty: true},
|
||||
{conditions: {pattern: "test@example.com", value: "test@example.net"}, expected: false, name: "[target] suffering from a pattern mismatch"},
|
||||
{conditions: {value: "abc"}, expected: false, name: "[target] suffering from a type mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-01-01T12:00:00Z", value: "2001-01-01T12:00:00Z"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-01-01T12:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "2001-01-01T12:03:00Z"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-01-01", value: "2001-01-01"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-01-01", value: "2000-01-01"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 86400000, value: "2001-01-03"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-01", value: "2001-01"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-01", value: "2000-01"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "2001-03"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "2000-W01", value: "2001-W01"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "2001-W01", value: "2000-W01"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 604800000, value: "2001-W03"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {max: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "12:00:00", value: "11:00:00"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {max: "5", value: "6"}, expected: false, name: "[target] suffering from an overflow"},
|
||||
{conditions: {min: "5", value: "4"}, expected: false, name: "[target] suffering from an underflow"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "3"}, expected: false, name: "[target] suffering from a step mismatch"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["checkbox", "radio"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, checked: false, name: "test1"}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["file"],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, files: null}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "select",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {}, expected: true, name: "[target] no constraint"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] suffering from being missing"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "reportValidity");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Constraint validation</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#constraint-validation">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form id="fm1" style="display:none">
|
||||
<fieldset id="test0">
|
||||
<input type="text" required value="" id="test1">
|
||||
</fieldset>
|
||||
<input type="email" value="abc" id="test2">
|
||||
<button id="test3">TEST</button>
|
||||
<select id="test4"></select>
|
||||
<textarea id="test5"></textarea>
|
||||
<output id="test6"></output>
|
||||
</form>
|
||||
<form id="fm2" style="display:none">
|
||||
<fieldset>
|
||||
<input type="text" required value="abc">
|
||||
</fieldset>
|
||||
<input type="email" value="test@example.com">
|
||||
<button>TEST</button>
|
||||
<select></select>
|
||||
<textarea></textarea>
|
||||
<output></output>
|
||||
</form>
|
||||
<form id="fm3" style="display:none">
|
||||
<fieldset id="fs">
|
||||
<legend><input type="text" id="inp1"></legend>
|
||||
<input type="text" required value="" id="inp2">
|
||||
</fieldset>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var cancelable = true,
|
||||
times1 = 0,
|
||||
times2 = 0,
|
||||
invalidList1 = [],
|
||||
invalidList2 = [],
|
||||
test1,
|
||||
test2,
|
||||
fm1,
|
||||
fm2,
|
||||
fm3;
|
||||
|
||||
setup(function () {
|
||||
fm1 = document.getElementById("fm1");
|
||||
fm2 = document.getElementById("fm2");
|
||||
fm3 = document.getElementById("fm3");
|
||||
test1 = document.getElementById("test1");
|
||||
test2 = document.getElementById("test2");
|
||||
for (var index = 0; index < fm1.elements.length; index++) {
|
||||
var ele = fm1.elements.item(index);
|
||||
ele.addEventListener("invalid", function (e) {
|
||||
times1++;
|
||||
invalidList1.push(e.target);
|
||||
if (!e.cancelable)
|
||||
cancelable = e.cancelable;
|
||||
}, false);
|
||||
}
|
||||
|
||||
for (var index = 0; index < fm1.elements.length; index++) {
|
||||
var ele = fm2.elements.item(index);
|
||||
ele.addEventListener("invalid", function (e) {
|
||||
times2++;
|
||||
invalidList2.push(ele);
|
||||
}, false);
|
||||
}
|
||||
});
|
||||
|
||||
test(function(){
|
||||
assert_false(fm1.checkValidity(), "The checkValidity method should be false.");
|
||||
}, "If there is any invalid submittable element whose form owner is the form, the form.checkValidity must be false");
|
||||
|
||||
test(function(){
|
||||
assert_true("reportValidity" in fm1, "The reportValidity method is not supported");
|
||||
assert_false(fm1.reportValidity(), "The reportValidity method should be false.");
|
||||
}, "If there is any invalid submittable element whose form owner is the form, the form.reportValidity must be false");
|
||||
|
||||
test(function(){
|
||||
assert_true(fm2.checkValidity(), "The checkValidity method should be true.");
|
||||
}, "If all of the submittable elements whose form owner is the form are valid, the form.checkValidity must be true");
|
||||
|
||||
test(function(){
|
||||
assert_true("reportValidity" in fm2, "The reportValidity method is not supported.");
|
||||
assert_true(fm2.reportValidity(), "The reportValidity method should be true.");
|
||||
}, "If all of the submittable elements whose form owner is the form are valid, the form.reportValidity must be true");
|
||||
|
||||
test(function(){
|
||||
assert_false(fm3.checkValidity(), "The checkValidity method should be false.");
|
||||
document.getElementById("fs").disabled = true;
|
||||
assert_true(fm3.checkValidity(), "The checkValidity method should be true.");
|
||||
|
||||
document.getElementById("inp1").value = "aaa";
|
||||
document.getElementById("inp1").type = "url";
|
||||
assert_false(fm3.checkValidity(), "The checkValidity method should be false.");
|
||||
}, "Check the checkValidity method of the form element when it has a fieldset child");
|
||||
|
||||
test(function(){
|
||||
assert_true("reportValidity" in fm3, "The reportValidity method is not supported.");
|
||||
assert_false(fm3.reportValidity(), "The reportValidity method should be false.");
|
||||
document.getElementById("fs").disabled = true;
|
||||
assert_true(fm3.reportValidity(), "The reportValidity method should be true.");
|
||||
|
||||
document.getElementById("inp1").value = "aaa";
|
||||
document.getElementById("inp1").type = "url";
|
||||
assert_false(fm3.reportValidity(), "The reportValidity method should be false.");
|
||||
}, "Check the reportValidity method of the form element when it has a fieldset child");
|
||||
|
||||
test(function () {
|
||||
assert_equals(times1, 4, "The invalid event will be fired if the checkValidity or reportValidity method are called.");
|
||||
assert_array_equals(invalidList1, [test1, test2, test1, test2], "The invalid event must be fired at the invalid control");
|
||||
assert_true(cancelable, "The invalid event is cancelable.");
|
||||
}, "The invalid event must be fired at the invalid controls");
|
||||
|
||||
test(function () {
|
||||
assert_equals(times2, 0, "The invalid event should not be fired, times should be 0.");
|
||||
assert_array_equals(invalidList2, [], "The invalid event should not be fired, invalid list should be empty");
|
||||
}, "The invalid event must not be fired at the invalid controls");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.badInput</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/multipage/association-of-controls-and-forms.html#suffering-from-bad-input">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/multipage/the-button-element.html#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["email"],
|
||||
testData: [
|
||||
{conditions: {multiple: false, value: ""}, expected: false, name: "[target] The multiple attribute is false and the value attribute is empty"},
|
||||
{conditions: {multiple: false, value: "test1@example.com"}, expected: false, name: "[target] The multiple attribute is false and the value attribute is a valid e-mail address"},
|
||||
{conditions: {multiple: true, value: "test1@example.com,test2@eample.com"}, expected: false, name: "[target] The multiple attribute is true and the value contains valid e-mail addresses"},
|
||||
{conditions: {multiple: true, value: "test,1@example.com"}, expected: false, name: "[target] The multiple attribute is true and the value attribute contains a ','"}
|
||||
//TODO, the value contains characters that cannot be converted to punycode.
|
||||
//Can not find a character that cannot be converted to punycode.
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {value: ""}, expected: false, name: "[target] The value attribute is empty"},
|
||||
{conditions: {value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] The value attribute is a valid date and time string"},
|
||||
{conditions: {value: "abc"}, expected: true, name: "[target] The value attribute cannot convert to a valid normalized forced-UTC global date and time string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["color"],
|
||||
testData: [
|
||||
{conditions: {value: ""}, expected: true, name: "[target] The value attribute is empty"},
|
||||
{conditions: {value: "#000000"}, expected: false, name: "[target] The value attribute is a valid sample color"},
|
||||
{conditions: {value: "#FFFFFF"}, expected: false, name: "[target] The value attribute is not a valid lowercase sample color"},
|
||||
{conditions: {value: "abc"}, expected: true, name: "[target] The value attribute cannot convert to a valid sample color"}
|
||||
]
|
||||
},
|
||||
];
|
||||
validator.run_test (testElements, "badInput");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.customError</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-customerror">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
|
||||
{conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "button",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
|
||||
{conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "select",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
|
||||
{conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false i the custom validity error message is empty"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {message: "My custom error"}, expected: true, name: "[target] The validity.customError must be true if the custom validity error message is not empty"},
|
||||
{conditions: {message: ""}, expected: false, name: "[target] The validity.customError must be false if the custom validity error message is empty"}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
validator.run_test(testElements, "customError");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.patternMismatch</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-patternmismatch">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "url", "email", "password"],
|
||||
testData: [
|
||||
{conditions: {pattern: null, value: "abc"}, expected: false, name: "[target] The pattern attribute is not set"},
|
||||
{conditions: {pattern: "[A-Z]+", value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {pattern: "[A-Z]{1}", value: "A"}, expected: false, name: "[target] The value attribute matches the pattern attribute"},
|
||||
{conditions: {pattern: "[A-Z]+", value: "\u0041\u0042\u0043"}, expected: false, name: "[target] The value(ABC) in unicode attribute matches the pattern attribute"},
|
||||
{conditions: {pattern: "[a-z]{3,}", value: "ABCD"}, expected: true, name: "[target] The value attribute mismatches the pattern attribute"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test (testElements, "patternMismatch");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.rangeOverflow</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-rangeoverflow">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {max: "", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] The max attribute is not set"},
|
||||
{conditions: {max: "2000-01-01T12:00:00Z", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {max: "2000-01-01 12:00:00Z", value: "2001-01-01T12:00:00Z"}, expected: false, name: "[target] The max attribute is an invalid global date time string"},
|
||||
{conditions: {max: "2000-01-01T12:00:00Z", value: "2000-01-01T11:00:00Z"}, expected: false, name: "[target] The max attribute is greater than the value attribute"},
|
||||
{conditions: {max: "2000-01-01T23:59:59Z", value: "2001-01-01T24:00:00Z"}, expected: false, name: "[target] The value is an invalid datetime string(hour is greater than 23)"},
|
||||
{conditions: {max: "1970-01-01T12:00Z", value: "80-01-01T12:00Z"}, expected: false, name: "[target] The value if an invalid date time string(year is two digits)"},
|
||||
{conditions: {max: "2000-01-01T12:00:00Z", value: "2001-01-01T13:00:00Z"}, expected: true, name: "[target] The value is greater than max"},
|
||||
{conditions: {max: "2000-01-01T12:00:00.1Z", value: "2000-01-01T12:00:00.2Z"}, expected: true, name: "[target] The value is greater than max(with millisecond in 1 digit)"},
|
||||
{conditions: {max: "2000-01-01T12:00:00.01Z", value: "2000-01-01T12:00:00.02Z"}, expected: true, name: "[target] The value is greater than max(with millisecond in 2 digits)"},
|
||||
{conditions: {max: "2000-01-01T12:00:00.001Z", value: "2000-01-01T12:00:00.002Z"}, expected: true, name: "[target] The value is greater than max(with millisecond in 3 digits)"},
|
||||
{conditions: {max: "2000-01-01T12:00:00", value: "10000-01-01T12:00:00"}, expected: true, name: "[target] The value is greater than max(Year is 10000 should be valid)"},
|
||||
{conditions: {max: "8592-01-01T02:09+02:09", value: "8593-01-01T02:09+02:09"}, expected: true, name: "[target] The value is greater than max(with timezone)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {max: "", value: "2000-01-01"}, expected: false, name: "[target] The max attribute is not set"},
|
||||
{conditions: {max: "2000-01-01", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {max: "2000/01/01", value: "2002-01-01"}, expected: false, name: "[target] The max attribute is an invalid date"},
|
||||
{conditions: {max: "2000-01-01", value: "2000-2-2"}, expected: false, name: "[target] The value attribute is an invalid date"},
|
||||
{conditions: {max: "987-01-01", value: "988-01-01"}, expected: false, name: "[target] The value is an invalid date(year is three digits)"},
|
||||
{conditions: {max: "2000-01-01", value: "2000-13-01"}, expected: false, name: "[target] The value is an invalid date(month is greater than 12)"},
|
||||
{conditions: {max: "2000-01-01", value: "2000-02-30"}, expected: false, name: "[target] The value is an invalid date(date is greater than 29 for Feb)"},
|
||||
{conditions: {max: "2000-12-01", value: "2000-01-01"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
|
||||
{conditions: {max: "2000-12-01", value: "2001-01-01"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
|
||||
{conditions: {max: "9999-01-01", value: "10000-01-01"}, expected: true, name: "[target] The value attribute is greater than max attribute(Year is 10000 should be valid)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {max: "", value: "2000-01"}, expected: false, name: "[target] The max attribute is not set"},
|
||||
{conditions: {max: "2000-01", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {max: "2000/01", value: "2001-02"}, expected: false, name: "[target] The max attribute is an invalid month string"},
|
||||
{conditions: {max: "2000-01", value: "2000-1"}, expected: false, name: "[target] The value attribute is an invalid month string"},
|
||||
{conditions: {max: "987-01", value: "988-01"}, expected: false, name: "[target] The value is an invalid month string(year is three digits)"},
|
||||
{conditions: {max: "2000-01", value: "2000-13"}, expected: false, name: "[target] The value is an invalid month string(month is greater than 12)"},
|
||||
{conditions: {max: "2000-12", value: "2000-01"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
|
||||
{conditions: {max: "2000-01", value: "2000-12"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
|
||||
{conditions: {max: "9999-01", value: "10000-01"}, expected: true, name: "[target] The value attribute is greater than max attribute(Year is 10000 should be valid)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {max: "", value: "2000-W01"}, expected: false, name: "[target] The max attribute is not set"},
|
||||
{conditions: {max: "2000-W01", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {max: "2000/W01", value: "2001-W02"}, expected: false, name: "[target] The max attribute is an invalid week string"},
|
||||
{conditions: {max: "2000-W01", value: "2000-W2"}, expected: false, name: "[target] The value attribute is an invalid week string"},
|
||||
{conditions: {max: "2000-W01", value: "2000-w02"}, expected: false, name: "[target] The value attribute is an invalid week string(w is in lowercase)"},
|
||||
{conditions: {max: "987-W01", value: "988-W01"}, expected: false, name: "[target] The value is an invalid week string(year is three digits)"},
|
||||
{conditions: {max: "2000-W01", value: "2000-W57"}, expected: false, name: "[target] The value is an invalid week string(week is too greater)"},
|
||||
{conditions: {max: "2000-W12", value: "2000-W01"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
|
||||
{conditions: {max: "2000-W01", value: "2000-W12"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
|
||||
{conditions: {max: "9999-W01", value: "10000-W01"}, expected: true, name: "[target] The value attribute is greater than max attribute(Year is 10000 should be valid)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {max: "", value: "12:00:00"}, expected: false, name: "[target] The max attribute is not set"},
|
||||
{conditions: {max: "12:00:00", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {max: "12.00.00", value: "12:00:01"}, expected: false, name: "[target] The max attribute is an invalid time string"},
|
||||
{conditions: {max: "12:00:00", value: "12.00.01"}, expected: false, name: "[target] The value attribute is an invalid time string"},
|
||||
{conditions: {max: "23:59:59", value: "24:00:00"}, expected: false, name: "[target] The value attribute is an invalid time string(hour is greater than 23)"},
|
||||
{conditions: {max: "23:59:59", value: "23:60:00"}, expected: false, name: "[target] The value attribute is an invalid time string(minute is greater than 59)"},
|
||||
{conditions: {max: "23:59:59", value: "23:59:60"}, expected: false, name: "[target] The value attribute is an invalid time string(second is greater than 59)"},
|
||||
{conditions: {max: "13:00:00", value: "12:00:00"}, expected: false, name: "[target] The max attribute is greater than value attribute"},
|
||||
{conditions: {max: "12:00:00", value: "13"}, expected: false, name: "[target] The time missing second and minute parts is invalid"},
|
||||
{conditions: {max: "12:00:00", value: "12:00:02"}, expected: true, name: "[target] The value attribute is greater than max attribute"},
|
||||
{conditions: {max: "12:00:00.1", value: "12:00:00.2"}, expected: true, name: "[target] The value is greater than max(with millisecond in 1 digit)"},
|
||||
{conditions: {max: "12:00:00.01", value: "12:00:00.02"}, expected: true, name: "[target] The value is greater than max(with millisecond in 2 digit)"},
|
||||
{conditions: {max: "12:00:00.001", value: "12:00:00.002"}, expected: true, name: "[target] The value is greater than max(with millisecond in 3 digit)"},
|
||||
{conditions: {max: "12:00:00", value: "12:01"}, expected: true, name: "[target] The time missing second part is valid"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {max: "", value: "10"}, expected: false, name: "[target] The max attribute is not set"},
|
||||
{conditions: {max: "5", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {max: "5", value: "4"}, expected: false, name: "[target] The max is greater than value(integer)"},
|
||||
{conditions: {max: "-5.5", value: "-5.6"}, expected: false, name: "[target] The max is greater than value(floating number)"},
|
||||
{conditions: {max: "-0", value: "0"}, expected: false, name: "[target] The max equals to value"},
|
||||
{conditions: {max: "5", value: "1abc"}, expected: false, name: "[target] The value is not a number"},
|
||||
{conditions: {max: "5", value: "6"}, expected: true, name: "[target] The value is greater than max(integer)"},
|
||||
{conditions: {max: "-5.5", value: "-5.4"}, expected: true, name: "[target] The value is greater than max(floating number)"},
|
||||
{conditions: {max: "-5e-1", value: "5e+2"}, expected: true, name: "[target] The value is greater than max(scientific notation)"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "rangeOverflow");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.rangeUnderflow</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-rangeunderflow">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {min: "", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] The min attribute is not set"},
|
||||
{conditions: {min: "2000-01-01T12:00:00Z", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {min: "2001-01-01 12:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] The min attribute is an invalid global date time string"},
|
||||
{conditions: {min: "2000-01-01T11:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] The min attribute is less than the value attribute"},
|
||||
{conditions: {min: "2001-01-01T23:59:59Z", value: "2000-01-01T24:00:00Z"}, expected: false, name: "[target] The value is an invalid datetime string(hour is greater than 23)"},
|
||||
{conditions: {min: "1980-01-01T12:00Z", value: "79-01-01T12:00Z"}, expected: false, name: "[target] The value is an invalid date time string(year is two digits)"},
|
||||
{conditions: {min: "2000-01-01T13:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: true, name: "[target] The value is less than min"},
|
||||
{conditions: {min: "2000-01-01T12:00:00.2Z", value: "2000-01-01T12:00:00.1Z"}, expected: true, name: "[target] The value is less than min(with millisecond in 1 digit)"},
|
||||
{conditions: {min: "2000-01-01T12:00:00.02Z", value: "2000-01-01T12:00:00.01Z"}, expected: true, name: "[target] The value is less than min(with millisecond in 2 digits)"},
|
||||
{conditions: {min: "2000-01-01T12:00:00.002Z", value: "2000-01-01T12:00:00.001Z"}, expected: true, name: "[target] The value is less than min(with millisecond in 3 digits)"},
|
||||
{conditions: {min: "10000-01-01T12:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: true, name: "[target] The value is less than min(Year is 10000 should be valid)"},
|
||||
{conditions: {min: "8593-01-01T02:09+02:09", value: "8592-01-01T02:09+02:09"}, expected: true, name: "[target] The value is greater than max(with timezone)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {min: "", value: "2000-01-01"}, expected: false, name: "[target] The min attribute is not set"},
|
||||
{conditions: {min: "2000-01-01", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {min: "2001/01/01", value: "2000-01-01"}, expected: false, name: "[target] The min attribute is an invalid date"},
|
||||
{conditions: {min: "2000-02-02", value: "2000-1-1"}, expected: false, name: "[target] The value attribute is an invalid date"},
|
||||
{conditions: {min: "988-01-01", value: "987-01-01"}, expected: false, name: "[target] The value is an invalid date(year is three digits)"},
|
||||
{conditions: {min: "2001-01-01", value: "2000-13-01"}, expected: false, name: "[target] The value is an invalid date(month is less than 12)"},
|
||||
{conditions: {min: "2001-01-01", value: "2000-02-30"}, expected: false, name: "[target] The value is an invalid date(date is less than 29 for Feb)"},
|
||||
{conditions: {min: "2000-01-01", value: "2000-12-01"}, expected: false, name: "[target] The min attribute is less than value attribute"},
|
||||
{conditions: {min: "2000-12-01", value: "2000-01-01"}, expected: true, name: "[target] The value attribute is less than min attribute"},
|
||||
{conditions: {min: "10000-01-01", value: "9999-01-01"}, expected: true, name: "[target] The value attribute is less than min attribute(Year is 10000 should be valid)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {min: "", value: "2000-01"}, expected: false, name: "[target] The min attribute is not set"},
|
||||
{conditions: {min: "2000-01", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {min: "2001/01", value: "2000-02"}, expected: false, name: "[target] The min attribute is an invalid month string"},
|
||||
{conditions: {min: "2000-02", value: "2000-1"}, expected: false, name: "[target] The value attribute is an invalid month string"},
|
||||
{conditions: {min: "988-01", value: "987-01"}, expected: false, name: "[target] The value is an invalid month string(year is three digits)"},
|
||||
{conditions: {min: "2001-01", value: "2000-13"}, expected: false, name: "[target] The value is an invalid month string(month is less than 12)"},
|
||||
{conditions: {min: "2000-01", value: "2000-12"}, expected: false, name: "[target] The min attribute is less than value attribute"},
|
||||
{conditions: {min: "2001-01", value: "2000-12"}, expected: true, name: "[target] The value attribute is less than min attribute"},
|
||||
{conditions: {min: "10000-01", value: "2000-01"}, expected: true, name: "[target] The value attribute is less than min attribute(Year is 10000 should be valid)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {min: "", value: "2000-W01"}, expected: false, name: "[target] The min attribute is not set"},
|
||||
{conditions: {min: "2000-W01", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {min: "2001/W02", value: "2000-W01"}, expected: false, name: "[target] The min attribute is an invalid week string"},
|
||||
{conditions: {min: "2001-W02", value: "2000-W1"}, expected: false, name: "[target] The value attribute is an invalid week string"},
|
||||
{conditions: {min: "2001-W02", value: "2000-w01"}, expected: false, name: "[target] The value attribute is an invalid week string(w is in lowercase)"},
|
||||
{conditions: {min: "988-W01", value: "987-W01"}, expected: false, name: "[target] The value is an invalid week string(year is three digits)"},
|
||||
{conditions: {min: "2001-W01", value: "2000-W57"}, expected: false, name: "[target] The value is an invalid week string(week is too greater)"},
|
||||
{conditions: {min: "2000-W01", value: "2000-W12"}, expected: false, name: "[target] The min attribute is less than value attribute"},
|
||||
{conditions: {min: "2000-W12", value: "2000-W01"}, expected: true, name: "[target] The value attribute is less than min attribute"},
|
||||
{conditions: {min: "10000-W01", value: "2000-W01"}, expected: true, name: "[target] The value attribute is less than min attribute(Year is 10000 should be valid)"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {min: "", value: "12:00:00"}, expected: false, name: "[target] The min attribute is not set"},
|
||||
{conditions: {min: "12:00:00", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {min: "12.00.01", value: "12:00:00"}, expected: false, name: "[target] The min attribute is an invalid time string"},
|
||||
{conditions: {min: "12:00:01", value: "12.00.00"}, expected: false, name: "[target] The value attribute is an invalid time string"},
|
||||
{conditions: {min: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] The min attribute is less than value attribute"},
|
||||
{conditions: {min: "13:00:00", value: "12"}, expected: false, name: "[target] The time missing second and minute parts is invalid"},
|
||||
{conditions: {min: "12:00:02", value: "12:00:00"}, expected: true, name: "[target] The value attribute is less than min attribute"},
|
||||
{conditions: {min: "12:00:00.2", value: "12:00:00.1"}, expected: true, name: "[target] The value is less than min(with millisecond in 1 digit)"},
|
||||
{conditions: {min: "12:00:00.02", value: "12:00:00.01"}, expected: true, name: "[target] The value is less than min(with millisecond in 2 digit)"},
|
||||
{conditions: {min: "12:00:00.002", value: "12:00:00.001"}, expected: true, name: "[target] The value is less than min(with millisecond in 3 digit)"},
|
||||
{conditions: {min: "12:00:00", value: "11:59"}, expected: true, name: "[target] The time missing second part is valid"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {min: "", value: "10"}, expected: false, name: "[target] The min attribute is not set"},
|
||||
{conditions: {min: "5", value: ""}, expected: false, name: "[target] Value is empty string"},
|
||||
{conditions: {min: "4", value: "5"}, expected: false, name: "[target] The min is less than value(integer)"},
|
||||
{conditions: {min: "-5.6", value: "-5.5"}, expected: false, name: "[target] The min is less than value(floating number)"},
|
||||
{conditions: {min: "0", value: "-0"}, expected: false, name: "[target] The min equals to value"},
|
||||
{conditions: {min: "5", value: "6abc"}, expected: false, name: "[target] The value is not a number"},
|
||||
{conditions: {min: "6", value: "5"}, expected: true, name: "[target] The value is less than min(integer)"},
|
||||
{conditions: {min: "-5.4", value: "-5.5"}, expected: true, name: "[target] The value is less than min(floating number)"},
|
||||
{conditions: {min: "5e+2", value: "-5e-1"}, expected: true, name: "[target] The value is less than min(scientific notation)"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "rangeUnderflow");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.patternMismatch</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-stepmismatch">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
//set step = 2 * default step * factor
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "2000-01-01T12:58Z"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "2000-01-01T12:59Z"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "2000-01-01"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 1 * 86400000, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 1 * 86400000, value: "1970-01-02"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 1 * 86400000, value: "1970-01-03"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "2000-01"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 1 * 1, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "1970-03"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "1970-04"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "1970-W01"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 1 * 604800000, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 1 * 604800000, value: "1970-W03"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 1 * 604800000, value: "1970-W04"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "12:00:00"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "12:02:00"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime-local"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "2000-01-01T12:00:00"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "1970-01-01T12:02:00"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "1970-01-01T12:03:00"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {step: "", value: "1"}, expected: false, name: "[target] The step attribute is not set"},
|
||||
{conditions: {step: 2 * 1 * 1, value: ""}, expected: false, name: "[target] The value attibute is empty string"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "2"}, expected: false, name: "[target] The value must match the step"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "3"}, expected: true, name: "[target] The value must mismatch the step"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "stepMismatch");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.tooLong</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-toolong">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "url", "email", "password"],
|
||||
testData: [ // Non-dirty value
|
||||
{conditions: {maxLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - maxlength is not set"},
|
||||
{conditions: {maxLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
|
||||
{conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of value is less than maxlength"},
|
||||
{conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to maxlength"},
|
||||
{conditions: {maxLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than maxlength"},
|
||||
//Dirty value
|
||||
{conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Dirty value - value is less than maxlength", dirty: true},
|
||||
{conditions: {maxLength: "4", value: "\u0041\u0041\u0041"}, expected: false, name: "[target] Dirty value - length of value(AAA) in unicode is less than maxlength", dirty: true},
|
||||
{conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - value equals to maxlength", dirty: true},
|
||||
{conditions: {maxLength: "4", value: "abcde"}, expected: true, name: "[target] Dirty value - length of value is greater than maxlength", dirty: true}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {maxLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - maxlength is not set"},
|
||||
{conditions: {maxLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
|
||||
{conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of value is less than maxlength"},
|
||||
{conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to maxlength"},
|
||||
{conditions: {maxLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than maxlength"},
|
||||
//Dirty value
|
||||
{conditions: {maxLength: "4", value: "abc"}, expected: false, name: "[target] Dirty value - value is less than maxlength", dirty: true},
|
||||
{conditions: {maxLength: "4", value: "\u000D\u000A"}, expected: false, name: "[target] Dirty value - length of value(LF, CRLF) in unicode is less than maxlength", dirty: true},
|
||||
{conditions: {maxLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - length of value equals to maxlength", dirty: true},
|
||||
{conditions: {maxLength: "4", value: "abcde"}, expected: true, name: "[target] Dirty value - length of value is greater than maxlength", dirty: true}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test (testElements, "tooLong");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.tooShort</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#suffering-from-being-too-short">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "url", "email", "password"],
|
||||
testData: [
|
||||
// Non-dirty value
|
||||
{conditions: {minLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - minLength is not set"},
|
||||
{conditions: {minLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
|
||||
{conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than minLength"},
|
||||
{conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to minLength"},
|
||||
{conditions: {minLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of value is less than minLength"},
|
||||
//Dirty value
|
||||
{conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Dirty value - value is greater than minLength", dirty: true},
|
||||
{conditions: {minLength: "4", value: "\u0041\u0041\u0041\u0041\u0041"}, expected: false, name: "[target] Dirty value - length of value(AAAAA) in unicode is greater than minLength", dirty: true},
|
||||
{conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - value equals to minLength", dirty: true},
|
||||
{conditions: {minLength: "4", value: "abc"}, expected: true, name: "[target] Dirty value - length of value is less than minLength", dirty: true}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
// Non-dirty value
|
||||
{conditions: {minLength: "", value: "abc"}, expected: false, name: "[target] Non-dirty value - minLength is no set"},
|
||||
{conditions: {minLength: "4", value: ""}, expected: false, name: "[target] Non-dirty value - value is empty string"},
|
||||
{conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Non-dirty value - length of value is greater than minLength"},
|
||||
{conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Non-dirty value - length of value equals to minLength"},
|
||||
{conditions: {minLength: "4", value: "abc"}, expected: false, name: "[target] Non-dirty value - length of length of value is greater than minLength"},
|
||||
//Dirty value
|
||||
{conditions: {minLength: "4", value: "abcde"}, expected: false, name: "[target] Dirty value - value is less than minLength", dirty: true},
|
||||
{conditions: {minLength: "4", value: "\u000D\u000A\u000D\u000A\u000D\u000A"}, expected: false, name: "[target] Dirty value - length of value(LF, CRLF) in unicode is less than minLength", dirty: true},
|
||||
{conditions: {minLength: "4", value: "abcd"}, expected: false, name: "[target] Dirty value - length of value equals to minLength", dirty: true},
|
||||
{conditions: {minLength: "4", value: "abc"}, expected: true, name: "[target] Dirty value - length of value is greater than minLength", dirty: true}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test (testElements, "tooShort");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.typeMismatch</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-typemismatch">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["email"],
|
||||
testData: [
|
||||
// multiple is false
|
||||
{conditions: {multiple: false, value: ""}, expected: false, name: "[target] The value is empty"},
|
||||
{conditions: {multiple: false, value: "test@example.com"}, expected: false, name: "[target] The value is a valid email address"},
|
||||
{conditions: {multiple: false, value: "\u000A\u000D\u0020\u0009 test@example.com \u000A\u000D\u0020\u0009"}, expected: false, name: "[target] The value is a valid email address with some white spaces."},
|
||||
{conditions: {multiple: false, value: "abc"}, expected: true, name: "[target] The value is not an email address"},
|
||||
{conditions: {multiple: false, value: "test1@example.com,test2@example.com"}, expected: true, name: "[target] The value contains multiple email addresses"},
|
||||
//multiple is true
|
||||
{conditions: {multiple: true, value: "test1@example.com,test2@example.com"}, expected: false, name: "[target] The value is valid email addresses"},
|
||||
{conditions: {multiple: true, value: "test1@example.com;test2@example.com"}, expected: true, name: "[target] The value contains invalid separator"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["url"],
|
||||
testData: [
|
||||
{conditions: {multiple: false, value: ""}, expected: false, name: "[target] The value is empty"},
|
||||
{conditions: {multiple: false, value: "http://www.example.com"}, expected: false, name: "[target] The value is a valid url"},
|
||||
{conditions: {multiple: false, value: "\u000A\u000D\u0020\u0009 http://www.example.com \u000A\u000D\u0020\u0009 "}, expected: false, name: "[target] The value is a valid url with some white spaces."},
|
||||
{conditions: {multiple: false, value: "abc"}, expected: true, name: "[target] The value is not an url"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "typeMismatch");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,133 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.valid</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valid">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "password"],
|
||||
testData: [
|
||||
{conditions: {maxLength: "4", value: "abcdef"}, expected: false, name: "[target] validity.valid must be false if validity.tooLong is true", dirty: true},
|
||||
{conditions: {pattern: "[A-Z]", value: "abc"}, expected: false, name: "[target] validity.valid must be false if validity.patternMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["url"],
|
||||
testData: [
|
||||
{conditions: {maxLength: "20", value: "http://www.example.com"}, expected: false, name: "[target] validity.valid must be false if validity.tooLong is true", dirty: true},
|
||||
{conditions: {pattern: "http://www.example.com", value: "http://www.example.net"}, expected: false, name: "[target] validity.valid must be false if validity.patternMismatch is true"},
|
||||
{conditions: {value: "abc"}, expected: false, name: "[target] validity.valid must be false if validity.typeMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["email"],
|
||||
testData: [
|
||||
{conditions: {maxLength: "10", value: "test@example.com"}, expected: false, name: "[target] validity.valid must be false if validity.tooLong is true", dirty: true},
|
||||
{conditions: {pattern: "test@example.com", value: "test@example.net"}, expected: false, name: "[target] validity.valid must be false if validity.patternMismatch is true"},
|
||||
{conditions: {value: "abc"}, expected: false, name: "[target] validity.valid must be false if validity.typeMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {max: "2000-01-01T12:00:00Z", value: "2001-01-01T12:00:00Z"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
|
||||
{conditions: {min: "2001-01-01T12:00:00Z", value: "2000-01-01T12:00:00Z"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "2001-01-01T12:03:00Z"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {max: "2000-01-01", value: "2001-01-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
|
||||
{conditions: {min: "2001-01-01", value: "2000-01-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
|
||||
{conditions: {step: 2 * 1 * 86400000, value: "2000-01-03"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {max: "2000-01", value: "2001-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
|
||||
{conditions: {min: "2001-01", value: "2000-01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "2001-03"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {max: "2000-W01", value: "2001-W01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
|
||||
{conditions: {min: "2001-W01", value: "2000-W01"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
|
||||
{conditions: {step: 2 * 1 * 604800000, value: "2001-W03"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {max: "12:00:00", value: "13:00:00"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
|
||||
{conditions: {min: "12:00:00", value: "11:00:00"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
|
||||
{conditions: {step: 2 * 60 * 1000, value: "12:03:00"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {max: "5", value: "6"}, expected: false, name: "[target] validity.valid must be false if validity.rangeOverflow is true"},
|
||||
{conditions: {min: "5", value: "4"}, expected: false, name: "[target] validity.valid must be false if validity.rangeUnderflow is true"},
|
||||
{conditions: {step: 2 * 1 * 1, value: "3"}, expected: false, name: "[target] validity.valid must be false if validity.stepMismatch is true"},
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["checkbox", "radio"],
|
||||
testData: [
|
||||
{conditions: {required: true, checked: false, name: "test1"}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["file"],
|
||||
testData: [
|
||||
{conditions: {required: true, files: null}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "select",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {required: true, value: ""}, expected: false, name: "[target] validity.valid must be false if validity.valueMissing is true"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "isValid");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.validity.valueMissing</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-validitystate-valuemissing">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "url", "email", "password"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "abc"}, expected: false, name: "[target] The value is not empty and required is true"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value is empty and required is true"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["datetime"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "2000-12-10T12:00:00Z"}, expected: false, name: "[target] Valid global date and time string(2000-12-10T12:00:00Z)"},
|
||||
{conditions: {required: true, value: "2000-12-10 12:00Z"}, expected: false, name: "[target] Valid global date and time string(2000-12-10 12:00Z)"},
|
||||
{conditions: {required: true, value: "1979-10-14T12:00:00.001-04:00"}, expected: false, name: "[target] Valid global date and time string(1979-10-14T12:00:00.001-04:00)"},
|
||||
{conditions: {required: true, value: "8592-01-01T02:09+02:09"}, expected: false, name: "[target] Valid global date and time string(8592-01-01T02:09+02:09)"},
|
||||
{conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
|
||||
{conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
|
||||
{conditions: {required: true, value: "1979-10-99 99:99Z"}, expected: true, name: "[target] Invalid global date and time string(1979-10-99 99:99Z)"},
|
||||
{conditions: {required: true, value: "1979-10-14 12:00:00"}, expected: true, name: "[target] Invalid global date and time string(1979-10-14 12:00:00)"},
|
||||
{conditions: {required: true, value: "2001-12-21 12:00Z"}, expected: true, name: "[target] Invalid global date and time string(2001-12-21 12:00Z)-two white space"},
|
||||
{conditions: {required: true, value: "abc"}, expected: true, name: "[target] the value attribute is a string(abc)"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["date"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "2000-12-10"}, expected: false, name: "[target] Valid date string(2000-12-10)"},
|
||||
{conditions: {required: true, value: "9999-01-01"}, expected: false, name: "[target] Valid date string(9999-01-01)"},
|
||||
{conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
|
||||
{conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
|
||||
{conditions: {required: true, value: "9999-99-99"}, expected: true, name: "[target] Invalid date string(9999-99-99)"},
|
||||
{conditions: {required: true, value: "37/01/01"}, expected: true, name: "[target] Invalid date string(37-01-01)"},
|
||||
{conditions: {required: true, value: "2000/01/01"}, expected: true, name: "[target] Invalid date string(2000/01/01)"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["month"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "2000-12"}, expected: false, name: "[target] Valid month string(2000-12)"},
|
||||
{conditions: {required: true, value: "9999-01"}, expected: false, name: "[target] Valid month string(9999-01)"},
|
||||
{conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
|
||||
{conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
|
||||
{conditions: {required: true, value: "2000-99"}, expected: true, name: "[target] Invalid month string(2000-99)"},
|
||||
{conditions: {required: true, value: "37-01"}, expected: true, name: "[target] Invalid month string(37-01)"},
|
||||
{conditions: {required: true, value: "2000/01"}, expected: true, name: "[target] Invalid month string(2000/01)"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["week"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "2000-W12"}, expected: false, name: "[target] Valid week string(2000-W12)"},
|
||||
{conditions: {required: true, value: "9999-W01"}, expected: false, name: "[target] Valid week string(9999-W01)"},
|
||||
{conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
|
||||
{conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a Date object"},
|
||||
{conditions: {required: true, value: "2000-W99"}, expected: true, name: "[target] Invalid week string(2000-W99)"},
|
||||
{conditions: {required: true, value: "2000-W00"}, expected: true, name: "[target] invalid week string(2000-W00)"},
|
||||
{conditions: {required: true, value: "2000-w01"}, expected: true, name: "[target] invalid week string(2000-w01)"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["time"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "12:00:00"}, expected: false, name: "[target] Validtime string(12:00:00)"},
|
||||
{conditions: {required: true, value: "12:00"}, expected: false, name: "[target] Validtime string(12:00)"},
|
||||
{conditions: {required: true, value: "12:00:00.001"}, expected: false, name: "[target] Valid time string(12:00:60.001)"},
|
||||
{conditions: {required: true, value: "12:00:00.01"}, expected: false, name: "[target] Valid time string(12:00:60.01)"},
|
||||
{conditions: {required: true, value: "12:00:00.1"}, expected: false, name: "[target] Valid time string(12:00:60.1)"},
|
||||
{conditions: {required: true, value: 1234567}, expected: true, name: "[target] The value attribute is a number(1234567)"},
|
||||
{conditions: {required: true, value: new Date()}, expected: true, name: "[target] The value attribute is a time object"},
|
||||
{conditions: {required: true, value: "25:00:00"}, expected: true, name: "[target] Invalid time string(25:00:00)"},
|
||||
{conditions: {required: true, value: "12:60:00"}, expected: true, name: "[target] Invalid time string(12:60:00)"},
|
||||
{conditions: {required: true, value: "12:00:60"}, expected: true, name: "[target] Invalid time string(12:00:60)"},
|
||||
{conditions: {required: true, value: "12:00:00:001"}, expected: true, name: "[target] Invalid time string(12:00:00:001)"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["number"],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "123"}, expected: false, name: "[target] Value is an integer with a leading symbol '+'"},
|
||||
{conditions: {required: true, value: "-123.45"}, expected: false, name: "[target] Value is a number with a '-' symbol"},
|
||||
{conditions: {required: true, value: "123.01e-10"}, expected: false, name: "[target] Value is a number in scientific notation form(e is in lowercase)"},
|
||||
{conditions: {required: true, value: "123.01E+10"}, expected: false, name: "[target] Value is a number in scientific notation form(E is in uppercase)"},
|
||||
{conditions: {required: true, value: "-0"}, expected: false, name: "[target] Value is -0"},
|
||||
{conditions: {required: true, value: " 123 "}, expected: true, name: "[target] Value is a number with some white spaces"},
|
||||
{conditions: {required: true, value: Math.pow(2, 1024)}, expected: true, name: "[target] Value is Math.pow(2, 1024)"},
|
||||
{conditions: {required: true, value: Math.pow(-2, 1024)}, expected: true, name: "[target] Value is Math.pow(-2, 1024)"},
|
||||
{conditions: {required: true, value: "abc"}, expected: true, name: "[target] Value is a string that can not be coverted to a number"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] The value attribute is empty string"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["checkbox", "radio"],
|
||||
testData: [
|
||||
{conditions: {required: false, checked: false, name: "test1"}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, checked: true, name: "test1"}, expected: false, name: "[target] The checked attribute is true"},
|
||||
{conditions: {required: true, checked: false, name: "test1"}, expected: true, name: "[target] The checked attribute is false"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "input",
|
||||
types: ["file"],
|
||||
testData: [
|
||||
{conditions: {required: false, files: null}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, files: null}, expected: true, name: "[target] The Files attribute is null"}
|
||||
//ToDo: Add a case to test the files is not null
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "select",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: 1}, expected: false, name: "[target] Selected the option with value equals to 1"},
|
||||
{conditions: {required: true, value: ""}, expected: true, name: "[target] Selected the option with value equals to empty"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {required: false, value: ""}, expected: false, name: "[target] The required attribute is not set"},
|
||||
{conditions: {required: true, value: "abc"}, expected: false, name: "[target] The value is not empty"},
|
||||
{conditions: {required: true, value: ""}, expected: true , name: "[target] The value is empty"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "valueMissing");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>The constraint validation API Test: element.willValidate</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-constraint-validation-api">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="support/validator.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var testElements = [
|
||||
//input in hidden, button and reset status must be barred from the constraint validation
|
||||
{
|
||||
tag: "input",
|
||||
types: ["hidden", "button", "reset"],
|
||||
testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
|
||||
},
|
||||
//button in button and reset status must be barred from the constraint validation
|
||||
{
|
||||
tag: "button",
|
||||
types: ["button", "reset"],
|
||||
testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
|
||||
},
|
||||
//FIELDSET, OUTPUT elements should not be barred from the constraint validation
|
||||
{
|
||||
tag: "fieldset",
|
||||
types: [],
|
||||
testData: [{conditions: {}, expected: true, name: "[target] Must not be barred from the constraint validation"}]
|
||||
},
|
||||
{
|
||||
tag: "output",
|
||||
types: [],
|
||||
testData: [{conditions: {}, expected: true, name: "[target] Must not be barred from the constraint validation"}]
|
||||
},
|
||||
//OBJECT, KEYGEN, elements must be barred from the constraint validation
|
||||
{
|
||||
tag: "object",
|
||||
types: [],
|
||||
testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
|
||||
},
|
||||
{
|
||||
tag: "keygen",
|
||||
types: [],
|
||||
testData: [{conditions: {}, expected: false, name: "[target] Must be barred from the constraint validation"}]
|
||||
},
|
||||
//If an element is disabled, it is barred from constraint validation.
|
||||
//The willValidate attribute must be true if an element is mutable
|
||||
//If the readonly attribute is specified on an INPUT element, the element is barred from constraint validation.
|
||||
{
|
||||
tag: "input",
|
||||
types: ["text", "search", "tel", "url", "email", "password", "datetime", "date", "month", "week", "time", "color", "file", "submit"],
|
||||
testData: [
|
||||
{conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is disabled"},
|
||||
{conditions: {disabled: false, readOnly: false}, expected: true, name: "[target] The willValidate attribute must be true if an elment is mutable"},
|
||||
{conditions: {readOnly: true}, expected: false, name: "[target] Must be barred from the constraint validation if it is readonly"},
|
||||
{conditions: {disabled: false, readOnly: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"},
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "button",
|
||||
types: ["submit"],
|
||||
testData: [
|
||||
{conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
|
||||
{conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an elment is mutable"},
|
||||
{conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "select",
|
||||
types: [],
|
||||
testData: [
|
||||
{conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
|
||||
{conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an elment is mutable"},
|
||||
{conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
|
||||
]
|
||||
},
|
||||
{
|
||||
tag: "textarea",
|
||||
types: [],
|
||||
testData: [,
|
||||
{conditions: {disabled: true}, expected: false, name: "[target] Must be barred from the constraint validation"},
|
||||
{conditions: {disabled: false}, expected: true, name: "[target] The willValidate attribute must be true if an elment is mutable"},
|
||||
{conditions: {disabled: false}, expected: false, name: "[target] The willValidate attribute must be false if it has a datalist ancestor", ancestor: "datalist"}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
validator.run_test(testElements, "willValidate");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>willValidate property on the input element</title>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
|
||||
<meta content="willValidate property on the input element" name="description">
|
||||
<link href="https://html.spec.whatwg.org/multipage/#dom-cva-willvalidate" rel="help">
|
||||
</head>
|
||||
<body>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<form action="http://www.example.com/" style="display : none">
|
||||
<input required="" type="text">
|
||||
<input disabled="" type="text">
|
||||
</form>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
test(function() {assert_true(document.getElementsByTagName("input")[0].willValidate)}, "willValidate property returns true when required attribute exists");
|
||||
test(function() {assert_false(document.getElementsByTagName("input")[1].willValidate)}, "willValidate property returns false when disabled attribute exists");
|
||||
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,369 @@
|
|||
var validator = {
|
||||
test_tooLong: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "tooLong");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.tooLong, "The validity.tooLong should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.tooLong, "The validity.tooLong should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_tooShort: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "tooShort");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.tooShort, "The validity.tooShort should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.tooShort, "The validity.tooShort should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_patternMismatch: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "patternMismatch");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.patternMismatch, "The validity.patternMismatch should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.patternMismatch, "The validity.patternMismatch should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_valueMissing: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "valueMissing");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.valueMissing, "The validity.valueMissing should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.valueMissing, "The validity.valueMissing should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_typeMismatch: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "typeMismatch");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.typeMismatch, "The validity.typeMismatch should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.typeMismatch, "The validity.typeMismatch should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_rangeOverflow: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "rangeOverflow");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.rangeOverflow, "The validity.rangeOverflow should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.rangeOverflow, "The validity.rangeOverflow should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_rangeUnderflow: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "rangeUnderflow");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.rangeUnderflow, "The validity.rangeUnderflow should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.rangeUnderflow, "The validity.rangeUnderflow should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_stepMismatch: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "stepMismatch");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.stepMismatch, "The validity.stepMismatch should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.stepMismatch, "The validity.stepMismatch should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_badInput: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "badInput");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.badInput, "The validity.badInput should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.badInput, "The validity.badInput should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_customError: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "customError");
|
||||
ctl.setCustomValidity(data.conditions.message);
|
||||
|
||||
if (data.expected) {
|
||||
assert_true(ctl.validity.customError, "The validity.customError attribute should be true.");
|
||||
assert_equals(ctl.validationMessage, data.conditions.message,
|
||||
"The validationMessage attribute should be '" + data.conditions.message + "'.");
|
||||
} else {
|
||||
assert_false(ctl.validity.customError, "The validity.customError attribute should be false.");
|
||||
assert_equals(ctl.validationMessage, "", "The validationMessage attribute must be empty.");
|
||||
}
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_isValid: function (ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.validity.valid, "The validity.valid should be true.");
|
||||
else
|
||||
assert_false(ctl.validity.valid, "The validity.valid should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_willValidate: function(ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
self.pre_check(ctl, "willValidate");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.ancestor) {
|
||||
var dl = document.createElement("datalist");
|
||||
dl.appendChild(ctl);
|
||||
}
|
||||
|
||||
if (data.expected)
|
||||
assert_true(ctl.willValidate, "The willValidate attribute should be true.");
|
||||
else
|
||||
assert_false(ctl.willValidate, "The willValidate attribute should be false.");
|
||||
}, data.name);
|
||||
},
|
||||
|
||||
test_checkValidity: function (ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
var eventFired = false;
|
||||
self.pre_check(ctl, "checkValidity");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl);
|
||||
|
||||
on_event(ctl, "invalid", function(e){
|
||||
assert_equals(e.type, "invalid", "The invalid event should be fired.");
|
||||
eventFired = true;
|
||||
});
|
||||
|
||||
if (data.expected) {
|
||||
assert_true(ctl.checkValidity(), "The checkValidity method should be true.");
|
||||
assert_false(eventFired, "The invalid event should not be fired.");
|
||||
} else {
|
||||
assert_false(ctl.checkValidity(), "The checkValidity method should be false.");
|
||||
assert_true(eventFired, "The invalid event should be fired.");
|
||||
}
|
||||
}, data.name);
|
||||
|
||||
test(function () {
|
||||
var fm = document.createElement("form");
|
||||
var ctl2 = ctl.cloneNode(true);
|
||||
|
||||
self.pre_check(ctl, "checkValidity");
|
||||
self.set_conditions(ctl2, data.conditions);
|
||||
fm.appendChild(ctl2);
|
||||
document.body.appendChild(fm);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl2);
|
||||
|
||||
var result = fm.checkValidity();
|
||||
document.body.removeChild(fm);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(result, "The checkValidity method of the element's form owner should return true.");
|
||||
else
|
||||
assert_false(result, "The checkValidity method of the element's form owner should return false.");
|
||||
}, data.name + " (in a form)");
|
||||
},
|
||||
|
||||
test_reportValidity: function (ctl, data) {
|
||||
var self = this;
|
||||
test(function () {
|
||||
var eventFired = false;
|
||||
|
||||
self.pre_check(ctl, "reportValidity");
|
||||
self.set_conditions(ctl, data.conditions);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl);
|
||||
|
||||
on_event(ctl, "invalid", function(e){
|
||||
assert_equals(e.type, "invalid", "The invalid event should be fired.");
|
||||
eventFired = true;
|
||||
});
|
||||
|
||||
if (data.expected) {
|
||||
assert_true(ctl.reportValidity(), "The reportValidity method should be true.");
|
||||
assert_false(eventFired, "The invalid event should not be fired.");
|
||||
} else {
|
||||
assert_true(eventFired, "The invalid event should be fired.");
|
||||
assert_false(ctl.reportValidity(), "The reportValidity method should be false.");
|
||||
}
|
||||
}, data.name);
|
||||
|
||||
test(function () {
|
||||
var fm = document.createElement("form");
|
||||
var ctl2 = ctl.cloneNode(true);
|
||||
|
||||
self.pre_check(ctl, "reportValidity");
|
||||
self.set_conditions(ctl2, data.conditions);
|
||||
fm.appendChild(ctl2);
|
||||
document.body.appendChild(fm);
|
||||
if (data.dirty)
|
||||
self.set_dirty(ctl2);
|
||||
|
||||
var result = fm.reportValidity();
|
||||
document.body.removeChild(fm);
|
||||
|
||||
if (data.expected)
|
||||
assert_true(result, "The reportValidity method of the element's form owner should return true.");
|
||||
else
|
||||
assert_false(result, "The reportValidity method of the element's form owner should return false.");
|
||||
}, data.name + " (in a form)");
|
||||
},
|
||||
|
||||
test_support_type: function (ctl, typ, testName) {
|
||||
test(function () {
|
||||
assert_equals(ctl.type, typ, "The " + typ + " type should be supported.");
|
||||
}, testName);
|
||||
},
|
||||
|
||||
set_conditions: function (ctl, obj) {
|
||||
["required", "pattern", "step", "max", "min", "maxlength",
|
||||
"value", "multiple", "checked", "selected"].forEach(function(item) {
|
||||
ctl.removeAttribute(item);
|
||||
});
|
||||
for (var attr in obj) {
|
||||
if (obj[attr] || obj[attr] === "")
|
||||
ctl[attr] = obj[attr];
|
||||
}
|
||||
},
|
||||
|
||||
set_dirty: function(ctl) {
|
||||
document.disgnMode = "on";
|
||||
ctl.focus();
|
||||
var old_value = ctl.value;
|
||||
ctl.value = "a";
|
||||
ctl.value = old_value;
|
||||
ctl.setSelectionRange(ctl.value.length, ctl.value.length);
|
||||
document.execCommand("Delete");
|
||||
document.disgnMode = "off";
|
||||
},
|
||||
|
||||
pre_check: function(ctl, item) {
|
||||
switch (item) {
|
||||
case "willValidate":
|
||||
assert_true(item in ctl, "The " + item + " attribute doesn't exist.");
|
||||
break;
|
||||
case "checkValidity":
|
||||
case "reportValidity":
|
||||
assert_true(item in ctl, "The " + item + " method doesn't exist.");
|
||||
break;
|
||||
case "tooLong":
|
||||
case "tooShort":
|
||||
case "patternMismatch":
|
||||
case "typeMismatch":
|
||||
case "stepMismatch":
|
||||
case "rangeOverflow":
|
||||
case "rangeUnderflow":
|
||||
case "valueMissing":
|
||||
case "badInput":
|
||||
case "valid":
|
||||
assert_true("validity" in ctl, "The validity attribute doesn't exist.");
|
||||
assert_true(item in ctl.validity, "The " + item + " attribute doesn't exist.");
|
||||
break;
|
||||
case "customError":
|
||||
assert_true("validity" in ctl, "The validity attribute doesn't exist.");
|
||||
assert_true("setCustomValidity" in ctl, "The validity attribute doesn't exist.");
|
||||
assert_true("validationMessage" in ctl, "The validity attribute doesn't exist.");
|
||||
assert_true(item in ctl.validity, "The " + item + " attribute doesn't exist.");
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
run_test: function (testee, method) {
|
||||
var testMethod = "test_" + method;
|
||||
if (typeof this[testMethod] !== "function") {
|
||||
return false;
|
||||
}
|
||||
|
||||
var ele = null,
|
||||
prefix = "";
|
||||
|
||||
for (var i = 0; i < testee.length; i++) {
|
||||
if (testee[i].types.length > 0) {
|
||||
for (var typ in testee[i].types) {
|
||||
ele = document.createElement(testee[i].tag);
|
||||
document.body.appendChild(ele);
|
||||
try {
|
||||
ele.type = testee[i].types[typ];
|
||||
} catch (e) {
|
||||
//Do nothing, avoid the runtime error breaking the test
|
||||
}
|
||||
|
||||
prefix = "[" + testee[i].tag.toUpperCase() + " in " + testee[i].types[typ].toUpperCase() + " status] ";
|
||||
if (ele.type != testee[i].types[typ]) {
|
||||
this.test_support_type(
|
||||
ele,
|
||||
testee[i].types[typ],
|
||||
prefix + "The " + testee[i].types[typ] + " type must be supported."
|
||||
);
|
||||
continue;
|
||||
}
|
||||
|
||||
for (var j = 0; j < testee[i].testData.length; j++) {
|
||||
testee[i].testData[j].name = testee[i].testData[j].name.replace(/\[.*\]\s/g, prefix);
|
||||
this[testMethod](ele, testee[i].testData[j]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ele = document.createElement(testee[i].tag);
|
||||
document.body.appendChild(ele);
|
||||
prefix = "[" + testee[i].tag + "] ";
|
||||
|
||||
if (testElements[i].tag === "select") {
|
||||
ele.add(new Option("test1", ""));
|
||||
ele.add(new Option("test2", 1));
|
||||
}
|
||||
|
||||
for (var item in testee[i].testData) {
|
||||
testee[i].testData[item].name = testee[i].testData[item].name.replace("[target]", prefix);
|
||||
this[testMethod](ele, testee[i].testData[item]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
[
|
||||
{
|
||||
"id": "a-form-control-s-value",
|
||||
"original_id": "a-form-control's-value"
|
||||
},
|
||||
{
|
||||
"id": "mutability",
|
||||
"original_id": "mutability"
|
||||
},
|
||||
{
|
||||
"id": "association-of-controls-and-forms",
|
||||
"original_id": "association-of-controls-and-forms"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>HTMLInputElement#form</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form id="form">
|
||||
<p><button id="button">button</button>
|
||||
<p><fieldset id="fieldset">fieldset</fieldset>
|
||||
<p><input id="input">
|
||||
<p><keygen id="keygen">
|
||||
<p><label id="label">label</label>
|
||||
<p><object id="object">object</object>
|
||||
<p><output id="output">output</output>
|
||||
<p><select id="select"><option>select</option></select>
|
||||
<p><textarea id="textarea">textarea</textarea>
|
||||
</form>
|
||||
<script>
|
||||
var form;
|
||||
setup(function() {
|
||||
form = document.getElementById("form");
|
||||
if (!form) {
|
||||
throw new TypeError("Didn't find form");
|
||||
}
|
||||
});
|
||||
|
||||
var reassociateableElements = [
|
||||
"button",
|
||||
"fieldset",
|
||||
"input",
|
||||
"keygen",
|
||||
"label",
|
||||
"object",
|
||||
"output",
|
||||
"select",
|
||||
"textarea",
|
||||
];
|
||||
|
||||
reassociateableElements.forEach(function(localName) {
|
||||
test(function() {
|
||||
var button = document.getElementById(localName);
|
||||
assert_equals(button.form, form);
|
||||
}, localName + ".form");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
[
|
||||
{
|
||||
"id": "introduction-2",
|
||||
"original_id": "introduction-2"
|
||||
},
|
||||
{
|
||||
"id": "implicit-submission",
|
||||
"original_id": "implicit-submission"
|
||||
},
|
||||
{
|
||||
"id": "form-submission-algorithm",
|
||||
"original_id": "form-submission-algorithm"
|
||||
},
|
||||
{
|
||||
"id": "constructing-form-data-set",
|
||||
"original_id": "constructing-form-data-set"
|
||||
},
|
||||
{
|
||||
"id": "url-encoded-form-data",
|
||||
"original_id": "url-encoded-form-data"
|
||||
},
|
||||
{
|
||||
"id": "multipart-form-data",
|
||||
"original_id": "multipart-form-data"
|
||||
},
|
||||
{
|
||||
"id": "plain-text-form-data",
|
||||
"original_id": "plain-text-form-data"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
[
|
||||
{
|
||||
"id": "writing-a-form-s-user-interface",
|
||||
"original_id": "writing-a-form's-user-interface"
|
||||
},
|
||||
{
|
||||
"id": "implementing-the-server-side-processing-for-a-form",
|
||||
"original_id": "implementing-the-server-side-processing-for-a-form"
|
||||
},
|
||||
{
|
||||
"id": "configuring-a-form-to-communicate-with-a-server",
|
||||
"original_id": "configuring-a-form-to-communicate-with-a-server"
|
||||
},
|
||||
{
|
||||
"id": "client-side-form-validation",
|
||||
"original_id": "client-side-form-validation"
|
||||
},
|
||||
{
|
||||
"id": "enabling-client-side-automatic-filling-of-form-controls",
|
||||
"original_id": "enabling-client-side-automatic-filling-of-form-controls"
|
||||
},
|
||||
{
|
||||
"id": "improving-the-user-experience-on-mobile-devices",
|
||||
"original_id": "improving-the-user-experience-on-mobile-devices"
|
||||
},
|
||||
{
|
||||
"id": "the-difference-between-the-field-type-the-autofill-field-name-and-the-input-modality",
|
||||
"original_id": "the-difference-between-the-field-type,-the-autofill-field-name,-and-the-input-modality"
|
||||
},
|
||||
{
|
||||
"id": "input-author-notes",
|
||||
"original_id": "input-author-notes"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML Test: Resetting a form</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#concept-form-reset">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#category-reset">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form name="fm1" style="display:none">
|
||||
<input value="abc" id="ipt1" />
|
||||
<input id="ipt2" />
|
||||
<input type="radio" id="rd1" checked="checked" />
|
||||
<input type="radio" id="rd2"/>
|
||||
<input type="checkbox" id="cb1" checked="checked" />
|
||||
<input type="checkbox" id="cb2" />
|
||||
<textarea id="ta">abc</textarea>
|
||||
<!--<keygen id="kg"></keygen>-->
|
||||
<output id="opt">5</output>
|
||||
<select id="slt1">
|
||||
<option value="1">ITEM1</option>
|
||||
<option value="2">ITEM2</option>
|
||||
</select>
|
||||
<select id="slt2">
|
||||
<option value="1">ITEM1</option>
|
||||
<option value="2" selected>ITEM2</option>
|
||||
</select>
|
||||
<select id="slt3" multiple>
|
||||
<option value="1">ITEM1</option>
|
||||
<option value="2" selected>ITEM2</option>
|
||||
<option value="3" selected>ITEM3</option>
|
||||
</select>
|
||||
<button id="rst1" type="reset">Reset1</button>
|
||||
<input id="rst2" type="reset" value="Reset2" />
|
||||
</form>
|
||||
<script>
|
||||
|
||||
runTest(function() {
|
||||
document.forms.fm1.reset();
|
||||
}, "by calling the reset() method");
|
||||
|
||||
runTest(function() {
|
||||
document.getElementById("rst1").click();
|
||||
}, "by clicking the button in reset status");
|
||||
|
||||
runTest(function() {
|
||||
document.getElementById("rst2").click();
|
||||
}, "by clicking the input in reset status");
|
||||
|
||||
function setPreconditions (arg) {
|
||||
document.getElementById("ipt1").value = "123";
|
||||
document.getElementById("ipt2").value = "123";
|
||||
document.getElementById("rd1").checked = false;
|
||||
document.getElementById("rd2").checked = true;
|
||||
document.getElementById("cb1").checked = false;
|
||||
document.getElementById("cb2").checked = true;
|
||||
document.getElementById("ta").value = "123";
|
||||
document.getElementById("opt").textContent = "abc";
|
||||
document.getElementById("slt1").value = "2";
|
||||
document.getElementById("slt2").value = "1";
|
||||
document.getElementById("slt3").options[0].selected = true;
|
||||
document.getElementById("slt3").options[1].selected = false;
|
||||
document.getElementById("slt3").options[2].selected = false;
|
||||
|
||||
assert_equals(document.getElementById("ipt1").value, "123", "Precondition 1");
|
||||
assert_equals(document.getElementById("ipt2").value, "123", "Precondition 2");
|
||||
assert_false(document.getElementById("rd1").checked, "Precondition 3");
|
||||
assert_true(document.getElementById("rd2").checked, "Precondition 4");
|
||||
assert_false(document.getElementById("cb1").checked, "Precondition 5");
|
||||
assert_true(document.getElementById("cb2").checked, "Precondition 6");
|
||||
assert_equals(document.getElementById("ta").value, "123", "Precondition 17");
|
||||
assert_equals(document.getElementById("opt").textContent, "abc", "Precondition 8");
|
||||
assert_true(document.getElementById("slt1").options[1].selected, "Precondition 9");
|
||||
assert_true(document.getElementById("slt2").options[0].selected, "Precondition 10");
|
||||
assert_true(document.getElementById("slt3").options[0].selected, "Precondition 11");
|
||||
assert_false(document.getElementById("slt3").options[1].selected, "Precondition 12");
|
||||
assert_false(document.getElementById("slt3").options[2].selected, "Precondition 13");
|
||||
}
|
||||
|
||||
function runTest(reset, description) {
|
||||
test(function() {
|
||||
setPreconditions("Setting preconditions for resetting " + description);
|
||||
reset();
|
||||
assert_equals(document.getElementById("ipt1").value, "abc", "The value of the input element in text status should be 'abc'.");
|
||||
assert_equals(document.getElementById("ipt2").value, "", "The value of the input element in text status should be empty string.");
|
||||
assert_true(document.getElementById("rd1").checked, "The checked attribute of the input element in radio should be true.");
|
||||
assert_false(document.getElementById("rd2").checked, "The checked attribute of the input element in radio should be false.");
|
||||
assert_true(document.getElementById("cb1").checked, "The checked attribute of the input element in checkbox should be true.");
|
||||
assert_false(document.getElementById("cb2").checked, "The checked attribute of the input element in checkbox should be false.");
|
||||
assert_equals(document.getElementById("ta").value, document.getElementById("ta").textContent, "The value attribute of the textarea element should be reset.");
|
||||
assert_equals(document.getElementById("ta").value, "abc", "The value attribute of the textarea element should be 'abc'.");
|
||||
assert_equals(document.getElementById("opt").textContent, document.getElementById("opt").defaultValue, "The textContent of the output element should be reset.");
|
||||
assert_equals(document.getElementById("opt").textContent, "abc", "The textContent of the output element should be 'abc'.");
|
||||
assert_true(document.getElementById("slt1").options[0].selected, "The first option in the select element should be selected.");
|
||||
assert_false(document.getElementById("slt1").options[1].selected, "The second option in the select element should not be selected.");
|
||||
assert_false(document.getElementById("slt2").options[0].selected, "The first option in the select element should not be selected.");
|
||||
assert_true(document.getElementById("slt2").options[1].selected, "The second option in the select element should be selected.");
|
||||
assert_false(document.getElementById("slt3").options[0].selected, "The first option in the select element with multiple attribute should not be selected.");
|
||||
assert_true(document.getElementById("slt3").options[1].selected, "The second option in the select element with multiple attribute should be selected.");
|
||||
assert_true(document.getElementById("slt3").options[2].selected, "The third option in the select element with multiple attribute should be selected.");
|
||||
//TODO: The keygen reset algorithm
|
||||
}, "Resetting the form " + description);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1 @@
|
|||
{"original_id":"textFieldSelection"}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>text field selection: select()</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<textarea>foobar</textarea>
|
||||
<script>
|
||||
var input_types = ["text", "search", "tel", "url", "password"],
|
||||
t1 = async_test("select() on textarea queues select event"),
|
||||
q1 = false;
|
||||
|
||||
input_types.forEach(function(type) {
|
||||
var input = document.createElement("input"),
|
||||
t = async_test("select() on input type " + type + " queues select event"),
|
||||
q = false;
|
||||
t.step(function() {
|
||||
input.type = type;
|
||||
input.value = "foobar";
|
||||
document.body.appendChild(input);
|
||||
input.onselect = t.step_func_done(function(e) {
|
||||
assert_true(q, "event should be queued");
|
||||
assert_true(e.isTrusted, "event is trusted");
|
||||
assert_true(e.bubbles, "event bubbles");
|
||||
assert_false(e.cancelable, "event is not cancelable");
|
||||
});
|
||||
input.select();
|
||||
q=true;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector("textarea").onselect = t1.step_func_done(function(e) {
|
||||
assert_true(q1, "event should be queued");
|
||||
assert_true(e.isTrusted, "event is trusted");
|
||||
assert_true(e.bubbles, "event bubbles");
|
||||
assert_false(e.cancelable, "event is not cancelable");
|
||||
});
|
||||
|
||||
t1.step(function() {
|
||||
document.querySelector("textarea").select();
|
||||
q1=true;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>text field selection (textarea)</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var el = document.createElement("textarea");
|
||||
assert_equals(el.selectionStart, 0);
|
||||
assert_equals(el.selectionEnd, 0);
|
||||
el.selectionStart = 1;
|
||||
el.selectionEnd = 1;
|
||||
el.selectionDirection = "forward";
|
||||
el.setRangeText("foobar");
|
||||
el.setSelectionRange(0, 1);
|
||||
}, "text field selection for the input textarea");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>text field selection</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var types = ["hidden", "email", "datetime", "date", "month", "week", "time", "number", "range", "color", "checkbox", "radio", "file", "submit", "image", "reset", "button"]; //types for which the API doesn't apply
|
||||
var types2 = ["text", "search", "tel", "url", "password"]; //types for which the API applies
|
||||
|
||||
types.forEach(function(type){
|
||||
test(function(){
|
||||
var el = document.createElement("input");
|
||||
el.type = type;
|
||||
assert_throws("InvalidStateError", function(){
|
||||
el.selectionStart;
|
||||
});
|
||||
assert_throws("InvalidStateError", function(){
|
||||
el.selectionEnd;
|
||||
});
|
||||
assert_throws("InvalidStateError", function(){
|
||||
el.selectionDirection;
|
||||
});
|
||||
assert_throws("InvalidStateError", function(){
|
||||
el.setRangeText("foobar");
|
||||
});
|
||||
assert_throws("InvalidStateError", function(){
|
||||
el.setSelectionRange(0, 1);
|
||||
});
|
||||
}, "text field selection for the input " + type);
|
||||
});
|
||||
|
||||
types2.forEach(function(type) {
|
||||
test(function() {
|
||||
var el = document.createElement("input");
|
||||
el.type = type;
|
||||
assert_equals(el.selectionStart, 0);
|
||||
assert_equals(el.selectionEnd, 0);
|
||||
el.selectionStart = 1;
|
||||
el.selectionEnd = 1;
|
||||
el.selectionDirection = "forward";
|
||||
el.setRangeText("foobar");
|
||||
el.setSelectionRange(0, 1);
|
||||
}, "text field selection for the input " + type);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>test if select() API returns correct attributes</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="author" title="Koji Tashiro" href="mailto:koji.tashiro@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/multipage/association-of-controls-and-forms.html#textFieldSelection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
var body = document.getElementsByTagName("body").item(0);
|
||||
var dirs = ['forward', 'backward', 'none'];
|
||||
var sampleText = "0123456789";
|
||||
|
||||
var createInputElement = function(value) {
|
||||
var el = document.createElement("input");
|
||||
el.type = "text";
|
||||
el.value = value;
|
||||
body.appendChild(el);
|
||||
return el;
|
||||
};
|
||||
|
||||
var createTextareaElement = function(value) {
|
||||
var el = document.createElement("textarea");
|
||||
el.value = value;
|
||||
body.appendChild(el);
|
||||
return el;
|
||||
};
|
||||
|
||||
|
||||
test(function() {
|
||||
var text = 'a';
|
||||
for (var i=0; i<255; i++) {
|
||||
var el = createInputElement(text);
|
||||
el.select();
|
||||
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
|
||||
assert_equals(selectionText, text, "Selection text mismatched");
|
||||
el.parentNode.removeChild(el);
|
||||
text += 'a';
|
||||
}
|
||||
}, "test if selection text is correct for input");
|
||||
|
||||
|
||||
test(function() {
|
||||
var text = 'a';
|
||||
for (var i=0; i<255; i++) {
|
||||
var el = createTextareaElement(text);
|
||||
el.select();
|
||||
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
|
||||
assert_equals(selectionText, text, "Selection text mismatched");
|
||||
el.parentNode.removeChild(el);
|
||||
text += 'a';
|
||||
}
|
||||
}, "test if selection text is correct for textarea");
|
||||
|
||||
|
||||
test(function() {
|
||||
var text = 'あ';
|
||||
for (var i=0; i<255; i++) {
|
||||
var el = createInputElement(text);
|
||||
el.select();
|
||||
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
|
||||
assert_equals(selectionText, text, "Selection text mismatched");
|
||||
el.parentNode.removeChild(el);
|
||||
text += 'あ';
|
||||
}
|
||||
}, "test if non-ascii selection text is correct for input");
|
||||
|
||||
|
||||
test(function() {
|
||||
var text = 'あ';
|
||||
for (var i=0; i<255; i++) {
|
||||
var el = createTextareaElement(text);
|
||||
el.select();
|
||||
var selectionText = el.value.substring(el.selectionStart, el.selectionEnd);
|
||||
assert_equals(selectionText, text, "Selection text mismatched");
|
||||
el.parentNode.removeChild(el);
|
||||
text += 'あ';
|
||||
}
|
||||
}, "test if non-ascii selection text is correct for textarea");
|
||||
|
||||
|
||||
test(function() {
|
||||
var el = createInputElement(sampleText);
|
||||
// If there is no selection, then it must return the offset(in logical order)
|
||||
// to the character that immediately follows the text entry cursor.
|
||||
assert_equals(el.selectionStart, el.value.length, "SelectionStart offset without selection");
|
||||
el.select();
|
||||
assert_equals(el.selectionStart, 0, "SelectionStart offset");
|
||||
el.parentNode.removeChild(el);
|
||||
}, "test SelectionStart offset for input");
|
||||
|
||||
|
||||
test(function() {
|
||||
var el = createTextareaElement(sampleText);
|
||||
// If there is no selection, then it must return the offset(in logical order)
|
||||
// to the character that immediately follows the text entry cursor.
|
||||
assert_equals(el.selectionStart, el.value.length, "SelectionStart offset without selection");
|
||||
el.select();
|
||||
assert_equals(el.selectionStart, 0, "SelectionStart offset");
|
||||
el.parentNode.removeChild(el);
|
||||
}, "test SelectionStart offset for textarea");
|
||||
|
||||
|
||||
test(function() {
|
||||
var el = createInputElement(sampleText);
|
||||
// If there is no selection, then it must return the offset(in logical order)
|
||||
// to the character that immediately follows the text entry cursor.
|
||||
assert_equals(el.selectionEnd, el.value.length, "SelectionEnd offset without selection");
|
||||
el.select();
|
||||
assert_equals(el.selectionEnd, el.value.length, "SelectionEnd offset");
|
||||
el.parentNode.removeChild(el);
|
||||
}, "test SelectionEnd offset for input");
|
||||
|
||||
|
||||
test(function() {
|
||||
var el = createTextareaElement(sampleText);
|
||||
// If there is no selection, then it must return the offset(in logical order)
|
||||
// to the character that immediately follows the text entry cursor.
|
||||
assert_equals(el.selectionEnd, el.value.length, "SelectionEnd offset without selection");
|
||||
el.select();
|
||||
assert_equals(el.selectionEnd, el.value.length, "SelectionEnd offset");
|
||||
el.parentNode.removeChild(el);
|
||||
}, "test SelectionEnd offset for textarea");
|
||||
|
||||
|
||||
test(function() {
|
||||
var el = createInputElement(sampleText);
|
||||
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
|
||||
el.select();
|
||||
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
|
||||
el.parentNode.removeChild(el);
|
||||
}, "test SelectionDirection for input");
|
||||
|
||||
|
||||
test(function() {
|
||||
var el = createInputElement(sampleText);
|
||||
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
|
||||
el.select();
|
||||
assert_in_array(el.selectionDirection, dirs, "SelectionDirection");
|
||||
el.parentNode.removeChild(el);
|
||||
}, "test SelectionDirection for textarea");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>text field selection: setRangeText</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#display_none {display:none;}
|
||||
</style>
|
||||
<div id="log"></div>
|
||||
<input type=text id=text value="foobar">
|
||||
<input type=search id=search value="foobar">
|
||||
<input type=tel id=tel value="foobar">
|
||||
<input type=url id=url value="foobar">
|
||||
<input type=password id=password value="foobar">
|
||||
<input id=display_none value="foobar">
|
||||
<textarea id=textarea>foobar</textarea>
|
||||
<script>
|
||||
var input = document.createElement("input");
|
||||
input.id = "input_not_in_doc";
|
||||
input.value = "foobar";
|
||||
|
||||
var elements = [
|
||||
document.getElementById("text"),
|
||||
document.getElementById("search"),
|
||||
document.getElementById("tel"),
|
||||
document.getElementById("url"),
|
||||
document.getElementById("password"),
|
||||
document.getElementById("display_none"),
|
||||
document.getElementById("textarea"),
|
||||
input,
|
||||
]
|
||||
|
||||
elements.forEach(function(element) {
|
||||
var t = async_test(element.id + " setRangeText fires a select event"),
|
||||
q = false;
|
||||
|
||||
test(function() {
|
||||
element.value = "foobar";
|
||||
element.selectionStart = 0;
|
||||
element.selectionEnd = 3;
|
||||
assert_equals(element.selectionStart, 0);
|
||||
assert_equals(element.selectionEnd, 3);
|
||||
element.setRangeText("foobar2");
|
||||
assert_equals(element.value, "foobar2bar");
|
||||
assert_equals(element.selectionStart, 0);
|
||||
assert_equals(element.selectionEnd, 7);
|
||||
element.setRangeText("foobar3", 7, 10);
|
||||
assert_equals(element.value, "foobar2foobar3");
|
||||
}, element.id + " setRangeText with only one argument replaces the value between selectionStart and selectionEnd, otherwise replaces the value between 2nd and 3rd arguments");
|
||||
|
||||
test(function(){
|
||||
element.value = "foobar";
|
||||
element.selectionStart = 0;
|
||||
element.selectionEnd = 0;
|
||||
|
||||
element.setRangeText("foobar2", 0, 3); // no 4th arg, default "preserve"
|
||||
assert_equals(element.value, "foobar2bar");
|
||||
assert_equals(element.selectionStart, 0);
|
||||
assert_equals(element.selectionEnd, 0);
|
||||
}, element.id + " selectionMode missing");
|
||||
|
||||
test(function(){
|
||||
element.value = "foobar"
|
||||
element.setRangeText("foo", 3, 6, "select");
|
||||
assert_equals(element.value, "foofoo");
|
||||
assert_equals(element.selectionStart, 3);
|
||||
assert_equals(element.selectionEnd, 6);
|
||||
}, element.id + " selectionMode 'select'");
|
||||
|
||||
test(function(){
|
||||
element.value = "foobar"
|
||||
element.setRangeText("foo", 3, 6, "start");
|
||||
assert_equals(element.value, "foofoo");
|
||||
assert_equals(element.selectionStart, 3);
|
||||
assert_equals(element.selectionEnd, 3);
|
||||
}, element.id + " selectionMode 'start'");
|
||||
|
||||
test(function(){
|
||||
element.value = "foobar"
|
||||
element.setRangeText("foobar", 3, 6, "end");
|
||||
assert_equals(element.value, "foofoobar");
|
||||
assert_equals(element.selectionStart, 9);
|
||||
assert_equals(element.selectionEnd, 9);
|
||||
}, element.id + " selectionMode 'end'");
|
||||
|
||||
test(function(){
|
||||
element.value = "foobar"
|
||||
element.selectionStart = 0;
|
||||
element.selectionEnd = 5;
|
||||
assert_equals(element.selectionStart, 0);
|
||||
element.setRangeText("", 3, 6, "preserve");
|
||||
assert_equals(element.value, "foo");
|
||||
assert_equals(element.selectionStart, 0);
|
||||
assert_equals(element.selectionEnd, 3);
|
||||
}, element.id + " selectionMode 'preserve'");
|
||||
|
||||
test(function(){
|
||||
assert_throws("INDEX_SIZE_ERR", function() {
|
||||
element.setRangeText("barfoo", 2, 1);
|
||||
});
|
||||
}, element.id + " setRangeText with 3rd argument greater than 2nd argument throws an IndexSizeError exception");
|
||||
|
||||
test(function(){
|
||||
assert_throws(new TypeError(), function() {
|
||||
element.setRangeText();
|
||||
});
|
||||
}, element.id + " setRangeText without argument throws a type error");
|
||||
|
||||
element.onselect = t.step_func_done(function(e) {
|
||||
assert_true(q, "event should be queued");
|
||||
assert_true(e.isTrusted, "event is trusted");
|
||||
assert_false(e.bubbles, "event bubbles");
|
||||
assert_false(e.cancelable, "event is not cancelable");
|
||||
});
|
||||
element.setRangeText("foobar2", 0, 6);
|
||||
q=true;
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,224 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Test of text field setSelectionRange</title>
|
||||
<link rel="author" title="Takeharu.Oshida" href="mailto:georgeosddev@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-textarea/input-setselectionrange">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<div id="hide" style="display: block">
|
||||
<input id="a" type="text" value="abcde">
|
||||
<textarea id="b">abcde</textarea>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var input = document.getElementById("a");
|
||||
test(function() {
|
||||
assert_equals(typeof(input.setSelectionRange), "function", "element must have 'setSelectionRange' function");
|
||||
},"input typeof(input.setSelectionRange)'");
|
||||
|
||||
test(function() {
|
||||
assert_equals(input.setSelectionRange(0,1,"forward"),undefined,"setSelectionRange is void functuon");
|
||||
},"input setSelectionRange return void");
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1)
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange(0,1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,input.value.length+1)
|
||||
assert_equals(input.selectionEnd, input.value.length, "Arguments greater than the length of the value of the text field must be treated as pointing at the end of the text field");
|
||||
},'input setSelectionRange(0,input.value.length+1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(2,2)
|
||||
assert_equals(input.selectionStart, 2, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
assert_equals(input.selectionEnd, 2, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
},'input setSelectionRange(2,2)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(2,1)
|
||||
assert_equals(input.selectionStart, 1, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
assert_equals(input.selectionEnd, 1, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
},'input setSelectionRange(2,1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1,"backward")
|
||||
assert_equals(input.selectionDirection, "backward", 'The direction of the selection must be set to backward if direction is a case-sensitive match for the string "backward"');
|
||||
},'input direction of setSelectionRange(0,1,"backward")');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1,"forward")
|
||||
assert_equals(input.selectionDirection, "forward", 'The direction of the selection must be set to forward if direction is a case-sensitive match for the string "forward"');
|
||||
},'input direction of setSelectionRange(0,1,"forward")');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1,"none")
|
||||
assert_equals(input.selectionDirection, "none", 'The direction of the selection must be set to forward if direction is a case-sensitive match for the string "none"');
|
||||
},'input direction of setSelectionRange(0,1,"none")');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1,"hoge")
|
||||
assert_equals(input.selectionDirection, "none", "otherwise");
|
||||
},'input direction of setSelectionRange(0,1,"hoge")');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1,"BACKWARD")
|
||||
assert_equals(input.selectionDirection, "none", "selectionDirection should be 'none'");
|
||||
},'input direction of setSelectionRange(0,1,"BACKWARD")');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(0,1)
|
||||
assert_equals(input.selectionDirection, "none", "if the argument is omitted");
|
||||
},'input direction of setSelectionRange(0,1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange("string",1);
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange("string",1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(true,1);
|
||||
assert_equals(input.selectionStart, 1, "element.selectionStart should be 1");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange(true,1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange([],1);
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange([],1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange({},1);
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange({},1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(NaN,1);
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange(NaN,1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(null,1);
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange(null,1)');
|
||||
|
||||
test(function() {
|
||||
input.setSelectionRange(undefined,1);
|
||||
assert_equals(input.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(input.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'input setSelectionRange(undefined,1)');
|
||||
},"test of input.setSelectionRange");
|
||||
|
||||
test(function() {
|
||||
var textarea = document.getElementById("b");
|
||||
test(function() {
|
||||
assert_equals(typeof(textarea.setSelectionRange), "function", "element must have 'setSelectionRange' function");
|
||||
},"textarea typeof(input.setSelectionRange)'");
|
||||
|
||||
test(function() {
|
||||
assert_equals(textarea.setSelectionRange(0,1,"forward"),undefined,"setSelectionRange is void functuon");
|
||||
},"textarea setSelectionRange return void");
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1)
|
||||
assert_equals(textarea.selectionStart, 0, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionEnd should be 1");
|
||||
},'textarea setSelectionRange(0,1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,textarea.value.length+1)
|
||||
assert_equals(textarea.selectionEnd, textarea.value.length, "Arguments greater than the length of the value of the text field must be treated as pointing at the end of the text field");
|
||||
},'textarea setSelectionRange(0,textarea.value.length+1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(2,2)
|
||||
assert_equals(textarea.selectionStart, 2, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
assert_equals(textarea.selectionEnd, 2, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
},'textarea setSelectionRange(2,2)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(2,1)
|
||||
assert_equals(textarea.selectionStart, 1, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
assert_equals(textarea.selectionEnd, 1, "If end is less than or equal to start then the start of the selection and the end of the selection must both be placed immediately before the character with offset end");
|
||||
},'textarea setSelectionRange(2,1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1,"backward")
|
||||
assert_equals(textarea.selectionDirection, "backward", 'The direction of the selection must be set to backward if direction is a case-sensitive match for the string "backward"');
|
||||
},'textarea direction of setSelectionRange(0,1,"backward")');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1,"forward")
|
||||
assert_equals(textarea.selectionDirection, "forward", 'The direction of the selection must be set to forward if direction is a case-sensitive match for the string "forward"');
|
||||
},'textarea direction of setSelectionRange(0,1,"forward")');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1,"none")
|
||||
assert_equals(textarea.selectionDirection, "none", 'The direction of the selection must be set to forward if direction is a case-sensitive match for the string "none"');
|
||||
},'textarea direction of setSelectionRange(0,1,"none")');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1,"hoge")
|
||||
assert_equals(textarea.selectionDirection, "none", "otherwise");
|
||||
},'textarea direction of setSelectionRange(0,1,"hoge")');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1,"BACKWARD")
|
||||
assert_equals(textarea.selectionDirection, "none", "selectionDirection should be 'none'");
|
||||
},'textarea direction of setSelectionRange(0,1,"BACKWARD")');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(0,1)
|
||||
assert_equals(textarea.selectionDirection, "none", "if the argument is omitted");
|
||||
},'textarea direction of setSelectionRange(0,1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange("string",1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange("string",1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(true,1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 1");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange(true,1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange([],1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange([],1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange({},1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange({},1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(NaN,1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange(NaN,1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(null,1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange(null,1)');
|
||||
|
||||
test(function() {
|
||||
textarea.setSelectionRange(undefined,1);
|
||||
assert_equals(textarea.selectionStart, 1, "element.selectionStart should be 0");
|
||||
assert_equals(textarea.selectionEnd, 1, "element.selectionStart should be 1");
|
||||
},'textarea setSelectionRange(undefined,1)');
|
||||
},"test of textarea.setSelectionRange");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML Test: Button - events</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-button-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form name="fm1" style="display:none">
|
||||
<button id="btn">BUTTON</button>
|
||||
<button id="menu_btn" type="menu" menu="menu">MENU BUTTON</button>
|
||||
<menu id="menu" label="MENU">
|
||||
<li>Menu item</li>
|
||||
</menu>
|
||||
</form>
|
||||
<script>
|
||||
|
||||
var btn = document.getElementById("btn"),
|
||||
menu_btn = document.getElementById("menu_btn"),
|
||||
t1 = async_test("The submit event must be fired when click a button in submit status"),
|
||||
t2 = async_test("The reset event must be fired when click a button in reset status"),
|
||||
t3 = async_test("The show event must be fired when click a button in menu status");
|
||||
|
||||
document.forms.fm1.onsubmit = t1.step_func(function (evt) {
|
||||
evt.preventDefault();
|
||||
assert_true(evt.isTrusted, "The isTrusted attribute of the submit event shoud be true.");
|
||||
assert_true(evt.bubbles, "The bubbles attribute of the submit event shoud be true.");
|
||||
assert_true(evt.cancelable, "The cancelable attribute of the submit event shoud be true.");
|
||||
assert_true(evt instanceof Event, "The submit event is an instance of Event interface.");
|
||||
t1.done();
|
||||
});
|
||||
|
||||
document.forms.fm1.onreset = t2.step_func(function (evt) {
|
||||
assert_true(evt.isTrusted, "The isTrusted attribute of the reset event shoud be true.");
|
||||
assert_true(evt.bubbles, "The bubbles attribute of the reset event shoud be true.");
|
||||
assert_true(evt.cancelable, "The cancelable attribute of the reset event shoud be true.");
|
||||
assert_true(evt instanceof Event, "The reset event is an instance of Event interface.");
|
||||
t2.done();
|
||||
});
|
||||
|
||||
document.getElementById("menu").onshow = t3.step_func(function (evt) {
|
||||
assert_true(evt.isTrusted, "The isTrusted attribute of the show event shoud be true.");
|
||||
assert_equals(evt.relatedTarget, menu_btn, "The relatedTarget attribute should be initialized to the related button element.");
|
||||
assert_true(evt.cancelable, "The cancelable attribute of the show event shoud be true.");
|
||||
assert_true(evt instanceof RelatedEvent, "The show event is an instance of RelatedEvent interface.");
|
||||
t3.done();
|
||||
});
|
||||
|
||||
t1.step(function () {
|
||||
btn.type = "submit";
|
||||
assert_equals(btn.type, "submit", "The button type should be 'submit'.");
|
||||
btn.click();
|
||||
});
|
||||
|
||||
t2.step(function () {
|
||||
btn.type = "reset";
|
||||
assert_equals(btn.type, "reset", "The button type should be 'reset'.");
|
||||
btn.click();
|
||||
});
|
||||
|
||||
t3.step(function () {
|
||||
assert_equals(menu_btn.type, "menu", "The button type should be 'menu'.");
|
||||
menu_btn.click();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>button element validation</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-button-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<button id=btn1>button</button>
|
||||
<button id=btn2 type=submit>button</button>
|
||||
<button id=btn3 type=reset>button</button>
|
||||
<button id=btn4 type=button>button</button>
|
||||
<button id=btn5 type=menu>button</button>
|
||||
<button id=btn6 type=foobar>button</button>
|
||||
<script>
|
||||
function willValid(element, expectedType, willValidate, desc) {
|
||||
test(function(){
|
||||
assert_equals(element.type, expectedType);
|
||||
assert_equals(element.willValidate, willValidate);
|
||||
}, desc);
|
||||
}
|
||||
|
||||
willValid(document.getElementById('btn1'), "submit", true, "missing type attribute");
|
||||
willValid(document.getElementById('btn2'), "submit", true, "submit type attribute");
|
||||
willValid(document.getElementById('btn3'), "reset", false, "reset type attribute");
|
||||
willValid(document.getElementById('btn4'), "button", false, "button type attribute");
|
||||
willValid(document.getElementById('btn5'), "menu", false, "menu type attribute");
|
||||
willValid(document.getElementById('btn6'), "submit", true, "invalid type attribute");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Datalist element options</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#the-datalist-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<label>
|
||||
Number:
|
||||
<input list=numbers>
|
||||
</label>
|
||||
<datalist id=numbers>
|
||||
<label> Select number:
|
||||
<select id=num>
|
||||
<option label="zero" value="0">
|
||||
<option label="one" value="1">
|
||||
<option label="two">2
|
||||
<option label="three" disabled>3
|
||||
<option>
|
||||
</select>
|
||||
</label>
|
||||
</datalist>
|
||||
<script>
|
||||
test(function(){
|
||||
var datalist = document.getElementById('numbers'),
|
||||
labels = [],
|
||||
values = [];
|
||||
assert_equals(datalist.options.length, 5);
|
||||
|
||||
for (var i = 0, len = datalist.options.length; i < len; i++) {
|
||||
assert_equals(datalist.options[i], datalist.options.item(i));
|
||||
labels.push(datalist.options[i].label);
|
||||
values.push(datalist.options[i].value);
|
||||
}
|
||||
assert_array_equals(labels, ["zero", "one", "two", "three", ""]);
|
||||
assert_array_equals(values, ["0", "1", "2", "3", ""]);
|
||||
}, "options label/value");
|
||||
|
||||
test(function(){
|
||||
assert_false(document.getElementById('num').willValidate);
|
||||
}, "If an element has a datalist element ancestor, it is barred from constraint validation");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>HTML Test: HTMLFieldSetElement interface</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com/">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-fieldset-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form name="fm1" style="display:none">
|
||||
<fieldset id="fs_outer">
|
||||
<legend><input type="checkbox" name="cb"></legend>
|
||||
<input type=text name="txt" id="ctl1">
|
||||
<button id="ctl2" name="btn">BUTTON</button>
|
||||
<fieldset id="fs_inner">
|
||||
<input type="text" name="txt_inner">
|
||||
<progress name="pg" value="0.5"></progress>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
</form>
|
||||
<script>
|
||||
|
||||
var fm1,
|
||||
fs_outer,
|
||||
children_outer;
|
||||
|
||||
setup(function () {
|
||||
fm1 = document.forms.fm1;
|
||||
fs_outer = document.getElementById("fs_outer");
|
||||
children_outer = fs_outer.elements;
|
||||
});
|
||||
|
||||
test(function () {
|
||||
assert_equals(fs_outer.type, "fieldset", "The value of type attribute is incorrect.");
|
||||
}, "The type attribute must return 'fieldset'");
|
||||
|
||||
test(function () {
|
||||
assert_equals(fs_outer.form, fm1, "The fieldset should have a form owner.");
|
||||
}, "The form attribute must return the fieldset's form owner");
|
||||
|
||||
test(function () {
|
||||
assert_true(children_outer instanceof HTMLFormControlsCollection,
|
||||
"The elements attribute should be an HTMLFormControlsCollection object");
|
||||
}, "The elements must return an HTMLFormControlsCollection object");
|
||||
|
||||
test(function () {
|
||||
var fs_inner = document.getElementById("fs_inner");
|
||||
var children_inner = fs_inner.elements;
|
||||
assert_array_equals(children_inner, [fm1.txt_inner],
|
||||
"The items in the collection must be children of the inner fieldset element.");
|
||||
assert_array_equals(children_outer, [fm1.cb, fm1.txt, fm1.btn, fm1.fs_inner, fm1.txt_inner],
|
||||
"The items in the collection must be children of the outer fieldset element.");
|
||||
}, "The controls must root at the fieldset element");
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Fieldset disabled</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-fieldset-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form>
|
||||
<fieldset id=fs disabled>
|
||||
<legend>
|
||||
<input type=checkbox id=clubc_l1>
|
||||
<input type=radio id=clubr_l1>
|
||||
<input type=text id=clubt_l1>
|
||||
</legend>
|
||||
<legend><input type=checkbox id=club_l2></legend>
|
||||
<p><label>Name on card: <input id=clubname required></label></p>
|
||||
<p><label>Card number: <input id=clubnum required pattern="[-0-9]+"></label></p>
|
||||
</fieldset>
|
||||
<fieldset id=fs2 disabled>
|
||||
<p><legend><input type=checkbox id=club2></legend></p>
|
||||
<p><label>Name on card: <input id=clubname2 required></label></p>
|
||||
<p><label>Card number: <input id=clubnum2 required pattern="[-0-9]+"></label></p>
|
||||
</fieldset>
|
||||
<fieldset id=fs3 disabled>
|
||||
<fieldset>
|
||||
<legend><input type=checkbox id=club3></legend>
|
||||
</fieldset>
|
||||
<p><label>Name on card: <input id=clubname3 required></label></p>
|
||||
<p><label>Card number: <input id=clubnum3 required pattern="[-0-9]+"></label></p>
|
||||
</fieldset>
|
||||
<fieldset id=fs4 disabled>
|
||||
<legend>
|
||||
<fieldset><input type=checkbox id=club4></fieldset>
|
||||
</legend>
|
||||
<p><label>Name on card: <input id=clubname4 required></label></p>
|
||||
<p><label>Card number: <input id=clubnum4 required pattern="[-0-9]+"></label></p>
|
||||
</fieldset>
|
||||
</form>
|
||||
<script>
|
||||
test(function () {
|
||||
assert_true(document.getElementById('fs').disabled, "The fieldset is disabled");
|
||||
assert_false(document.getElementById('clubname').willValidate, "fieldset is disabled so is input 'clubname'");
|
||||
assert_false(document.getElementById('clubnum').willValidate, "fieldset is disabled so is input 'clubnum'");
|
||||
assert_true(document.getElementById('clubc_l1').willValidate, "input 'clubc_l1' is descendant of the first legend child of the fieldset. It should not be disabled");
|
||||
assert_true(document.getElementById('clubr_l1').willValidate, "input 'clubr_l1' is descendant of the first legend child of the fieldset. It should not be disabled");
|
||||
assert_true(document.getElementById('clubt_l1').willValidate, "input 'clubt_l1' is descendant of the first legend child of the fieldset. It should not be disabled");
|
||||
assert_false(document.getElementById('club_l2').willValidate, "input 'club_l2' is a descendant of the second legend child of the fieldset. It should be disabled");
|
||||
}, "The disabled attribute, when specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled.");
|
||||
|
||||
test(function () {
|
||||
assert_true(document.getElementById('fs2').disabled, "The fieldset is disabled");
|
||||
assert_false(document.getElementById('clubname2').willValidate, "fieldset is disabled so is input 'clubname2'");
|
||||
assert_false(document.getElementById('clubnum2').willValidate, "fieldset is disabled so is input 'clubnum2'");
|
||||
assert_false(document.getElementById('club2').willValidate, "the first legend is not a child of the disbled fieldset: input 'club2' is disabled");
|
||||
}, "The first 'legend' element is not a child of the disabled fieldset: Its descendants should be disabled.");
|
||||
|
||||
test(function () {
|
||||
assert_true(document.getElementById('fs3').disabled, "The fieldset is disabled");
|
||||
assert_false(document.getElementById('clubname3').willValidate, "fieldset is disabled so is input 'clubname3'");
|
||||
assert_false(document.getElementById('clubnum3').willValidate, "fieldset is disabled so is input 'clubnum3'");
|
||||
assert_false(document.getElementById('club3').willValidate, "the first legend is not a child of the disbled fieldset: input 'club3' is disabled");
|
||||
}, "The <legend> element is not a child of the disabled fieldset: Its descendants should be disabled.");
|
||||
|
||||
test(function () {
|
||||
assert_true(document.getElementById('fs4').disabled, "The fieldset is disabled");
|
||||
assert_false(document.getElementById('clubname4').willValidate, "fieldset is disabled so is input 'clubname4'");
|
||||
assert_false(document.getElementById('clubnum4').willValidate, "fieldset is disabled so is input 'clubnum4'");
|
||||
assert_true(document.getElementById('club4').willValidate, "the first legend a child of the disbled fieldset: input 'club4' is disabled");
|
||||
}, "The <legend> element is child of the disabled fieldset: Its descendants should be disabled.");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>form autocomplete attribute</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#the-form-element">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#attr-fe-autocomplete">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form name="missing_attribute">
|
||||
<input>
|
||||
<input autocomplete="on">
|
||||
<input autocomplete="off">
|
||||
<input autocomplete="foobar">
|
||||
</form>
|
||||
<form name="autocomplete_on" autocomplete="on">
|
||||
<input>
|
||||
<input autocomplete="on">
|
||||
<input autocomplete="off">
|
||||
<input autocomplete="foobar">
|
||||
</form>
|
||||
<form name="autocomplete_off" autocomplete="off">
|
||||
<input>
|
||||
<input autocomplete="on">
|
||||
<input autocomplete="off">
|
||||
<input autocomplete="foobar">
|
||||
</form>
|
||||
<form name="autocomplete_invalid" autocomplete="foobar">
|
||||
<input>
|
||||
<input autocomplete="on">
|
||||
<input autocomplete="off">
|
||||
<input autocomplete="foobar">
|
||||
</form>
|
||||
<script>
|
||||
function autocompletetest(form, expectedValues, desc) {
|
||||
test(function(){
|
||||
assert_equals(form.autocomplete, expectedValues[0]);
|
||||
assert_equals(form.elements[0].autocomplete, expectedValues[1]);
|
||||
assert_equals(form.elements[1].autocomplete, expectedValues[2]);
|
||||
assert_equals(form.elements[2].autocomplete, expectedValues[3]);
|
||||
assert_equals(form.elements[3].autocomplete, expectedValues[4]);
|
||||
}, desc);
|
||||
}
|
||||
|
||||
autocompletetest(document.forms.missing_attribute, ["on", "on", "on", "off", ""], "form autocomplete attribute missing");
|
||||
autocompletetest(document.forms.autocomplete_on, ["on", "on", "on", "off", ""], "form autocomplete attribute on");
|
||||
autocompletetest(document.forms.autocomplete_off, ["off", "off", "on", "off", ""], "form autocomplete attribute off");
|
||||
autocompletetest(document.forms.autocomplete_invalid, ["on", "on", "on", "off", ""], "form autocomplete attribute invalid");
|
||||
|
||||
var keywords = [ "name", "honorific-prefix", "given-name", "additional-name", "family-name", "honorific-suffix", "nickname", "organization-title", "organization", "street-address", "address-line1", "address-line2", "address-line3", "locality", "region", "country", "country-name", "postal-code", "cc-name", "cc-given-name", "cc-additional-name", "cc-family-name", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc", "cc-type", "language", "bday", "bday-day", "bday-month", "bday-year", "sex", "url", "photo", "tel", "tel-country-code", "tel-national", "tel-area-code", "tel-local", "tel-local-prefix", "tel-local-suffix", "tel-extension", "email", "impp" ];
|
||||
keywords.forEach(function(keyword) {
|
||||
test(function(){
|
||||
var input = document.createElement("input");
|
||||
input.setAttribute("autocomplete", keyword);
|
||||
assert_equals(input.autocomplete, keyword);
|
||||
}, keyword + " is an allowed autocomplete field name");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>form.elements: interfaces</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-form-elements">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#htmlformcontrolscollection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var form = document.createElement("form");
|
||||
["HTMLFormControlsCollection", "HTMLCollection"].forEach(function(i) {
|
||||
test(function() {
|
||||
assert_true(i in window, "Interface should exist")
|
||||
assert_true(form.elements instanceof window[i],
|
||||
"elements should implement the interface")
|
||||
}, "Testing interface " + i)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<title>form.elements: matches</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-form-elements">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<div id="test">
|
||||
<form id="form">
|
||||
<input type="image">
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("form").elements.length, 0);
|
||||
}, "input type=image should not be present in the form.elements collection")
|
||||
test(function() {
|
||||
var form = document.getElementById("form");
|
||||
var i = document.createElement("input");
|
||||
i.name = "2";
|
||||
form.appendChild(i);
|
||||
var j = document.createElement("input");
|
||||
j.name = "03";
|
||||
form.appendChild(j);
|
||||
assert_equals(form.elements[-1], undefined, '[-1]');
|
||||
assert_equals(form.elements["-1"], undefined, '["-1"]');
|
||||
assert_equals(form.elements[0], i, '[0]');
|
||||
assert_equals(form.elements["0"], i, '["0"]');
|
||||
assert_equals(form.elements[1], j, '[1]');
|
||||
assert_equals(form.elements["1"], j, '["1"]');
|
||||
assert_equals(form.elements[2], undefined, '[2]');
|
||||
assert_equals(form.elements["2"], undefined, '["2"]');
|
||||
assert_equals(form.elements[03], undefined, '[03]');
|
||||
assert_equals(form.elements["03"], j, '["03"]');
|
||||
assert_equals(form.elements.item(-1), null, 'item(-1)');
|
||||
assert_equals(form.elements.item(0), i, 'item(0)');
|
||||
assert_equals(form.elements.item(1), j, 'item(1)');
|
||||
assert_equals(form.elements.item(2), null, 'item(2)');
|
||||
assert_equals(form.elements.namedItem("2"), i, 'namedItem("2")');
|
||||
assert_equals(form.elements.namedItem("03"), j, 'namedItem("03")');
|
||||
assert_equals(form.elements.namedItem("3"), null, 'namedItem("3")');
|
||||
assert_array_equals(form.elements, [i, j]);
|
||||
form.removeChild(i);
|
||||
form.removeChild(j);
|
||||
}, "form.elements should include elements whose name starts with a number");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<title>form.elements: namedItem</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-form-elements">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<div id="test">
|
||||
<form id=form>
|
||||
<input name=b id=i1>
|
||||
<input name=b id=i2>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_true("RadioNodeList" in window, "RadioNodeList should exist");
|
||||
}, "RadioNodeList should exist")
|
||||
test(function() {
|
||||
var nl = document.forms.form.elements["b"];
|
||||
assert_true(nl instanceof NodeList, "Should get a NodeList");
|
||||
if ("RadioNodeList" in window) {
|
||||
assert_true(nl instanceof RadioNodeList, "Should get a RadioNodeList");
|
||||
}
|
||||
assert_array_equals(nl,
|
||||
[document.getElementById("i1"),
|
||||
document.getElementById("i2")]);
|
||||
|
||||
var el = nl[0];
|
||||
el.parentNode.removeChild(el);
|
||||
assert_true(nl instanceof NodeList, "Should get a NodeList");
|
||||
if ("RadioNodeList" in window) {
|
||||
assert_true(nl instanceof RadioNodeList, "Should get a RadioNodeList");
|
||||
}
|
||||
assert_array_equals(nl, [document.getElementById("i2")]);
|
||||
assert_equals(document.forms.form.elements["b"], document.getElementById("i2"));
|
||||
}, "elements collection should return elements or RadioNodeLists")
|
||||
test(function() {
|
||||
var fs = document.forms.form.appendChild(document.createElement("fieldset"));
|
||||
fs.name = "fs";
|
||||
assert_equals(document.forms.form.elements.fs, fs);
|
||||
fs.parentNode.removeChild(fs);
|
||||
}, "elements collection should include fieldsets")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>form.elements: parsing</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-form-elements">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#parsing-main-intr">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<div id="test">
|
||||
<form id=form>
|
||||
<table>
|
||||
<tr>
|
||||
<td><input type="radio" name="radio1" id="r1" value=1></td>
|
||||
<td><input type="radio" name="radio2" id="r2" value=2></td>
|
||||
<input type="radio" name="radio0" id="r0" value=0>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
var form = document.getElementById("form");
|
||||
assert_array_equals(form.elements,
|
||||
[document.getElementById("r0"),
|
||||
document.getElementById("r1"),
|
||||
document.getElementById("r2")]);
|
||||
}, "form.elements should work correctly in the face of table syntax errors")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,239 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form named getter</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id=log></div>
|
||||
<!-- XXX Nothing tests id attributes yet. -->
|
||||
<!-- XXX Keygen. -->
|
||||
<!-- XXX We also need tests for moving inputs and forms in the DOM. -->
|
||||
<form>
|
||||
<input type=button name=button>
|
||||
<input type=radio name=radio value=x>
|
||||
<input type=radio name=radio value=y>
|
||||
<input type=radio name=radio value=z>
|
||||
</form>
|
||||
|
||||
<form>
|
||||
<button name=l1></button>
|
||||
<fieldset name=l2></fieldset>
|
||||
<input type=hidden name=l3>
|
||||
<input type=text name=l4>
|
||||
<input type=search name=l5>
|
||||
<input type=tel name=l6>
|
||||
<input type=url name=l7>
|
||||
<input type=email name=l8>
|
||||
<input type=password name=l9>
|
||||
<input type=datetime name=l10>
|
||||
<input type=date name=l11>
|
||||
<input type=month name=l12>
|
||||
<input type=week name=l13>
|
||||
<input type=time name=l14>
|
||||
<input type=datetime-local name=l15>
|
||||
<input type=number name=l16>
|
||||
<input type=range name=l17>
|
||||
<input type=color name=l18>
|
||||
<input type=checkbox name=l19>
|
||||
<input type=radio name=l20>
|
||||
<input type=file name=l21>
|
||||
<input type=submit name=l22>
|
||||
<input type=image name=l23>
|
||||
<input type=reset name=l24>
|
||||
<input type=button name=l25>
|
||||
<input type=foo name=l26>
|
||||
<input name=l27>
|
||||
<object name=l28></object>
|
||||
<output name=l29></output>
|
||||
<select name=l30></select>
|
||||
<textarea name=l31></textarea>
|
||||
</form>
|
||||
|
||||
<form>
|
||||
<!-- EventTarget -->
|
||||
<input type=radio name=addEventListener>
|
||||
<input type=radio name=removeEventListener>
|
||||
<input type=radio name=dispatchEvent>
|
||||
|
||||
<!-- Node -->
|
||||
<input type=radio name=nodeType>
|
||||
<input type=radio name=nodeName>
|
||||
<input type=radio name=ownerDocument>
|
||||
|
||||
<!-- Element -->
|
||||
<input type=radio name=namespaceURI>
|
||||
<input type=radio name=prefix>
|
||||
<input type=radio name=localName>
|
||||
|
||||
<!-- HTMLElement -->
|
||||
<input type=radio name=title>
|
||||
<input type=radio name=lang>
|
||||
<input type=radio name=dir>
|
||||
|
||||
<!-- HTMLFormElement -->
|
||||
<input type=radio name=acceptCharset>
|
||||
<input type=radio name=action>
|
||||
<input type=radio name=autocomplete>
|
||||
<input type=radio name=enctype>
|
||||
<input type=radio name=encoding>
|
||||
<input type=radio name=method>
|
||||
<input type=radio name=name>
|
||||
<input type=radio name=noValidate>
|
||||
<input type=radio name=target>
|
||||
<input type=radio name=elements>
|
||||
<input type=radio name=length>
|
||||
<input type=radio name=submit>
|
||||
<input type=radio name=reset>
|
||||
<input type=radio name=checkValidity>
|
||||
</form>
|
||||
|
||||
<img name=x>
|
||||
<form></form><!-- no child nodes -->
|
||||
<img name=y>
|
||||
<form><!-- a child node --></form>
|
||||
<img name=z>
|
||||
|
||||
<input form=a name=b>
|
||||
<form id=a></form>
|
||||
<input form=c name=d>
|
||||
<input form=c name=d>
|
||||
<form id=c></form>
|
||||
<script>
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[0]
|
||||
assert_equals(form.item, undefined)
|
||||
assert_false("item" in form)
|
||||
}, "Forms should not have an item method")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[0]
|
||||
assert_equals(form.namedItem, undefined)
|
||||
assert_false("namedItem" in form)
|
||||
}, "Forms should not have a namedItem method")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[0]
|
||||
var button = document.getElementsByTagName("input")[0]
|
||||
assert_equals(button.type, "button")
|
||||
assert_equals(form.button, button)
|
||||
assert_equals(form.button.length, undefined)
|
||||
}, "Name for a single element should work")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[0]
|
||||
assert_equals(form.radio.item(-1), null)
|
||||
assert_array_equals([0, 1, 2].map(function(i) {
|
||||
return form.radio.item(i).value
|
||||
}), ["x", "y", "z"])
|
||||
assert_equals(form.radio.item(3), null)
|
||||
}, "Calling item() on the NodeList returned from the named getter should work")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[0]
|
||||
assert_equals(form.radio.length, 3)
|
||||
assert_equals(form.radio[-1], undefined)
|
||||
assert_array_equals([0, 1, 2].map(function(i) {
|
||||
return form.radio[i].value
|
||||
}), ["x", "y", "z"])
|
||||
assert_equals(form.radio[3], undefined)
|
||||
}, "Indexed getter on the NodeList returned from the named getter should work")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[0]
|
||||
var indices = [-1, 0, 1, 2, 3]
|
||||
indices.forEach(function(i) {
|
||||
assert_throws(new TypeError(), function() {
|
||||
form.radio(i)
|
||||
})
|
||||
})
|
||||
}, "Invoking a legacycaller on the NodeList returned from the named getter " +
|
||||
"should not work")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[1]
|
||||
for (var i = 1; i <= 31; ++i) {
|
||||
if (i == 23) {
|
||||
// input type=image
|
||||
assert_equals(form["l" + i], undefined)
|
||||
} else {
|
||||
assert_equals(form["l" + i], form.children[i - 1])
|
||||
}
|
||||
}
|
||||
}, "All listed elements except input type=image should be present in the form")
|
||||
|
||||
test(function() {
|
||||
var names = [
|
||||
// EventTarget
|
||||
"addEventListener", "removeEventListener", "dispatchEvent",
|
||||
// Node
|
||||
"nodeType", "nodeName", "ownerDocument",
|
||||
// Element
|
||||
"namespaceURI", "prefix", "localName",
|
||||
// HTMLElement
|
||||
"title", "lang", "dir",
|
||||
// HTMLFormElement
|
||||
"acceptCharset", "action", "autocomplete", "enctype", "encoding", "method",
|
||||
"name", "noValidate", "target", "elements", "length", "submit", "reset",
|
||||
"checkValidity"
|
||||
]
|
||||
var form = document.getElementsByTagName("form")[2]
|
||||
names.forEach(function(name, i) {
|
||||
assert_equals(form[name], form.children[i])
|
||||
})
|
||||
}, "Named elements should override builtins")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[3]
|
||||
assert_equals(form.x, undefined, "x should not be associated with the form")
|
||||
assert_equals(form.y, undefined, "y should not be associated with the form")
|
||||
assert_equals(form.z, undefined, "z should not be associated with the form")
|
||||
assert_equals(form[0], undefined, "The form should not have supported property indices")
|
||||
assert_equals(form.length, 0)
|
||||
}, "Named items outside the form should not be returned (no children)")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[4]
|
||||
assert_equals(form.x, undefined, "x should not be associated with the form")
|
||||
assert_equals(form.y, undefined, "y should not be associated with the form")
|
||||
assert_equals(form.z, undefined, "z should not be associated with the form")
|
||||
assert_equals(form[0], undefined, "The form should not have supported property indices")
|
||||
assert_equals(form.length, 0)
|
||||
}, "Named items outside the form should not be returned (one child)")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[5]
|
||||
assert_equals(form.id, "a")
|
||||
|
||||
var input = document.getElementsByName("b")[0]
|
||||
assert_equals(input.localName, "input")
|
||||
assert_equals(input.getAttribute("form"), "a")
|
||||
|
||||
assert_equals(form.b, input);
|
||||
}, "The form attribute should be taken into account for named getters (single element)")
|
||||
|
||||
test(function() {
|
||||
var form = document.getElementsByTagName("form")[6]
|
||||
assert_equals(form.id, "c")
|
||||
|
||||
var input1 = document.getElementsByName("d")[0]
|
||||
assert_equals(input1.localName, "input")
|
||||
assert_equals(input1.getAttribute("form"), "c")
|
||||
|
||||
var input2 = document.getElementsByName("d")[1]
|
||||
assert_equals(input2.localName, "input")
|
||||
assert_equals(input2.getAttribute("form"), "c")
|
||||
|
||||
assert_true(form.d instanceof NodeList, "form.d should be a NodeList")
|
||||
assert_array_equals(form.d, [input1, input2])
|
||||
}, "The form attribute should be taken into account for named getters (multiple elements)")
|
||||
|
||||
test(function() {
|
||||
var f = document.body.appendChild(document.createElement("form"))
|
||||
f.id = "f"
|
||||
var g = f.appendChild(document.createElement("form"))
|
||||
g.id = "g"
|
||||
var input = g.appendChild(document.createElement("input"))
|
||||
input.name = "x"
|
||||
assert_equals(f.x, undefined)
|
||||
assert_equals(g.x, input)
|
||||
}, "Input should only be a named property on the innermost form that contains it")
|
||||
</script>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type button</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#button-state-(type=button)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form id=f1>
|
||||
<input type=button id=b1 name=b1>
|
||||
</form>
|
||||
<form>
|
||||
<input id=i1 value="foo">
|
||||
<input type=button id=b2 name=b2>
|
||||
</form>
|
||||
<form>
|
||||
<input type=radio id=i2 checked name=b3>
|
||||
<input type=button id=b3 name=b3>
|
||||
</form>
|
||||
<form>
|
||||
<input type=checkbox id=i3>
|
||||
<input type=button id=b4 name=b4>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
var t = async_test("clicking on button should not submit a form"),
|
||||
b1 = document.getElementById('b1'),
|
||||
b2 = document.getElementById('b2'),
|
||||
b3 = document.getElementById('b3'),
|
||||
b4 = document.getElementById('b4'),
|
||||
i1 = document.getElementById('i1'),
|
||||
i2 = document.getElementById('i2'),
|
||||
i3 = document.getElementById('i3');
|
||||
|
||||
test(function(){
|
||||
assert_false(b1.willValidate);
|
||||
}, "the element is barred from constraint validation");
|
||||
|
||||
document.getElementById('f1').onsubmit = t.step_func(function(e) {
|
||||
e.preventDefault();
|
||||
assert_unreached("form has been submitted");
|
||||
});
|
||||
|
||||
t.step(function() {
|
||||
b1.click();
|
||||
});
|
||||
t.done();
|
||||
|
||||
test(function(){
|
||||
i1.value = "bar";
|
||||
b2.click();
|
||||
assert_equals(i1.value, "bar");
|
||||
}, "clicking on button should not reset other form fields");
|
||||
|
||||
test(function(){
|
||||
assert_true(i2.checked);
|
||||
b3.click();
|
||||
assert_true(i2.checked);
|
||||
}, "clicking on button should not unchecked radio buttons");
|
||||
|
||||
test(function(){
|
||||
assert_false(i3.indeterminate);
|
||||
b4.click();
|
||||
assert_false(i3.indeterminate);
|
||||
}, "clicking on button should not change its indeterminate IDL attribute");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type checkbox</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#checkbox-state-(type=checkbox)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<input type=checkbox id=checkbox1>
|
||||
<input type=checkbox id=checkbox2 disabled>
|
||||
<input type=checkbox id=checkbox3>
|
||||
<input type=checkbox id=checkbox4 checked>
|
||||
<input type=checkbox id=checkbox5>
|
||||
<input type=checkbox id=checkbox6>
|
||||
<script>
|
||||
var checkbox1 = document.getElementById('checkbox1'),
|
||||
checkbox2 = document.getElementById('checkbox2'),
|
||||
checkbox3 = document.getElementById('checkbox3'),
|
||||
checkbox4 = document.getElementById('checkbox4'),
|
||||
checkbox5 = document.getElementById('checkbox5'),
|
||||
checkbox6 = document.getElementById('checkbox6'),
|
||||
c1_input_fired = false, c1_change_fired = false,
|
||||
t1 = async_test("click on mutable checkbox fires the input and change events"),
|
||||
t2 = async_test("click on non-mutable checkbox doesn't fire the input or change event"),
|
||||
t3 = async_test("pre-activation steps on unchecked checkbox"),
|
||||
t4 = async_test("pre-activation steps on checked checkbox"),
|
||||
t5 = async_test("canceled activation steps on unchecked checkbox"),
|
||||
t6 = async_test("canceled activation steps on unchecked checkbox (indeterminate=true in onclick)");
|
||||
|
||||
checkbox1.oninput= t1.step_func(function(e) {
|
||||
c1_input_fired = true;
|
||||
assert_true(e.bubbles, "event should bubble");
|
||||
assert_true(e.isTrusted, "event should be trusted");
|
||||
assert_false(e.cancelable, "event shoud not be cancelable");
|
||||
assert_true(checkbox1.checked, "checkbox is checked");
|
||||
assert_false(checkbox1.indeterminate, "checkbox is not indeterminate");
|
||||
});
|
||||
|
||||
checkbox1.onchange = t1.step_func(function(e) {
|
||||
c1_change_fired = true;
|
||||
assert_true(e.bubbles, "event should bubble")
|
||||
assert_true(e.isTrusted, "event should be trusted");
|
||||
assert_false(e.cancelable, "event shoud not be cancelable");
|
||||
assert_true(checkbox1.checked, "checkbox is checked");
|
||||
assert_false(checkbox1.indeterminate, "checkbox is not indeterminate");
|
||||
});
|
||||
|
||||
checkbox2.oninput= t2.step_func(function(e) {
|
||||
assert_unreached("event input fired");
|
||||
});
|
||||
|
||||
checkbox2.onchange = t2.step_func(function(e) {
|
||||
assert_unreached("event change fired");
|
||||
});
|
||||
|
||||
t1.step(function() {
|
||||
checkbox1.click();
|
||||
assert_true(c1_input_fired);
|
||||
assert_true(c1_change_fired);
|
||||
t1.done();
|
||||
});
|
||||
|
||||
t2.step(function() {
|
||||
checkbox2.click();
|
||||
t2.done();
|
||||
});
|
||||
|
||||
t3.step(function() {
|
||||
checkbox3.indeterminate = true;
|
||||
checkbox3.click();
|
||||
assert_true(checkbox3.checked);
|
||||
assert_false(checkbox3.indeterminate);
|
||||
t3.done();
|
||||
});
|
||||
|
||||
t4.step(function() {
|
||||
checkbox4.indeterminate = true;
|
||||
checkbox4.click();
|
||||
assert_false(checkbox4.checked);
|
||||
assert_false(checkbox4.indeterminate);
|
||||
t4.done();
|
||||
});
|
||||
|
||||
checkbox5.onclick = t5.step_func(function(e) {
|
||||
e.preventDefault();
|
||||
assert_false(checkbox5.checked);
|
||||
assert_false(checkbox5.indeterminate);
|
||||
t5.done();
|
||||
});
|
||||
|
||||
t5.step(function(){
|
||||
assert_false(checkbox5.checked);
|
||||
assert_false(checkbox5.indeterminate);
|
||||
checkbox5.click();
|
||||
});
|
||||
|
||||
checkbox6.onclick = t6.step_func(function(e) {
|
||||
checkbox6.indeterminate = true;
|
||||
e.preventDefault();
|
||||
assert_false(checkbox6.checked);
|
||||
assert_false(checkbox6.indeterminate);
|
||||
t6.done();
|
||||
});
|
||||
|
||||
t6.step(function(){
|
||||
assert_false(checkbox6.checked);
|
||||
assert_false(checkbox6.indeterminate);
|
||||
checkbox6.click();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>input@checked is immediately reflected to 'checked' IDL attribute</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<input style="display: none" type="checkbox" checked="">
|
||||
<script>
|
||||
test(function(){
|
||||
assert_true(document.querySelector('input').checked, 'Examining "checked" IDL attribute value:')
|
||||
});
|
||||
</script>
|
||||
</input>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form input type=color</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/common-microsyntaxes.html#colors">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/states-of-the-type-attribute.html#color-state-(type=color)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var colors = [
|
||||
{value: "", expected: "#000000", testname: "Empty value should return #000000"},
|
||||
{expected: "#000000", testname: "Missing value should return #000000"},
|
||||
{value: "#ffffff", expected: "#ffffff", testname: "Valid simple color: should return #ffffff"},
|
||||
{value: "#FFFFFF", expected: "#ffffff", testname: "Valid simple color (containing LATIN CAPITAL LETTERS): should return #ffffff (converted to ASCII lowercase)"},
|
||||
{value: "#0F0F0F", expected: "#0f0f0f", testname: "Zero-padding"},
|
||||
{value: "#fff", expected: "#000000", testname: "Invalid simple color: not 7 characters long"},
|
||||
{value: "fffffff", expected: "#000000", testname: "Invalid simple color: no starting # sign"},
|
||||
{value: "#gggggg", expected: "#000000", testname: "Invalid simple color: non ASCII hex digits"},
|
||||
{value: "foobar", expected: "#000000", testname: "Invalid simple color: foobar"},
|
||||
{value: "#ffffff\u0000", expected: "#000000", testname: "Invalid color: trailing Null (U+0000)"},
|
||||
{value: "#ffffff;", expected: "#000000", testname: "Invalid color: trailing ;"},
|
||||
{value: " #ffffff", expected: "#000000", testname: "Invalid color: leading space"},
|
||||
{value: "#ffffff ", expected: "#000000", testname: "Invalid color: trailing space"},
|
||||
{value: " #ffffff ", expected: "#000000", testname: "Invalid color: leading+trailing spaces"},
|
||||
{value: "crimson", expected: "#000000", testname: "Invalid color: keyword crimson"},
|
||||
{value: "bisque", expected: "#000000", testname: "Invalid color: keyword bisque"},
|
||||
{value: "currentColor", expected: "#000000", testname: "Invalid color: keyword currentColor"},
|
||||
{value: "transparent", expected: "#000000", testname: "Invalid color: keyword transparent"},
|
||||
{value: "ActiveBorder", expected: "#000000", testname: "Invalid color: keyword ActiveBorder"},
|
||||
{value: "inherit", expected: "#000000", testname: "Invalid color: keyword inherit"},
|
||||
{value: "rgb(1,1,1)", expected: "#000000", testname: "Invalid color: rgb(1,1,1)"},
|
||||
{value: "rgb(1,1,1,1)", expected: "#000000", testname: "Invalid color: rgb(1,1,1,1)"},
|
||||
{value: "#FFFFF\u1F4A9", expected: "#000000", testname: "Invalid color: PILE OF POO (U+1F4A9)"}
|
||||
];
|
||||
for (var i = 0; i < colors.length; i++) {
|
||||
var w = colors[i];
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "color";
|
||||
input.value = w.value;
|
||||
assert_equals(input.value, w.expected);
|
||||
}, w.testname);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
[
|
||||
{
|
||||
"id": "states-of-the-type-attribute",
|
||||
"original_id": "states-of-the-type-attribute",
|
||||
"children": [
|
||||
{
|
||||
"id": "hidden-state-type-hidden",
|
||||
"original_id": "hidden-state-(type=hidden)"
|
||||
},
|
||||
{
|
||||
"id": "text-type-text-state-and-search-state-type-search",
|
||||
"original_id": "text-(type=text)-state-and-search-state-(type=search)"
|
||||
},
|
||||
{
|
||||
"id": "telephone-state-type-tel",
|
||||
"original_id": "telephone-state-(type=tel)"
|
||||
},
|
||||
{
|
||||
"id": "url-state-type-url",
|
||||
"original_id": "url-state-(type=url)"
|
||||
},
|
||||
{
|
||||
"id": "e-mail-state-type-email",
|
||||
"original_id": "e-mail-state-(type=email)"
|
||||
},
|
||||
{
|
||||
"id": "password-state-type-password",
|
||||
"original_id": "password-state-(type=password)"
|
||||
},
|
||||
{
|
||||
"id": "date-and-time-state-type-datetime",
|
||||
"original_id": "date-and-time-state-(type=datetime)"
|
||||
},
|
||||
{
|
||||
"id": "date-state-type-date",
|
||||
"original_id": "date-state-(type=date)"
|
||||
},
|
||||
{
|
||||
"id": "month-state-type-month",
|
||||
"original_id": "month-state-(type=month)"
|
||||
},
|
||||
{
|
||||
"id": "week-state-type-week",
|
||||
"original_id": "week-state-(type=week)"
|
||||
},
|
||||
{
|
||||
"id": "time-state-type-time",
|
||||
"original_id": "time-state-(type=time)"
|
||||
},
|
||||
{
|
||||
"id": "local-date-and-time-state-type-datetime-local",
|
||||
"original_id": "local-date-and-time-state-(type=datetime-local)"
|
||||
},
|
||||
{
|
||||
"id": "number-state-type-number",
|
||||
"original_id": "number-state-(type=number)"
|
||||
},
|
||||
{
|
||||
"id": "range-state-type-range",
|
||||
"original_id": "range-state-(type=range)"
|
||||
},
|
||||
{
|
||||
"id": "color-state-type-color",
|
||||
"original_id": "color-state-(type=color)"
|
||||
},
|
||||
{
|
||||
"id": "checkbox-state-type-checkbox",
|
||||
"original_id": "checkbox-state-(type=checkbox)"
|
||||
},
|
||||
{
|
||||
"id": "radio-button-state-type-radio",
|
||||
"original_id": "radio-button-state-(type=radio)"
|
||||
},
|
||||
{
|
||||
"id": "file-upload-state-type-file",
|
||||
"original_id": "file-upload-state-(type=file)"
|
||||
},
|
||||
{
|
||||
"id": "submit-button-state-type-submit",
|
||||
"original_id": "submit-button-state-(type=submit)"
|
||||
},
|
||||
{
|
||||
"id": "image-button-state-type-image",
|
||||
"original_id": "image-button-state-(type=image)"
|
||||
},
|
||||
{
|
||||
"id": "reset-button-state-type-reset",
|
||||
"original_id": "reset-button-state-(type=reset)"
|
||||
},
|
||||
{
|
||||
"id": "button-state-type-button",
|
||||
"original_id": "button-state-(type=button)"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "input-impl-notes",
|
||||
"original_id": "input-impl-notes"
|
||||
},
|
||||
{
|
||||
"id": "common-input-element-attributes",
|
||||
"original_id": "common-input-element-attributes",
|
||||
"children": [
|
||||
{
|
||||
"id": "the-maxlength-attribute",
|
||||
"original_id": "the-maxlength-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-size-attribute",
|
||||
"original_id": "the-size-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-readonly-attribute",
|
||||
"original_id": "the-readonly-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-required-attribute",
|
||||
"original_id": "the-required-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-multiple-attribute",
|
||||
"original_id": "the-multiple-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-pattern-attribute",
|
||||
"original_id": "the-pattern-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-min-and-max-attributes",
|
||||
"original_id": "the-min-and-max-attributes"
|
||||
},
|
||||
{
|
||||
"id": "the-step-attribute",
|
||||
"original_id": "the-step-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-list-attribute",
|
||||
"original_id": "the-list-attribute"
|
||||
},
|
||||
{
|
||||
"id": "the-placeholder-attribute",
|
||||
"original_id": "the-placeholder-attribute"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "common-input-element-apis",
|
||||
"original_id": "common-input-element-apis"
|
||||
},
|
||||
{
|
||||
"id": "common-event-behaviors",
|
||||
"original_id": "common-event-behaviors"
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Inputs Date</title>
|
||||
<link rel="author" title="Morishita Hiromitsu" href="mailto:hero@asterisk-works.jp">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#date-state-(type=date)">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dates-and-times">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Inputs Date</h1>
|
||||
<div style="display: none">
|
||||
<input id="valid" type="date" value="2011-11-01" min="2011-01-01" max="2011-12-31" />
|
||||
<input id="too_small_value" type="date" value="1999-01-31" min="2011-01-01" max="2011-12-31"/>
|
||||
<input id="too_large_value" type="date" value="2099-01-31" min="2011-01-01" max="2011-12-31"/>
|
||||
<input id="invalid_min" type="date" value="2011-01-01" min="1999-1" max="2011-12-31"/>
|
||||
<input id="invalid_max" type="date" value="2011-01-01" min="2011-01-01" max="2011-13-162-777"/>
|
||||
<input id="min_larger_than_max" type="date" value="2011-01-01" min="2099-01" max="2011-12-31"/>
|
||||
<input id="invalid_value" type="date" value="invalid-date" min="2011-01-01" max="2011-12-31"/>
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").type, "date")
|
||||
}, "date type support on input element");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").value, "2011-11-01");
|
||||
assert_equals(document.getElementById("too_small_value").value, "2011-01-01");
|
||||
assert_equals(document.getElementById("too_large_value").value, "2011-12-31");
|
||||
}, "The value attribute, if specified and not empty, must have a value that is a valid date string.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").min, "2011-01-01"),
|
||||
assert_equals(document.getElementById("invalid_min").min, "")
|
||||
}, "The min attribute, if specified, must have a value that is a valid date string.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").max, "2011-12-31"),
|
||||
assert_equals(document.getElementById("min_larger_than_max").max, "2099-01"),
|
||||
assert_equals(document.getElementById("invalid_max").max, "")
|
||||
},"The max attribute, if specified, must have a value that is a valid date string.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("invalid_value").value, "");
|
||||
}, "User agents must not allow the user to set the value to a non-empty string that is not a valid date string.");
|
||||
test(function() {
|
||||
var numDays = [
|
||||
// the number of days in month month of year year is: 31 if month is 1, 3, 5, 7, 8, 10, or 12;
|
||||
{value: "2014-01-31", expected: "2014-01-31", testname: "January has 31 days"},
|
||||
{value: "2014-01-32", expected: "", testname: "January has 31 days"},
|
||||
{value: "2014-03-31", expected: "2014-03-31", testname: "March has 31 days"},
|
||||
{value: "2014-03-32", expected: "", testname: "March has 31 days"},
|
||||
{value: "2014-05-31", expected: "2014-05-31", testname: "May has 31 days"},
|
||||
{value: "2014-05-32", expected: "", testname: "May has 31 days"},
|
||||
{value: "2014-07-31", expected: "2014-07-31", testname: "July has 31 days"},
|
||||
{value: "2014-07-32", expected: "", testname: "July has 31 days"},
|
||||
{value: "2014-08-31", expected: "2014-08-31", testname: "August has 31 days"},
|
||||
{value: "2014-08-32", expected: "", testname: "August has 31 days"},
|
||||
{value: "2014-10-31", expected: "2014-10-31", testname: "October has 31 days"},
|
||||
{value: "2014-10-32", expected: "", testname: "October has 31 days"},
|
||||
{value: "2014-12-31", expected: "2014-12-31", testname: "December has 31 days"},
|
||||
{value: "2014-12-32", expected: "", testname: "December has 31 days"},
|
||||
// the number of days in month month of year year is: 30 if month is 4, 6, 9, or 11;
|
||||
{value: "2014-04-30", expected: "2014-04-30", testname: "April has 30 days"},
|
||||
{value: "2014-04-31", expected: "", testname: "April has 30 days"},
|
||||
{value: "2014-06-30", expected: "2014-06-30", testname: "June has 30 days"},
|
||||
{value: "2014-06-31", expected: "", testname: "June has 30 days"},
|
||||
{value: "2014-09-30", expected: "2014-09-30", testname: "September has 30 days"},
|
||||
{value: "2014-09-31", expected: "", testname: "September has 30 days"},
|
||||
{value: "2014-11-30", expected: "2014-11-30", testname: "November has 30 days"},
|
||||
{value: "2014-11-31", expected: "", testname: "November has 30 days"},
|
||||
// leap years
|
||||
{value: "2014-02-28", expected: "2014-02-28", testname: "2014 is not a leap year: February has 28 days"},
|
||||
{value: "2014-02-29", expected: "", testname: "2014 is not a leap year: February has 28 days: value should be empty"},
|
||||
{value: "2016-02-29", expected: "2016-02-29", testname: "2016 is a leap year: February has 29 days"}
|
||||
];
|
||||
for (var i = 0; i < numDays.length; i++) {
|
||||
var input = document.createElement("input");
|
||||
input.type = "date";
|
||||
input.value = numDays[i].value;
|
||||
assert_equals(input.value, numDays[i].expected, numDays[i].testname);
|
||||
}
|
||||
}, "Number of days");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form input type=datetime</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/common-microsyntaxes.html#global-dates-and-times">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/states-of-the-type-attribute.html#local-date-and-time-state-(type=datetime)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var datetime = [
|
||||
// valid values
|
||||
{value: "", expected: "", testname: "empty value"},
|
||||
{value: "2014-01-01T11:11Z", expected: "2014-01-01T11:11Z", testname: "datetime input value set to 2014-01-01T11:11Z without min/max"},
|
||||
{value: "2014-01-01 11:11Z", expected: "2014-01-01T11:11Z", testname: "datetime input value set to 2014-01-01 11:11Z without min/max"},
|
||||
{value: "2014-01-01 11:11-04:00", expected: "2014-01-01T15:11Z", testname: "datetime input value set to 2014-01-01 11:11-04:00 without min/max"},
|
||||
{value: "2014-01-01 11:11-0400", expected: "2014-01-01T15:11Z", testname: "datetime input value set to 2014-01-01 11:11-0400 without min/max"},
|
||||
{value: "2014-01-01 11:11:00.000-04:00", expected: "2014-01-01T15:11Z", testname: "datetime input value set to 2014-01-01 11:11:00.000-04:00 without min/max"},
|
||||
// invalid values
|
||||
{value: "2014-01-01 11:11:00.000Z", expected: "", testname: "datetime input value set to 2014-01-01 11:11:00.000Z without min/max"},
|
||||
{value: "2014-01-01 11:11:00.000", expected: "", testname: "datetime input value set to 2014-01-01 11:11:00.000 without min/max"},
|
||||
{value: "2014-01-01 11:11:00.000+", expected: "", testname: "datetime input value set to 2014-01-01 11:11:00.000+ without min/max"},
|
||||
{value: "2014-01-01 11:11:00.000+24", expected: "", testname: "datetime input value set to 2014-01-01 11:11:00.000+24 without min/max"},
|
||||
{value: "2014-01-01 11:11:00.000+2360", expected: "", testname: "datetime input value set to 2014-01-01 11:11:00.000+2360 without min/max"},
|
||||
{value: "2014-01-0 11:11:00.000+0400", expected: "", testname: "datetime input value set to 2014-01-0 11:11:00.000+0400 without min/max"},
|
||||
{value: "2014-01-01 11:1:00.000+0400", expected: "", testname: "datetime input value set to 2014-01-01 11:1:00.000+0400 without min/max"},
|
||||
// min/max
|
||||
{value: "2014-01-01 11:11Z", attributes: { min: "2014-01-01T11:10Z" }, expected: "2014-01-01T11:11Z", testname: "Value >= min attribute"},
|
||||
{value: "2014-01-01 11:10Z", attributes: { min: "2014-01-01T11:11Z" }, expected: "2014-01-01T11:11Z", testname: "Value < min attribute"},
|
||||
{value: "2014-01-01 11:10Z", attributes: { max: "2014-01-01T11:11Z" }, expected: "2014-01-01T11:11Z", testname: "Value <= max attribute"},
|
||||
{value: "2014-01-01 11:11Z", attributes: { max: "2014-01-01T11:10Z" }, expected: "2014-01-01T11:10Z", testname: "Value > max attribute"}
|
||||
];
|
||||
for (var i = 0; i < datetime.length; i++) {
|
||||
var w = datetime[i];
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "datetime";
|
||||
input.value = w.value;
|
||||
for(var attr in w.attributes) {
|
||||
input[attr] = w.attributes[attr];
|
||||
}
|
||||
assert_equals(input.value, w.expected);
|
||||
}, w.testname);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form input type=datetime-local</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/common-microsyntaxes.html#local-dates-and-times">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/states-of-the-type-attribute.html#local-date-and-time-state-(type=datetime-local)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var datetimeLocal = [
|
||||
{value: "", expected: "", testname: "empty value"},
|
||||
{value: "2014-01-01T11:11:11.111", expected: "2014-01-01T11:11:11.111", testname: "datetime-local input value set to 2014-01-01T11:11:11.111 without min/max"},
|
||||
{value: "2014-01-01 11:11:11.111", expected: "2014-01-01T11:11:11.111", testname: "datetime-local input value set to 2014-01-01 11:11:11.111 without min/max"},
|
||||
{value: "2014-01-01 11:11", expected: "2014-01-01T11:11", testname: "datetime-local input value set to 2014-01-01 11:11 without min/max"},
|
||||
{value: "2014-01-01 00:00:00.000", expected: "2014-01-01T00:00", testname: "datetime-local input value set to 2014-01-01 00:00:00.000 without min/max"},
|
||||
{value: "2014-01-0 11:11", expected: "", testname: "datetime-local input value set to 2014-01-0 11:11 without min/max"},
|
||||
{value: "2014-01-01 11:1", expected: "", testname: "datetime-local input value set to 2014-01-01 11:1 without min/max"},
|
||||
{value: "2014-01-01 11:12", attributes: { min: "2014-01-01 11:11" }, expected: "2014-01-01T11:12", testname: "Value >= min attribute"},
|
||||
{value: "2014-01-01 11:10", attributes: { min: "2014-01-01 11:11" }, expected: "2014-01-01T11:11", testname: "Value < min attribute"},
|
||||
{value: "2014-01-01 11:10", attributes: { max: "2014-01-01 11:11" }, expected: "2014-01-01T11:10", testname: "Value <= max attribute"},
|
||||
{value: "2014-01-01 11:12", attributes: { max: "2014-01-01 11:11" }, expected: "2014-01-01T11:11", testname: "Value > max attribute"}
|
||||
];
|
||||
for (var i = 0; i < datetimeLocal.length; i++) {
|
||||
var w = datetimeLocal[i];
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "datetime-local";
|
||||
input.value = w.value;
|
||||
for(var attr in w.attributes) {
|
||||
input[attr] = w.attributes[attr];
|
||||
}
|
||||
assert_equals(input.value, w.expected);
|
||||
}, w.testname);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Date & Time Inputs</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="https://html.spec.whatwg.org/multipage/#the-input-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Date & Time Inputs</h1>
|
||||
<div style="display: none">
|
||||
<input type="date" value="2011-12-01" min="2011-12-01" max="2011-12-31" step="5" />
|
||||
<input type="time" value= "12:00" min="11:30" max="14:00" step="600" />
|
||||
<input type="datetime" value="2011-12-01T12:00Z" min="2011-12-01T12:00Z" max="2011-12-31T22:00Z" step="7200" />
|
||||
<input type="month" value="2011-01" min="2011-01" max="2011-12" step="2" />
|
||||
<input type="week" value="2011-W40" min="2011-W20" max="2011-W50" step="2" />
|
||||
</div>
|
||||
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].type, "date")}, "date type support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].value, "2011-12-01")}, "[date] The value must be a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-value" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].min, "2011-12-01")}, "[date] The min attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].max, "2011-12-31")}, "[date] The max attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].step, "5")}, "[date] The step attribute must be expressed in seconds", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-step" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[0].stepUp) == "function")}, "[date] stepUp method support on input 'date' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[0].stepDown) == "function")}, "[date] stepDown method support on input 'date' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" });
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[1].type, "time")}, "[time] time type support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[1].value, "12:00")}, "[time] The value must be a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-value" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[1].min, "11:30")}, "[time] The min attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[1].max, "14:00")}, "[time] The max attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[1].step, "600")}, "[time] The step attribute must be expressed in seconds", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-step" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[1].stepUp) == "function")}, "[time] stepUp method support on input 'time' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[1].stepDown) == "function")}, "[time] stepDown method support on input 'time' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" });
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[2].type, "datetime")}, "datetime type support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[2].value, "2011-12-01T12:00Z")}, "[datetime] The must be a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-value" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[2].min, "2011-12-01T12:00Z")}, "[datetime] The min attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[2].max, "2011-12-31T22:00Z")}, "[datetime] The max attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[2].step, "7200")}, "[datetime] The step attribute must be expressed in seconds", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-step" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[2].stepUp) == "function")}, "[datetime] stepUp method support on input 'datetime' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[2].stepDown) == "function")}, "[datetime] stepDown method support on input 'datetime' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" });
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[3].type, "month")}, "month type support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[3].value, "2011-01")}, "[month] The value must be a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-value" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[3].min, "2011-01")}, "[month] The min attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[3].max, "2011-12")}, "[month] The max attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[3].step, "2")}, "[month] The step attribute must be expressed in seconds", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-step" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[3].stepUp) == "function")}, "[month] stepUp method support on input 'month' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[3].stepDown) == "function")}, "[month] stepDown method support on input 'month' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" });
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[4].type, "week")}, "week type support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[4].value, "2011-W40")}, "[week] The value must be a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-value" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[4].min, "2011-W20")}, "[week] The min attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[4].max, "2011-W50")}, "[week] The max attribute must have a value that is a valid global date and time string", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-max" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[4].step, "2")}, "[week] The step attribute must be expressed in seconds", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-step" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[4].stepUp) == "function")}, "[week] stepUp method support on input 'week' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepup" });
|
||||
test(function() {assert_true(typeof(document.getElementsByTagName("input")[4].stepDown) == "function")}, "[week] stepDown method support on input 'week' element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown" });
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Input Email</title>
|
||||
<link rel="author" title="Kazuki Kanamori" href="mailto:yogurito@gmail.com">
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#e-mail-state-(type=email)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<input type="email" id="single_email" value="user@example.com"/>
|
||||
<input type="email" id="multiple_email" value="user1@example.com, user2@test.com" multiple/>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var single = document.getElementById('single_email'),
|
||||
mult = document.getElementById('multiple_email'),
|
||||
|
||||
test(function(){
|
||||
assert_false(single.multiple);
|
||||
}, "single_email doesn't have the multiple attribute");
|
||||
|
||||
test(function(){
|
||||
single.value = 'user2@example.com\u000A';
|
||||
assert_equals(single.value, 'user2@example.com');
|
||||
single.value = 'user3@example.com\u000D';
|
||||
assert_equals(single.value, 'user3@example.com');
|
||||
}, 'value should be sanitized: strip line breaks');
|
||||
|
||||
test(function(){
|
||||
single.value = 'user4@example.com';
|
||||
assert_true(single.validity.valid);
|
||||
single.value = 'example.com';
|
||||
assert_false(single.validity.valid);
|
||||
}, 'Email address validity');
|
||||
|
||||
test(function(){
|
||||
single.setAttribute('multiple', true);
|
||||
single.value = ' user@example.com , user2@example.com ';
|
||||
assert_equals(single.value, 'user@example.com,user2@example.com');
|
||||
single.removeAttribute('multiple');
|
||||
assert_equals(single.value, 'user@example.com,user2@example.com');
|
||||
}, 'When the multiple attribute is removed, the user agent must run the value sanitization algorithm');
|
||||
|
||||
test(function(){
|
||||
assert_true(mult.multiple);
|
||||
}, "multiple_email has the multiple attribute");
|
||||
|
||||
test(function(){
|
||||
mult.value = ' user1@example.com , user2@test.com, user3@test.com ';
|
||||
assert_equals(mult.value, 'user1@example.com,user2@test.com,user3@test.com');
|
||||
}, "run the value sanitization algorithm after setting a new value");
|
||||
|
||||
test(function(){
|
||||
mult.value = 'user1@example.com,user2@test.com,user3@test.com';
|
||||
assert_true(mult.validity.valid);
|
||||
|
||||
mult.value = 'u,ser1@example.com,user2@test.com,user3@test.com';
|
||||
assert_false(mult.validity.valid);
|
||||
}, "valid value is a set of valid email addresses separated by a single ','");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type file</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#file-upload-state-(type=file)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<p>Manual test: clicking on the input should open a prompt allowing you to select a file.</p>
|
||||
<input type=file id=file>
|
||||
<script>
|
||||
setup({explicit_timeout:true});
|
||||
|
||||
var input = document.getElementById('file'),
|
||||
t1 = async_test("selecting files should fire the input event at the input element"),
|
||||
t2 = async_test("selecting files should fire the change event at the input element");
|
||||
|
||||
document.getElementById('file').oninput = t1.step_func_done(function(e) {
|
||||
assert_true(e.bubbles, "input event bubbles");
|
||||
assert_true(e.isTrusted, "input event should be trusted");
|
||||
assert_false(e.cancelable, "input event shoud not be cancelable");
|
||||
})
|
||||
document.getElementById('file').onchange = t2.step_func_done(function(e) {
|
||||
assert_true(e.bubbles, "change event bubbles");
|
||||
assert_true(e.isTrusted, "change event should be trusted");
|
||||
assert_false(e.cancelable, "change event shoud not be cancelable");
|
||||
assert_true(input.files instanceof FileList);
|
||||
assert_equals(input.value, "C:\\fakepath\\" + input.files[0].name);
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>HTMLInputElement#files</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id=log></div>
|
||||
<script>
|
||||
var types = [
|
||||
"hidden",
|
||||
"text",
|
||||
"search",
|
||||
"tel",
|
||||
"url",
|
||||
"email",
|
||||
"password",
|
||||
"datetime",
|
||||
"date",
|
||||
"month",
|
||||
"week",
|
||||
"time",
|
||||
"datetime-local",
|
||||
"number",
|
||||
"range",
|
||||
"color",
|
||||
"checkbox",
|
||||
"radio",
|
||||
"submit",
|
||||
"image",
|
||||
"reset",
|
||||
"button",
|
||||
];
|
||||
|
||||
types.forEach(function(type) {
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = type;
|
||||
assert_equals(input.files, null, "files should be null");
|
||||
}, "files for input type=" + type);
|
||||
});
|
||||
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "file";
|
||||
assert_not_equals(input.files, null);
|
||||
assert_true(input.files instanceof FileList, "files should be a FileList");
|
||||
var files = input.files;
|
||||
assert_equals(input.files, files, "files should return the same object");
|
||||
}, "files for input type=file");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Hidden input element</title>
|
||||
<link rel="author" title="Kinuko Yasuda" href="mailto:kinuko@chromium.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#hidden-state-(type=hidden)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Hidden input element</h1>
|
||||
<div style="display: none">
|
||||
|
||||
<input id="hidden" type="hidden" />
|
||||
<input id="hidden_with_value" type="hidden" value="foo" />
|
||||
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById("hidden").value, "");
|
||||
assert_equals(document.getElementById("hidden_with_value").value, "foo");
|
||||
}, "Value returns the current value for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
document.getElementById("hidden").value = "A";
|
||||
assert_equals(document.getElementById("hidden").value, "A");
|
||||
document.getElementById("hidden").value = "B";
|
||||
assert_equals(document.getElementById("hidden").value, "B");
|
||||
}, "Setting value changes the current value for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById("hidden").files, null);
|
||||
}, "files attribute must return null for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById("hidden").valueAsDate, null);
|
||||
}, "valueAsDate attribute must return null for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById("hidden").valueAsNumber, NaN);
|
||||
}, "valueAsNumber attribute must return NaN for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById("hidden").list, null);
|
||||
}, "list attribute must return null for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
var el = document.getElementById("hidden");
|
||||
assert_throws("InvalidStateError", function() { el.stepDown(); }, "");
|
||||
}, "stepDown does not apply for hidden");
|
||||
|
||||
test(
|
||||
function() {
|
||||
var el = document.getElementById("hidden");
|
||||
assert_throws("InvalidStateError", function() { el.stepUp(); }, "");
|
||||
}, "stepUp does not apply for hidden");
|
||||
|
||||
test(function(){
|
||||
var el = document.getElementById("hidden");
|
||||
assert_false(el.willValidate);
|
||||
}, "input type=hidden is barred from constraint validation");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type image reference file</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<img src="/media/poster.png"/>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type image</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#image-button-state-(type=image)">
|
||||
<link rel="match" href="image01-ref.html">
|
||||
<input type=image id=image src="/media/poster.png">
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>The selection interface members</title>
|
||||
<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#textFieldSelection">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
var valid = ["text", "search", "url", "tel", "email", "password"];
|
||||
var invalid = ["hidden", "datetime", "date", "month", "week", "datetime-local",
|
||||
"number", "range", "color", "checkbox", "radio", "button",
|
||||
"file", "submit", "image", "reset"];
|
||||
valid.forEach(function(aType) {
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = aType;
|
||||
assert_equals(input.type, aType, "Input type unsupported")
|
||||
input.select();
|
||||
var a = input.selectionStart;
|
||||
input.selectionStart = 0;
|
||||
a = input.selectionEnd;
|
||||
input.selectionEnd = 0;
|
||||
input.setSelectionRange(0, 0);
|
||||
}, "Selection attributes should apply to type " + aType)
|
||||
})
|
||||
|
||||
invalid.forEach(function(aType) {
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = aType;
|
||||
assert_equals(input.type, aType, "Input type unsupported")
|
||||
assert_throws("INVALID_STATE_ERR", function() { input.select(); }, "Should throw with type " + aType);
|
||||
assert_throws("INVALID_STATE_ERR", function() { var a = input.selectionStart; });
|
||||
assert_throws("INVALID_STATE_ERR", function() { input.selectionStart = 0; });
|
||||
assert_throws("INVALID_STATE_ERR", function() { var a = input.selectionEnd; });
|
||||
assert_throws("INVALID_STATE_ERR", function() { input.selectionEnd = 0; });
|
||||
assert_throws("INVALID_STATE_ERR", function() { input.setSelectionRange(0, 0); });
|
||||
}, "Selection attributes should not apply to type " + aType)
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE HTML>
|
||||
<head>
|
||||
<title>input type button</title>
|
||||
<link rel="author" title="Takeharu.Oshida" href="mailto:georgeosddev@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#button-state-(type=button)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="hide" style="display">
|
||||
<input type="button"/>
|
||||
<input type="button" value="BUTTON"/>
|
||||
<form action="/" method="get" onsubmit="isSubmitted = true;return false;">
|
||||
<input type="button" value="mutable"/>
|
||||
</form>
|
||||
<form action="/" method="get" onsubmit="isSubmitted = true;return false;">
|
||||
<input type="button" value="immutable" disabled/>
|
||||
</form>
|
||||
</div>
|
||||
<script>
|
||||
var isSubmitted = false;
|
||||
var buttons = document.getElementsByTagName("input");
|
||||
|
||||
test(function() {
|
||||
assert_equals(buttons[0].click(), undefined, "The input element represents a button with no default behavior");
|
||||
},"default behavior");
|
||||
|
||||
test(function() {
|
||||
assert_equals(buttons[0].value, "", "It must be the empty string");
|
||||
},"empty value attribute");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("hide").style.display = "block";
|
||||
assert_not_equals(buttons[0].offsetWidth, buttons[1].offsetWidth, "If the element has a value attribute, the button's label must be the value of that attribute");
|
||||
document.getElementById("hide").style.display = "none";
|
||||
},"label value");
|
||||
|
||||
test(function() {
|
||||
isSubmitted = false;
|
||||
buttons[2].click();
|
||||
assert_equals(isSubmitted, false, "If the element is mutable, the element's activation behavior is to do nothing.");
|
||||
},"mutable element's activation behavior is to do nothing.");
|
||||
|
||||
test(function() {
|
||||
isSubmitted = false;
|
||||
buttons[3].click()
|
||||
assert_equals(isSubmitted, false, "If the element is immutable, the element has no activation behavior.");
|
||||
},"immutable element has no activation behavior.");
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE HTML>
|
||||
<head>
|
||||
<title>input type checkbox</title>
|
||||
<link rel="author" title="Gary Gao" href="mailto:angrytoast@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#checkbox-state-(type=checkbox)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div style="display:none;">
|
||||
<input id="checkbox_default" type="checkbox" width="20" />
|
||||
|
||||
<input id="checkbox_checked" type="checkbox" checked />
|
||||
|
||||
<input id="checkbox_indeterminate" type="checkbox" />
|
||||
|
||||
<input id="checkbox_default_value" type="checkbox" />
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
var checkbox_default = document.getElementById('checkbox_default'),
|
||||
checkbox_checked = document.getElementById('checkbox_checked'),
|
||||
checkbox_indeterminate = document.getElementById('checkbox_indeterminate'),
|
||||
checkbox_default_value = document.getElementById('checkbox_default_value');
|
||||
|
||||
test(function() {
|
||||
assert_false(checkbox_default.checked);
|
||||
}, "default checkbox has no checkedness state");
|
||||
|
||||
test(function() {
|
||||
assert_true(checkbox_checked.checked);
|
||||
}, "checkbox with initial state set to checked has checkedness state");
|
||||
|
||||
test(function() {
|
||||
checkbox_default.checked = 'chicken'
|
||||
assert_true(checkbox_default.checked);
|
||||
}, "changing the checked attribute to a string sets the checkedness state");
|
||||
|
||||
test(function() {
|
||||
assert_false(checkbox_indeterminate.indeterminate);
|
||||
}, "a checkbox has an indeterminate state set to false onload");
|
||||
|
||||
test(function() {
|
||||
checkbox_indeterminate.indeterminate = true,
|
||||
assert_true(checkbox_indeterminate.indeterminate);
|
||||
}, "on setting, a checkbox's indeterminate state must be set to the new value and returns the last value it was set to");
|
||||
|
||||
test(function() {
|
||||
assert_equals(checkbox_default_value.value, 'on');
|
||||
}, "default/on: on getting, if the element has a value attribute, it must return that attribute's value; otherwise, it must return the string 'on'");
|
||||
|
||||
test(function() {
|
||||
checkbox_default_value.value = 'chicken'
|
||||
assert_equals(checkbox_default_value.value, 'chicken');
|
||||
}, "on getting, if the element has a value attribute, it must return that attribute's value");
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Inputs Month</title>
|
||||
<link rel="author" title="Morishita Hiromitsu" href="mailto:hero@asterisk-works.jp">
|
||||
<link rel="author" title="kaseijin" href="mailto:pcmkas@gmail.com">
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#months">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#month-state-(type=month)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Inputs Month</h1>
|
||||
<div style="display: none">
|
||||
<input id="valid" type="month" value="2011-11" min="2011-01" max="2011-12" />
|
||||
<input id="too_small_value" type="month" value="1999-01" min="2011-01" max="2011-12"/>
|
||||
<input id="too_large_value" type="month" value="2099-01" min="2011-01" max="2011-12"/>
|
||||
<input id="invalid_value" type="month" value="invalid-month" min="2011-01" max="2011-12"/>
|
||||
<input id="invalid_min" type="month" value="2011-01" min="invalid_min" max="2011-12"/>
|
||||
<input id="invalid_max" type="month" value="2011-01" min="2011-01" max="invalid_max"/>
|
||||
<input id="min_larger_than_max" type="month" value="2011-01" min="2099-01" max="2011-12"/>
|
||||
<input id="value_can_be_empty_string" type="month" value="2013-06" />
|
||||
<input id="invalid_value_with_two_digits_year" type="month" value="13-06" />
|
||||
<input id="invalid_value_is_set" type="month" />
|
||||
<input id="invalid_value_is_set_to_valid_value" type="month" value="2013-05" />
|
||||
<input id="step_attribute_is_invalid_value" type="month" value="2013-06" step="invalid_step_value" />
|
||||
<input id="invalid_month_too_high" type="month" value="2013-13" />
|
||||
<input id="invalid_month_too_low" type="month" value="2013-00" />
|
||||
</div>
|
||||
|
||||
<div id="log"></div>
|
||||
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").type, "month")
|
||||
}, "month type support on input element");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").value, "2011-11"),
|
||||
assert_equals(document.getElementById("too_small_value").value, "2011-01"),
|
||||
assert_equals(document.getElementById("too_large_value").value, "2011-12")
|
||||
}, "The value attribute, if specified and not empty, must have a value that is a valid month string");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").min, "2011-01"),
|
||||
assert_equals(document.getElementById("invalid_min").min, "")
|
||||
}, "The min attribute, if specified, must have a value that is a valid month string.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("valid").max, "2011-12"),
|
||||
assert_equals(document.getElementById("min_larger_than_max").max, "2099-01"),
|
||||
assert_equals(document.getElementById("invalid_max").max, "")
|
||||
}, "The max attribute, if specified, must have a value that is a valid month string");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("invalid_value").value, "")
|
||||
}, "User agents must not allow the user to set the value to a non-empty string that is not a valid month string.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("value_can_be_empty_string").value = "";
|
||||
assert_equals(document.getElementById("value_can_be_empty_string").value, "")
|
||||
}, "Month value can be empty string.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("invalid_value_with_two_digits_year").value, "")
|
||||
}, "When value attribute has two digits year value, the value,which is invalid, must return empty string.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("invalid_value_is_set").value = "invalid value";
|
||||
assert_equals(document.getElementById("invalid_value_is_set").value, "")
|
||||
}, "When value is set with invalid value, the value must return empty string.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("invalid_value_is_set_to_valid_value").value = "invalid value";
|
||||
assert_equals(document.getElementById("invalid_value_is_set_to_valid_value").value, "2013-05")
|
||||
}, "When value is given invalid value to non-empty valid string, the value must be same as before.");
|
||||
|
||||
test(function() {
|
||||
document.getElementById("step_attribute_is_invalid_value").stepUp();
|
||||
assert_equals(document.getElementById("step_attribute_is_invalid_value").value, "2013-07")
|
||||
}, "When step attribute is given invalid value, it must ignore the invalid value and use defaul value instead.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("invalid_month_too_high").value, "");
|
||||
}, "Month should be <= 13: If the value of the element is not a valid month string, then set it to the empty string instead.");
|
||||
|
||||
test(function() {
|
||||
assert_equals(document.getElementById("invalid_month_too_low").value, "");
|
||||
}, "Month should be > 0: If the value of the element is not a valid month string, then set it to the empty string instead.>");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form input type=number</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#password-state-(type=number)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var numbers = [
|
||||
{value: "", expected: "", testname: "empty value"},
|
||||
{value: "11", expected: "11", testname: "value = 11"},
|
||||
{value: "11.12", expected: "11.12", testname: "value = 11.12"},
|
||||
{value: "-11111", expected: "-11111", testname: "value = -11111"},
|
||||
{value: "-11111.123", expected: "-11111.123", testname: "value = -11111.123"},
|
||||
{value: "1e2", expected: "1e2", testname: "value = 1e2"},
|
||||
{value: "1E2", expected: "1E2", testname: "value = 1E2"},
|
||||
{value: "1e+2", expected: "1e+2", testname: "value = 1e+2"},
|
||||
{value: "1e-2", expected: "1e-2", testname: "value = 1e-2"},
|
||||
{value: "1d+2", expected: "", testname: "value is not a valid floating-point number: 1d+2"},
|
||||
{value: "foobar", expected: "", testname: "value not a valid floating-point number: random string"},
|
||||
{value: "11", attributes: { min: "10" }, expected: "11", testname: "Value >= min attribute"},
|
||||
{value: "9", attributes: { min: "10" }, expected: "9", testname: "Value < min attribute"},
|
||||
{value: "19", attributes: { max: "20" }, expected: "19", testname: "Value <= max attribute"},
|
||||
{value: "21", attributes: { max: "20" }, expected: "21", testname: "Value > max attribute"},
|
||||
{value: ".1", expected: ".1", testname: "value with a leading '.'"},
|
||||
{value: "1.", expected: "", testname: "value ending with '.'"},
|
||||
{value: "-0", expected: "-0", testname: "value = -0"},
|
||||
{value: "Infinity", expected: "", testname: " value = Infinity"},
|
||||
{value: "-Infinity", expected: "", testname: "value = -Infinity"},
|
||||
{value: "NaN", expected: "", testname: "value = NaN"},
|
||||
{value: "9007199254740993", expected: "9007199254740992", testname: "value = 2^53+1"},
|
||||
{value: "2e308", expected: "", testname: "value >= Number.MAX_VALUE"},
|
||||
{value: "1e", expected: "", testname: "value = 1e"},
|
||||
{value: "+1", expected: "1", testname: "value = +1"},
|
||||
{value: "+", expected: "", testname: "value = '+'"},
|
||||
{value: "-", expected: "", testname: "value = '-'"},
|
||||
{value: " 1", expected: "1", testname: "value with a leading whitespace"},
|
||||
{value: "1trailing junk", expected: "1", testname: "value = 1trailing junk"}
|
||||
];
|
||||
for (var i = 0; i < numbers.length; i++) {
|
||||
var w = numbers[i];
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "number";
|
||||
input.value = w.value;
|
||||
for(var attr in w.attributes) {
|
||||
input[attr] = w.attributes[attr];
|
||||
}
|
||||
assert_equals(input.value, w.expected);
|
||||
}, w.testname);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Password input element</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#password-state-%28type=password%29">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<div style="display: none">
|
||||
<input id="password" type="password" />
|
||||
<input id=password2 type=password value="password">
|
||||
<input id="password_with_value" type="password" value="foobar" />
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
setup(function() {
|
||||
window.password = document.getElementById("password");
|
||||
});
|
||||
|
||||
test(function() {
|
||||
assert_equals(password.value, "");
|
||||
assert_equals(document.getElementById("password_with_value").value, "foobar");
|
||||
}, "Value returns the current value for password");
|
||||
|
||||
test(function() {
|
||||
password.value = "A";
|
||||
assert_equals(password.value, "A");
|
||||
assert_equals(password.getAttribute("value"), null);
|
||||
password.value = "B";
|
||||
assert_equals(password.value, "B");
|
||||
assert_equals(password.getAttribute("value"), null);
|
||||
}, "Setting value changes the current value for password, but not the value content attribute");
|
||||
|
||||
test(function() {
|
||||
// Any LF (\n) must be stripped.
|
||||
password.value = "\nAB";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "A\nB";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "AB\n";
|
||||
assert_equals(password.value, "AB");
|
||||
|
||||
// Any CR (\r) must be stripped.
|
||||
password.value = "\rAB";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "A\rB";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "AB\r";
|
||||
assert_equals(password.value, "AB");
|
||||
|
||||
// Any combinations of LF CR must be stripped.
|
||||
password.value = "\r\nAB";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "A\r\nB";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "AB\r\n";
|
||||
assert_equals(password.value, "AB");
|
||||
password.value = "\r\nA\n\rB\r\n";
|
||||
assert_equals(password.value, "AB");
|
||||
}, "Value sanitization algorithm should strip line breaks for password");
|
||||
|
||||
var pass = document.getElementById('password2');
|
||||
|
||||
test(function(){
|
||||
assert_equals(pass.value, "password");
|
||||
pass.value = " pass word ";
|
||||
assert_equals(pass.value, " pass word ");
|
||||
}, "sanitization algorithm doesn't strip leading and trailing whitespaces");
|
||||
|
||||
test(function(){
|
||||
pass.value = "pass\u000Aword";
|
||||
assert_equals(pass.value, "password");
|
||||
pass.value = "\u000Apassword\u000A";
|
||||
assert_equals(pass.value, "password");
|
||||
pass.value = "pass\u000Dword";
|
||||
assert_equals(pass.value, "password");
|
||||
pass.value = "\u000Dpassword\u000D";
|
||||
assert_equals(pass.value, "password");
|
||||
}, "sanitization algorithm strips line breaks");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Pattern Attribute</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="https://html.spec.whatwg.org/multipage/#attr-input-pattern">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h1>Pattern Attribute</h1>
|
||||
<div style="display: none">
|
||||
<input pattern="[a-z]{3}" value="abcd" title="three letters max"/>
|
||||
</div>
|
||||
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].getAttribute("pattern"), "[a-z]{3}")}, "pattern attribute support on input element");
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>radio group name compatibility caseless</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel="help" href="http://people.mozilla.org/~jdaggett/tests/radiobuttonnamecase.html">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<input id=r1 type="radio" name="sImPlE">
|
||||
<input id=r2 type="radio" name="simple">
|
||||
<input id=r3 type="radio" name="SIMPLE">
|
||||
|
||||
<input id=r4 type="radio" name="paSSfield-killroyß">
|
||||
<input id=r5 type="radio" name="passfield-killroyß">
|
||||
<input id=r6 type="radio" name="PASSFIELD-KILLROYß">
|
||||
<input id=r7 type="radio" name="paſſfield-killroyß">
|
||||
<input id=r8 type="radio" name="passfield-Killroyß">
|
||||
<input id=r9 type="radio" name="paßfield-killroyß">
|
||||
<input id=r10 type="radio" name="paẞfield-killroyß">
|
||||
<input id=r11 type="radio" name="passfield-killroyẞ">
|
||||
<input id=r12 type="radio" name="passfield-killroyß">
|
||||
<input id=r13 type="radio" name="passfıeld-killroyß">
|
||||
<input id=r14 type="radio" name="passfİeld-killroyß">
|
||||
|
||||
<input id=r15 type="radio" name="глупый">
|
||||
<input id=r16 type="radio" name="глупый">
|
||||
<input id=r17 type="radio" name="ГЛУПЫЙ">
|
||||
<input id=r18 type="radio" name="ГЛУПЫЙ">
|
||||
|
||||
<input id=r19 type="radio" name="åωk">
|
||||
<input id=r20 type="radio" name="ÅΩK">
|
||||
<input id=r21 type="radio" name="Åωk">
|
||||
<input id=r22 type="radio" name="åΩk">
|
||||
<input id=r23 type="radio" name="åωK">
|
||||
|
||||
<input id=r24 type="radio" name="blah1">
|
||||
<input id=r25 type="radio" name="blah①">
|
||||
<input id=r26 type="radio" name="blⒶh1">
|
||||
<input id=r27 type="radio" name="blⓐh1">
|
||||
|
||||
<input id=r28 type="radio" name="tÉdz5アパートFi">
|
||||
<input id=r29 type="radio" name="TÉDZ5アパートFi">
|
||||
<input id=r30 type="radio" name="TéDZ⁵アパートFi">
|
||||
<input id=r31 type="radio" name="tÉdz5㌀Fi">
|
||||
<input id=r32 type="radio" name="tÉdz5アパートFi">
|
||||
<input id=r33 type="radio" name="tÉdz5アパートFi">
|
||||
<input id=r34 type="radio" name="TÉDZ⁵アパートFi">
|
||||
<input id=r35 type="radio" name="TÉDZ5アパートfi">
|
||||
|
||||
<input id=r36 type="radio" name="ΣΣ">
|
||||
<input id=r37 type="radio" name="σς">
|
||||
<script>
|
||||
var groups = [["r1" ,"r2", "r3"],
|
||||
["r4", "r5", "r6", "r7", "r8", "r9", "r10", "r11", "r12", "r13", "r14"],
|
||||
["r15", "r16", "r17", "r18"],
|
||||
["r19", "r20", "r21", "r22", "r23"],
|
||||
["r24", "r25", "r26", "r27"],
|
||||
["r28", "r29", "r30", "r31", "r32", "r33", "r34", "r35"],
|
||||
["r36", "r37"]],
|
||||
groupName = ["sImPlE", "paSSfield-killroyß", "глупый", "åωk", "blah1", "tÉdz5アパートFi", "ΣΣ"];
|
||||
groups.forEach(function(group, index) {
|
||||
test(function(){
|
||||
group.forEach(function(radioId) {
|
||||
assert_false(document.getElementById(radioId).checked);
|
||||
});
|
||||
for (var i = 0; i < group.length; i++) {
|
||||
document.getElementById(group[i]).checked = true;
|
||||
assert_true(document.getElementById(group[i]).checked);
|
||||
for (var j = 0; j < group.length; j++) {
|
||||
if (j != i) assert_false(document.getElementById(group[j]).checked);
|
||||
}
|
||||
}
|
||||
}, "radio button group name = " + groupName[index]);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type radio</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#radio-button-state-(type=radio)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<input type=radio name=group1 id=radio1>
|
||||
<input type=radio name=group1 id=radio2>
|
||||
|
||||
<input type=radio name=groüp2 id=radio3>
|
||||
<input type=radio name=groÜp2 id=radio4>
|
||||
|
||||
<input type=radio id=radio5>
|
||||
<input type=radio id=radio6 disabled>
|
||||
|
||||
<input type=radio id=radio71 checked>
|
||||
<input type=radio id=radio72>
|
||||
|
||||
<input type=radio name=group3 id=radio8 checked>
|
||||
<input type=radio name=group3 id=radio9>
|
||||
<input type=radio name=group4 id=radio10>
|
||||
<input type=radio name=group4 id=radio11 checked>
|
||||
|
||||
|
||||
<script>
|
||||
var radio1 = document.getElementById('radio1'),
|
||||
radio2 = document.getElementById('radio2'),
|
||||
radio3 = document.getElementById('radio3'),
|
||||
radio4 = document.getElementById('radio4'),
|
||||
radio5 = document.getElementById('radio5'),
|
||||
radio6 = document.getElementById('radio6'),
|
||||
radio71 = document.getElementById('radio71'),
|
||||
radio72 = document.getElementById('radio72'),
|
||||
radio8 = document.getElementById('radio8'),
|
||||
radio9 = document.getElementById('radio9'),
|
||||
radio10 = document.getElementById('radio10'),
|
||||
radio11 = document.getElementById('radio11'),
|
||||
t1 = async_test("click on mutable radio fires the input event"),
|
||||
t2 = async_test("click on mutable radio fires the change event"),
|
||||
t3 = async_test("click on non-mutable radio doesn't fire the input event"),
|
||||
t4 = async_test("click on non-mutable radio doesn't fire the change event"),
|
||||
t5 = async_test("canceled activation steps on unchecked radio"),
|
||||
input_fired = false,
|
||||
change_fired = false;
|
||||
|
||||
test(function(){
|
||||
assert_false(radio1.checked);
|
||||
assert_false(radio2.checked);
|
||||
radio1.checked = true;
|
||||
assert_true(radio1.checked);
|
||||
assert_false(radio2.checked);
|
||||
radio2.checked = true;
|
||||
assert_false(radio1.checked);
|
||||
assert_true(radio2.checked);
|
||||
}, "only one control of a radio button group can have its checkedness set to true");
|
||||
|
||||
test(function(){
|
||||
assert_false(radio3.checked);
|
||||
assert_false(radio4.checked);
|
||||
radio3.checked = true;
|
||||
assert_true(radio3.checked);
|
||||
assert_false(radio4.checked);
|
||||
radio4.checked = true;
|
||||
assert_false(radio3.checked);
|
||||
assert_true(radio4.checked);
|
||||
}, "radio inputs with name attributes groüp2 and groÜp2 belong to the same radio button group");
|
||||
|
||||
test(function(){
|
||||
assert_true(radio8.checked);
|
||||
assert_false(radio9.checked);
|
||||
assert_false(radio10.checked);
|
||||
assert_true(radio11.checked);
|
||||
radio9.name="group4";
|
||||
radio9.checked = true;
|
||||
assert_true(radio8.checked);
|
||||
assert_true(radio9.checked);
|
||||
assert_false(radio10.checked);
|
||||
assert_false(radio11.checked);
|
||||
}, "changing the name of a radio input element and setting its checkedness to true makes all the other elements' checkedness in the same radio button group be set to false");
|
||||
|
||||
radio5.oninput= t1.step_func(function(e) {
|
||||
input_fired = true;
|
||||
assert_true(e.bubbles, "event should bubble")
|
||||
assert_true(e.isTrusted, "event should be trusted");
|
||||
assert_false(e.cancelable, "event shoud not be cancelable");
|
||||
});
|
||||
|
||||
radio5.onchange = t2.step_func(function(e) {
|
||||
change_fired = true;
|
||||
assert_true(e.bubbles, "event should bubble")
|
||||
assert_true(e.isTrusted, "event should be trusted");
|
||||
assert_false(e.cancelable, "event shoud not be cancelable");
|
||||
});
|
||||
|
||||
radio6.oninput= t3.step_func_done(function(e) {
|
||||
assert_unreached("event input fired");
|
||||
});
|
||||
|
||||
radio6.onchange = t4.step_func_done(function(e) {
|
||||
assert_unreached("event change fired");
|
||||
});
|
||||
|
||||
t1.step(function() {
|
||||
radio5.click();
|
||||
assert_true(input_fired);
|
||||
t1.done();
|
||||
});
|
||||
|
||||
t2.step(function() {
|
||||
assert_true(change_fired);
|
||||
t2.done();
|
||||
})
|
||||
|
||||
t3.step(function(){
|
||||
radio6.click();
|
||||
t3.done();
|
||||
t4.done();
|
||||
});
|
||||
|
||||
radio72.onclick = t5.step_func_done(function(e){
|
||||
assert_false(radio71.checked);
|
||||
assert_true(radio72.checked);
|
||||
e.preventDefault();
|
||||
assert_false(radio71.checked);
|
||||
assert_true(radio72.checked);
|
||||
});
|
||||
|
||||
t5.step(function(){
|
||||
assert_true(radio71.checked);
|
||||
assert_false(radio72.checked);
|
||||
radio72.click();
|
||||
assert_true(radio71.checked);
|
||||
assert_false(radio72.checked);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>range input Tests</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<input type="range" id="r00" min="0" max="100" step="20" value="40" style="display:none">
|
||||
<input type="range" id="r01" min="0" max="1" step=".1" value=".2" style="display:none">
|
||||
<input type="range" id="r02" style="display:none">
|
||||
<input type="range" id="r03" style="display:none">
|
||||
<input type="range" id="r04" style="display:none">
|
||||
|
||||
<script>
|
||||
test(function rangeElementTest0() {
|
||||
document.getElementById('r00').value = "";
|
||||
assert_equals(document.getElementById('r00').type, "range");
|
||||
assert_equals(document.getElementById('r00').value, "60");
|
||||
}, "range input value set to ''");
|
||||
|
||||
test(function rangeElementTest1() {
|
||||
document.getElementById('r01').value = .6;
|
||||
assert_equals(document.getElementById('r01').type, "range");
|
||||
assert_equals(document.getElementById('r01').value, "0.6");
|
||||
}, "range input value set to an integer");
|
||||
|
||||
test(function rangeElementTest2() {
|
||||
assert_equals(document.getElementById('r02').type, "range");
|
||||
assert_equals(document.getElementById('r02').value, "50");
|
||||
}, "range input value equals 50");
|
||||
|
||||
test(function rangeElementTest3() {
|
||||
document.getElementById('r03').value = 200;
|
||||
assert_equals(document.getElementById('r03').type, "range");
|
||||
assert_equals(document.getElementById('r03').value, "100");
|
||||
}, "range input value equals 100");
|
||||
|
||||
test(function rangeElementTest4() {
|
||||
document.getElementById('r04').value = 2.1;
|
||||
assert_equals(document.getElementById('r04').type, "range");
|
||||
assert_equals(document.getElementById('r04').value, "2");
|
||||
}, "range input value equals 2");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<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="author" title="Tomoyuki SHIMIZU" href="mailto:tomoyuki.labs@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-input-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<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.getElementById('range_basic').type, "range");
|
||||
},
|
||||
"range type support on input element",
|
||||
{
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type"
|
||||
}
|
||||
);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById('range_basic').min, "0")
|
||||
},
|
||||
"min attribute support on input element",
|
||||
{
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-min"
|
||||
}
|
||||
);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById('range_basic').max, "5")
|
||||
},
|
||||
"max attribute support on input element",
|
||||
{
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#range-state-(type=range)"
|
||||
}
|
||||
);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById('illegal_min_and_max').max, "100")
|
||||
},
|
||||
"Illegal value of max attribute",
|
||||
{ "help" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#range-state-(type=range)"
|
||||
}
|
||||
);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById('empty_attributes').min, "0")
|
||||
},
|
||||
"default value of min attribute in input type=range",
|
||||
{ "help" : "https://html.spec.whatwg.org/multipage/#dom-input-min" }
|
||||
);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById('empty_attributes').max, "100")
|
||||
},
|
||||
"default value of max attribute in input type=range",
|
||||
{
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#range-state-(type=range)"
|
||||
}
|
||||
);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById('float_step_scale_factor').value, "6.8")
|
||||
},
|
||||
"Solving the step mismatch",
|
||||
{
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#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" : "https://html.spec.whatwg.org/multipage/#dom-input-stepdown"
|
||||
}
|
||||
);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Required Attribute</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="https://html.spec.whatwg.org/multipage/#attr-input-required">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h1>Required Attribute</h1>
|
||||
<div style="display: none">
|
||||
<input type="text" required="required" />
|
||||
</div>
|
||||
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].getAttribute("required"), "required")}, "required attribute support on input element");
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>input type reset</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#reset-button-state-(type=reset)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<form>
|
||||
<input type=text id=input1 value="foobar">
|
||||
<input type=text id=input2>
|
||||
<input type=reset id=r1>
|
||||
</form>
|
||||
|
||||
<input type=text id=input3 value="barfoo">
|
||||
|
||||
<table>
|
||||
<form>
|
||||
<tr>
|
||||
<td>
|
||||
<input type=text id=input4 value="foobar">
|
||||
<input type=reset id=r2>
|
||||
</td>
|
||||
</tr>
|
||||
</form>
|
||||
</table>
|
||||
|
||||
<div>
|
||||
<form>
|
||||
<input type=text id=input5 value="foobar">
|
||||
</div>
|
||||
<input type=reset id=r3>
|
||||
</form>
|
||||
|
||||
<div>
|
||||
<form>
|
||||
<input type=reset id=r4>
|
||||
</div>
|
||||
<input type=text id=input6 value="foobar">
|
||||
</form>
|
||||
|
||||
<form id=form5>
|
||||
<input type=reset id=r5>
|
||||
</form>
|
||||
<input form=form5 type=text id=input7 value="foobar">
|
||||
|
||||
<form id=form6>
|
||||
<input type=text id=input8 value="foobar">
|
||||
</form>
|
||||
<input type=reset form=form6 id=r6>
|
||||
|
||||
<script>
|
||||
var input1 = document.getElementById('input1'),
|
||||
input2 = document.getElementById('input2'),
|
||||
input3 = document.getElementById('input3'),
|
||||
input7 = document.getElementById('input7'),
|
||||
input8 = document.getElementById('input8'),
|
||||
r1 = document.getElementById('r1');
|
||||
|
||||
test(function(){
|
||||
assert_equals(input1.value, "foobar");
|
||||
assert_equals(input2.value, "");
|
||||
assert_equals(input3.value, "barfoo");
|
||||
input1.value = "foobar1";
|
||||
input2.value = "notempty";
|
||||
input3.value = "barfoo1";
|
||||
assert_equals(input1.value, "foobar1");
|
||||
assert_equals(input2.value, "notempty");
|
||||
assert_equals(input3.value, "barfoo1");
|
||||
r1.click();
|
||||
assert_equals(input1.value, "foobar");
|
||||
assert_equals(input2.value, "");
|
||||
assert_equals(input3.value, "barfoo1");
|
||||
}, "reset button only resets the form owner");
|
||||
|
||||
test(function(){
|
||||
assert_false(r1.willValidate);
|
||||
}, "the element is barred from constraint validation");
|
||||
|
||||
test(function(){
|
||||
assert_equals(input1.value, "foobar");
|
||||
assert_equals(input2.value, "");
|
||||
assert_equals(input3.value, "barfoo1");
|
||||
r1.disabled = true;
|
||||
r1.click();
|
||||
assert_equals(input1.value, "foobar");
|
||||
assert_equals(input2.value, "");
|
||||
assert_equals(input3.value, "barfoo1");
|
||||
}, "clicking on a disabled reset does nothing");
|
||||
|
||||
function testReset(inputId, buttonId) {
|
||||
var inp = document.getElementById(inputId);
|
||||
assert_equals(inp.value, "foobar");
|
||||
inp.value = "barfoo";
|
||||
assert_equals(inp.value, "barfoo");
|
||||
document.getElementById(buttonId).click();
|
||||
assert_equals(inp.value, "foobar");
|
||||
}
|
||||
|
||||
test(function(){
|
||||
testReset("input4", "r2");
|
||||
testReset("input5", "r3");
|
||||
testReset("input6", "r4");
|
||||
}, "reset button resets controls associated with their form using the form element pointer");
|
||||
|
||||
test(function(){
|
||||
testReset("input7", "r5");
|
||||
}, "reset button resets controls associated with a form using the form attribute");
|
||||
|
||||
test(function(){
|
||||
testReset("input8", "r6");
|
||||
}, "reset button associated with a form using the form attribute resets all the form's controls");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Search Input</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="https://html.spec.whatwg.org/multipage/#the-input-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<h1>Search Input</h1>
|
||||
<input type="search" style="display:none" placeholder="Search..." />
|
||||
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].type, "search")}, "search type support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-type" });
|
||||
test(function() {assert_equals(document.getElementsByTagName("input")[0].placeholder, "Search...")}, "placeholder attribute support on input element", {
|
||||
"help" : "https://html.spec.whatwg.org/multipage/#dom-input-placeholder" });
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Input tel</title>
|
||||
<link rel="author" title="Kazuki Kanamori" href="mailto:yogurito@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#telephone-state-(type=tel)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Input tel</h1>
|
||||
<input type="tel" id="novalue" />
|
||||
<input type="tel" id="value_with_LF" value="0
1" />
|
||||
<input type="tel" id="value_with_CR" value="0
1" />
|
||||
<input type="tel" id="value_with_CRLF" value="0

1" />
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var element = document.getElementById('novalue');
|
||||
test(function(){
|
||||
assert_equals(element.type, 'tel');
|
||||
}, 'tel type supported on input element');
|
||||
test(function(){
|
||||
element.value = '0\u000A1';
|
||||
assert_equals(element.value, '01');
|
||||
}, 'User agents must not allow users to insert "LF" (U+000A)');
|
||||
test(function(){
|
||||
element.value = '0\u000D1';
|
||||
assert_equals(element.value, '01');
|
||||
}, 'User agents must not allow users to insert "CR" (U+000D)');
|
||||
|
||||
element = document.getElementById('value_with_LF');
|
||||
test(function(){
|
||||
assert_equals(element.value, '01');
|
||||
}, 'The value attribute, if specified, must have a value that contains no "LF" (U+000A)');
|
||||
|
||||
element = document.getElementById('value_with_CR');
|
||||
test(function(){
|
||||
assert_equals(element.value, '01');
|
||||
}, 'The value attribute, if specified, must have a value that contains no "CR" (U+000D)');
|
||||
|
||||
test(function(){
|
||||
element = document.getElementById('novalue');
|
||||
element.value = '0\u000D\u000A1';
|
||||
assert_equals(element.value, '01');
|
||||
|
||||
element = document.getElementById('value_with_CRLF');
|
||||
assert_equals(element.value, '01');
|
||||
}, 'The value sanitization algorithm is as follows: Strip line breaks from the value');
|
||||
|
||||
element = document.getElementById('novalue');
|
||||
test(function(){
|
||||
element.value = '+811234';
|
||||
assert_equals(element.value, '+811234');
|
||||
}, 'Element can accept the phone number with plus sign(country code)');
|
||||
test(function(){
|
||||
element.value = '1234#5678';
|
||||
assert_equals(element.value, '1234#5678');
|
||||
}, 'Element can accept the phone number with hash mark(extension number)');
|
||||
test(function(){
|
||||
element.value = '123-456-789';
|
||||
assert_equals(element.value, '123-456-789');
|
||||
}, 'Element can accept the phone number with hyphen');
|
||||
test(function(){
|
||||
element.value = '123.456.789';
|
||||
assert_equals(element.value, '123.456.789');
|
||||
}, 'Element can accept the phone number with dots');
|
||||
test(function(){
|
||||
element.value = '1 23 4';
|
||||
assert_equals(element.value, '1 23 4');
|
||||
}, 'Element can accept the phone number with whitespace');
|
||||
test(function(){
|
||||
element.value = ' 1234 ';
|
||||
assert_equals(element.value, ' 1234 ');
|
||||
}, 'Element can accept the phone number with leading & following whitespaces');
|
||||
test(function(){
|
||||
element.value = '(03)12345678';
|
||||
assert_equals(element.value, '(03)12345678');
|
||||
}, 'Element can accept the phone number with parentheses(area code)');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Text input element</title>
|
||||
<link rel="author" title="Kinuko Yasuda" href="mailto:kinuko@chromium.org">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#text-(type=text)-state-and-search-state-(type=search)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Text input element</h1>
|
||||
<div style="display: none">
|
||||
|
||||
<input id="text" type="text" />
|
||||
<input id="text_with_value" type="text" value="foo" />
|
||||
|
||||
<input id="search" type="search" />
|
||||
<input id="search_with_value" type="search" value="foo" />
|
||||
|
||||
</div>
|
||||
<div id="log"></div>
|
||||
<script type="text/javascript">
|
||||
var types = [ 'text', 'search' ];
|
||||
|
||||
for (var i = 0; i < types.length; ++i) {
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById(types[i]).value, "");
|
||||
assert_equals(document.getElementById(types[i] + "_with_value").value, "foo");
|
||||
}, "Value returns the current value for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
document.getElementById(types[i]).value = "A";
|
||||
assert_equals(document.getElementById(types[i]).value, "A");
|
||||
document.getElementById(types[i]).value = "B";
|
||||
}, "Setting value changes the current value for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
// Any LF (\n) must be stripped.
|
||||
document.getElementById(types[i]).value = "\nAB";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "A\nB";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "AB\n";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
|
||||
// Any CR (\r) must be stripped.
|
||||
document.getElementById(types[i]).value = "\rAB";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "A\rB";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "AB\r";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
|
||||
// Any combinations of LF CR must be stripped.
|
||||
document.getElementById(types[i]).value = "\r\nAB";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "A\r\nB";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "AB\r\n";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
document.getElementById(types[i]).value = "\r\nA\n\rB\r\n";
|
||||
assert_equals(document.getElementById(types[i]).value, "AB");
|
||||
}, "Value sanitization algorithm should strip line breaks for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById(types[i]).files, null);
|
||||
}, "files attribute must return null for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById(types[i]).valueAsDate, null);
|
||||
}, "valueAsDate attribute must return null for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById(types[i]).valueAsNumber, NaN);
|
||||
}, "valueAsNumber attribute must return NaN for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
assert_equals(document.getElementById("text").list, null);
|
||||
}, "list attribute must return null for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
var el = document.getElementById(types[i]);
|
||||
assert_throws("InvalidStateError", function() { el.stepDown(); }, "");
|
||||
}, "stepDown does not apply for " + types[i]);
|
||||
|
||||
test(
|
||||
function() {
|
||||
var el = document.getElementById(types[i]);
|
||||
assert_throws("InvalidStateError", function() { el.stepUp(); }, "");
|
||||
}, "stepUp does not apply for " + types[i]);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form input type=time</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/common-microsyntaxes.html#times">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/multipage/states-of-the-type-attribute.html#time-state-(type=time)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var times = [
|
||||
{value: "", expected: "", testname: "empty value"},
|
||||
{value: "00:00", expected: "00:00", testname: "Valid value: value should be 00:00"},
|
||||
{value: "00:00:00", expected: "00:00:00", testname: "Valid value: value should be 00:00:00"},
|
||||
{value: "00:00:00.0", expected: "00:00:00.0", testname: "Valid value: value should be 00:00:00.0"},
|
||||
{value: "00:00:00.00", expected: "00:00:00.00", testname: "Valid value: value should be 00:00:00.00"},
|
||||
{value: "00:00:00.000", expected: "00:00:00.000", testname: "Valid value: value should be 00:00:00.000"},
|
||||
{value: "00:00:00.0000", expected: "", testname: "Invalid value: fraction should have one, two or three ASCII digits. Value should be empty"},
|
||||
{value: "0:00:00.000", expected: "", testname: "Invalid value: hour should have two ASCII digits. Value should be empty"},
|
||||
{value: "00:0:00.000", expected: "", testname: "Invalid value: minutes should have two ASCII digits. Value should be empty"},
|
||||
{value: "00:00:0.000", expected: "", testname: "Invalid value: seconds should have two ASCII digits. Value should be empty"},
|
||||
{value: "24:00:00.000", expected: "", testname: "Invalid value: hour > 23. Value should be empty"},
|
||||
{value: "00:60:00.000", expected: "", testname: "Invalid value: minute > 59. Value should be empty"},
|
||||
{value: "00:00:60.000", expected: "", testname: "Invalid value: second > 59. Value should be empty"},
|
||||
{value: "12:00:00.001", attributes: { min: "12:00:00.000" }, expected: "12:00:00.001", testname: "Value >= min attribute"},
|
||||
{value: "12:00:00.000", attributes: { min: "12:00:00.001" }, expected: "12:00:00.001", testname: "Value < min attribute"},
|
||||
{value: "12:00:00.000", attributes: { max: "12:00:00.001" }, expected: "12:00:00.000", testname: "Value <= max attribute"},
|
||||
{value: "12:00:00.001", attributes: { max: "12:00:00.000" }, expected: "12:00:00.000", testname: "Value > max attribute"}
|
||||
];
|
||||
for (var i = 0; i < times.length; i++) {
|
||||
var w = times[i];
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "time";
|
||||
input.value = w.value;
|
||||
for(var attr in w.attributes) {
|
||||
input[attr] = w.attributes[attr];
|
||||
}
|
||||
assert_equals(input.value, w.expected);
|
||||
}, w.testname);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Input Time</title>
|
||||
<meta name=viewport content="width=device-width, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-input-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Input Time</h1>
|
||||
<div style="display:none;">
|
||||
<input type="time "id="chkDefaultValue" />
|
||||
<input type="time" id="chkStep" />
|
||||
<input type="time" id="chkSetValueTest" />
|
||||
<input type="time" id="chkSupportAttribute" min="01:01:01.001" max="12:12:12.012" step="600" />
|
||||
</div>
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
/* check default value */
|
||||
test(function(){ assert_equals(document.getElementById("chkDefaultValue").value, "");
|
||||
}, "time element of default time value");
|
||||
test(function(){assert_equals(document.getElementById('chkStep').step, "");
|
||||
} , "step attribute on default value check");
|
||||
test(function(){assert_equals(document.getElementById('chkDefaultValue').max, "");
|
||||
} , "max attribute on default value check")
|
||||
test(function(){assert_equals(document.getElementById('chkDefaultValue').max, "");
|
||||
} , "min attribute on default value check")
|
||||
|
||||
/* simple attribute test*/
|
||||
test(function(){assert_equals(document.getElementById("chkSupportAttribute").type,"time");}
|
||||
, "type attribute support on input element");
|
||||
test(function(){assert_equals(document.getElementById('chkSupportAttribute').min, "01:01:01.001")}
|
||||
, "max attribute support on input element");
|
||||
test(function(){assert_equals(document.getElementById('chkSupportAttribute').max, "12:12:12.012")}
|
||||
, "min attribute support on input element");
|
||||
test(function(){assert_equals(document.getElementById("chkSupportAttribute").step, "600")}
|
||||
, "step attribute support on input element");
|
||||
|
||||
/* check step up and down */
|
||||
var _StepTest = document.getElementById("chkStep");
|
||||
test(function(){ assert_true(typeof(_StepTest.stepUp) ==="function" ) } , "stepUp function support on input Element");
|
||||
test(function(){ assert_true(typeof(_StepTest.stepDown) ==="function" ) } , "stepDown function support on input Element");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value,"12:01");
|
||||
} , "stepUp step value empty on default step value ");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value,"11:59");
|
||||
}, "stepDown step value empty default step value");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "-600";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "12:01");
|
||||
},"stepUp on step value minus");
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "-600";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "11:59");
|
||||
},"stepDown on step value minus");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "0";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "12:01");
|
||||
} , "stepUp on step value zero ");
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "0";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "11:59");
|
||||
} , "stepDown on step value zero ");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "00:00";
|
||||
_StepTest.step = "86399";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "23:59:59");
|
||||
} , "stepUp on step value 24 hour");
|
||||
test(function(){
|
||||
_StepTest.value = "23:59:59";
|
||||
_StepTest.step = "86399";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "00:00:00");
|
||||
} , "stepDown on step value 24 hour ");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "3600";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "13:00");
|
||||
} , "stepUp on step value hour ");
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "3600";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "11:00");
|
||||
} , "stepDown on step value hour ");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "1";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "12:00:01");
|
||||
} , "stepUp on step value second ");
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "1";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "11:59:59");
|
||||
} , "stepDown on step value second ");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "0.001";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "12:00:00.001");
|
||||
} , "stepUp on step value miri second ");
|
||||
test(function(){
|
||||
_StepTest.value = "12:00";
|
||||
_StepTest.step = "0.001";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "11:59:59.999");
|
||||
} , "stepDown on step value miri second ");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "13:00:00";
|
||||
_StepTest.step = "1";
|
||||
_StepTest.stepUp(2);
|
||||
assert_equals(_StepTest.value, "13:00:02");
|
||||
}, "stepUp argment 2 times");
|
||||
test(function(){
|
||||
_StepTest.value = "13:00:00";
|
||||
_StepTest.step = "1";
|
||||
_StepTest.stepDown(2);
|
||||
assert_equals(_StepTest.value, "12:59:58");
|
||||
}, "stepDown argment 2 times");
|
||||
|
||||
test(function(){
|
||||
_StepTest.max = "15:00";
|
||||
_StepTest.value = "15:00";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "15:00");
|
||||
_StepTest.max = "";
|
||||
} , "stepUp stop because it exceeds the maximum value");
|
||||
test(function(){
|
||||
_StepTest.min = "13:00";
|
||||
_StepTest.value = "13:00";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "13:00");
|
||||
_StepTest.min="";
|
||||
} , "stepDown Stop so lower than the minimum value");
|
||||
|
||||
test(function(){
|
||||
_StepTest.max = "15:01";
|
||||
_StepTest.value = "15:00";
|
||||
_StepTest.step = "120";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "15:01");
|
||||
_StepTest.max = "";
|
||||
} , "stop at border on stepUp");
|
||||
test(function(){
|
||||
_StepTest.min = "12:59";
|
||||
_StepTest.value = "13:00";
|
||||
_StepTest.step = "120";
|
||||
_StepTest.stepDown();
|
||||
assert_equals(_StepTest.value, "12:59");
|
||||
_StepTest.min="";
|
||||
} , "stop at border on stepDown");
|
||||
|
||||
test(function(){
|
||||
_StepTest.value = "";
|
||||
_StepTest.step = "60";
|
||||
_StepTest.stepUp();
|
||||
assert_equals(_StepTest.value, "00:01");
|
||||
} , " empty value of stepUp");
|
||||
|
||||
|
||||
/* set value test */
|
||||
test(function(){
|
||||
var _time = document.getElementById("chkSetValueTest");
|
||||
_time.value = "12:00:00.000";
|
||||
assert_equals(_time.value, "12:00:00.000");
|
||||
_time.value = "hh:mi:ss.sss";
|
||||
assert_equals(_time.value, "");
|
||||
}, "set value on not time format value");
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Input element's type attribute changes state</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#the-input-element">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var types = [
|
||||
{ type: "hidden" },
|
||||
{ type: "text", sanitizedValue: " foobar " },
|
||||
{ type: "search", sanitizedValue: " foobar " },
|
||||
{ type: "tel", sanitizedValue: " foobar " },
|
||||
{ type: "url", sanitizedValue: "foobar" },
|
||||
{ type: "email", sanitizedValue: "foobar" },
|
||||
{ type: "password", sanitizedValue: " foobar " },
|
||||
{ type: "datetime", sanitizedValue: "" },
|
||||
{ type: "date", sanitizedValue: "" },
|
||||
{ type: "month", sanitizedValue: "" },
|
||||
{ type: "week", sanitizedValue: "" },
|
||||
{ type: "time", sanitizedValue: "" },
|
||||
{ type: "number", sanitizedValue: "" },
|
||||
{ type: "range", sanitizedValue: "50" },
|
||||
{ type: "color", sanitizedValue: "#000000" },
|
||||
{ type: "checkbox" },
|
||||
{ type: "radio" },
|
||||
{ type: "file" },
|
||||
{ type: "submit" },
|
||||
{ type: "image" },
|
||||
{ type: "reset" },
|
||||
{ type: "button" }
|
||||
];
|
||||
for (var i = 0; i < types.length; i++) {
|
||||
for (var j = 0; j < types.length; j++) {
|
||||
if (types[i] != types[j]) {
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = types[i].type;
|
||||
if (types[i].type === "file") {
|
||||
assert_throws("INVALID_STATE_ERR", function() {
|
||||
input.value = " foo\rbar ";
|
||||
});
|
||||
assert_equals(input.value, "");
|
||||
} else {
|
||||
input.value = " foo\rbar ";
|
||||
input.type = types[j].type; // change state
|
||||
if (types[j].sanitizedValue || types[j].sanitizedValue === "") {
|
||||
assert_equals(input.value, types[j].sanitizedValue, "input.value should be " + types[j].sanitizedValue + " after change of state");
|
||||
} else {
|
||||
assert_equals(input.value, " foo\rbar ", "input.value should be ' foo\\rbar ' after change of state");
|
||||
}
|
||||
}
|
||||
}, "change state from " + types[i].type + " to " + types[j].type);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Input url</title>
|
||||
<link rel="author" title="Hyeonseok Shin" href="mailto:hyeonseok@gmail.com">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/#url-state-%28type=url%29">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Input url</h1>
|
||||
<div style="display: none">
|
||||
<input type="url" id="type_support" />
|
||||
<input type="url" id="set_value_LF" />
|
||||
<input type="url" id="set_value_CR" />
|
||||
<input type="url" id="set_value_CRLF" />
|
||||
<input type="url" id="value_with_CRLF" value="a
a" />
|
||||
<input type="url" id="value_with_leading_trailing_white_space" value=" aa " />
|
||||
<input type="url" id="value_with_leading_trailing_inner_white_space" value=" a a " />
|
||||
</div>
|
||||
<div id="log">
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
test(function(){
|
||||
var element = document.getElementById('type_support');
|
||||
assert_equals(element.type, 'url');
|
||||
}, 'url type supported on input element');
|
||||
|
||||
test(function(){
|
||||
var element = document.getElementById('set_value_LF');
|
||||
element.value = 'a\u000Aa';
|
||||
assert_equals(element.value, 'aa');
|
||||
|
||||
element = document.getElementById('set_value_CR');
|
||||
element.value = 'a\u000Da';
|
||||
assert_equals(element.value, 'aa');
|
||||
|
||||
element = document.getElementById('set_value_CRLF');
|
||||
element.value = 'a\u000D\u000Aa';
|
||||
assert_equals(element.value, 'aa');
|
||||
}, 'The value must not be set with "LF" (U+000A) or "CR" (U+000D)');
|
||||
|
||||
test(function(){
|
||||
var element = document.getElementById('value_with_CRLF');
|
||||
assert_equals(element.value, 'aa');
|
||||
}, 'The value sanitization algorithm is as follows: Strip line breaks from the value');
|
||||
|
||||
test(function(){
|
||||
var element = document.getElementById('value_with_leading_trailing_white_space');
|
||||
assert_equals(element.value, 'aa');
|
||||
|
||||
element = document.getElementById('value_with_leading_trailing_inner_white_space');
|
||||
assert_equals(element.value, 'a a');
|
||||
}, 'The value sanitization algorithm is as follows: Strip leading and trailing whitespace from the value.');
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Input element value mode</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var types = [
|
||||
{ type: "hidden", mode: "default" },
|
||||
{ type: "text", mode: "value", sanitizedValue: "foo" },
|
||||
{ type: "search", mode: "value", sanitizedValue: "foo" },
|
||||
{ type: "tel", mode: "value", sanitizedValue: "foo" },
|
||||
{ type: "url", mode: "value", sanitizedValue: "foo" },
|
||||
{ type: "email", mode: "value", sanitizedValue: "foo" },
|
||||
{ type: "password", mode: "value", sanitizedValue: "foo" },
|
||||
{ type: "datetime", mode: "value", sanitizedValue: "" },
|
||||
{ type: "date", mode: "value", sanitizedValue: "" },
|
||||
{ type: "month", mode: "value", sanitizedValue: "" },
|
||||
{ type: "week", mode: "value", sanitizedValue: "" },
|
||||
{ type: "time", mode: "value", sanitizedValue: "" },
|
||||
{ type: "number", mode: "value", sanitizedValue: "" },
|
||||
{ type: "range", mode: "value", sanitizedValue: "50" },
|
||||
{ type: "color", mode: "value", sanitizedValue: "#000000" },
|
||||
{ type: "checkbox", mode: "default/on" },
|
||||
{ type: "radio", mode: "default/on" },
|
||||
{ type: "submit", mode: "default" },
|
||||
{ type: "image", mode: "default" },
|
||||
{ type: "reset", mode: "default" },
|
||||
{ type: "button", mode: "default" }
|
||||
];
|
||||
for (var i = 0; i < types.length; i++) {
|
||||
test(function() {
|
||||
var input = document.createElement("input"),
|
||||
expected;
|
||||
input.type = types[i].type;
|
||||
input.value = "foo";
|
||||
switch(types[i].mode) {
|
||||
case "default":
|
||||
expected = "";
|
||||
break;
|
||||
case "default/on":
|
||||
expected = "on";
|
||||
break;
|
||||
case "value":
|
||||
expected = types[i].sanitizedValue;
|
||||
break;
|
||||
}
|
||||
assert_equals(input.value, expected);
|
||||
}, "value IDL attribute of input type " + types[i].type + " without value attribute");
|
||||
|
||||
test(function() {
|
||||
var input = document.createElement("input"),
|
||||
expected;
|
||||
input.type = types[i].type;
|
||||
input.setAttribute("value", "bar");
|
||||
input.value = "foo";
|
||||
switch(types[i].mode) {
|
||||
case "default":
|
||||
expected = "bar";
|
||||
break;
|
||||
case "default/on":
|
||||
expected = "bar";
|
||||
break;
|
||||
case "value":
|
||||
expected = types[i].sanitizedValue;
|
||||
break;
|
||||
}
|
||||
assert_equals(input.value, expected);
|
||||
}, "value IDL attribute of input type " + types[i].type + " with value attribute");
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Form input type=week</title>
|
||||
<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#weeks">
|
||||
<link rel=help href="https://html.spec.whatwg.org/multipage/#week-state-(type=week)">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
var weeks = [
|
||||
{value: "", expected: "", testname: "empty value"},
|
||||
{value: "2014-W52", expected: "2014-W52", testname: "Valid value: Value should be 2014-W52"},
|
||||
{value: "2014-W53", expected: "", testname: "2014 has 52 weeks: Value should be empty"},
|
||||
{value: "2015-W53", expected: "2015-W53", testname: "2015 has 53 weeks: Value should be 2015-W53"},
|
||||
{value: "2014", expected: "", testname: "Invalid value: year only"},
|
||||
{value: "2014W", expected: "", testname: "Invalid value: no week number"},
|
||||
{value: "2014W52", expected: "", testname: "Invalid value: no '-' (U+002D)"},
|
||||
{value: "-W52", expected: "", testname: "Invalid value: yearless week"},
|
||||
{value: "W52", expected: "", testname: "Invalid value: yearless week and no '-' (U+002D)"},
|
||||
{value: "2014-W03", attributes: { min: "2014-W02" }, expected: "2014-W03", testname: "Value >= min attribute"},
|
||||
{value: "2014-W01", attributes: { min: "2014-W02" }, expected: "2014-W02", testname: "Value < min attribute"},
|
||||
{value: "2014-W10", attributes: { max: "2014-W11" }, expected: "2014-W10", testname: "Value <= max attribute"},
|
||||
{value: "2014-W12", attributes: { max: "2014-W11" }, expected: "2014-W11", testname: "Value > max attribute"}
|
||||
];
|
||||
for (var i = 0; i < weeks.length; i++) {
|
||||
var w = weeks[i];
|
||||
test(function() {
|
||||
var input = document.createElement("input");
|
||||
input.type = "week";
|
||||
input.value = w.value;
|
||||
for(var attr in w.attributes) {
|
||||
input[attr] = w.attributes[attr];
|
||||
}
|
||||
assert_equals(input.value, w.expected);
|
||||
}, w.testname);
|
||||
}
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue