diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-form-element')
9 files changed, 591 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/.gitkeep b/testing/web-platform/tests/html/semantics/forms/the-form-element/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/.gitkeep diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-autocomplete.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-autocomplete.html new file mode 100644 index 000000000..c50ea7317 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-autocomplete.html @@ -0,0 +1,59 @@ +<!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", "username", "new-password", "current-password", "organization-title", "organization", "street-address", "address-line1", "address-line2", "address-line3", "address-level4", "address-level3", "address-level2", "address-level1", "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", "transaction-currency", "transaction-amount", "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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-interfaces-01.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-interfaces-01.html new file mode 100644 index 000000000..c8b4a6c71 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-interfaces-01.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-matches.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-matches.html new file mode 100644 index 000000000..792162726 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-matches.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-nameditem-01.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-nameditem-01.html new file mode 100644 index 000000000..0b5aeb8ef --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-nameditem-01.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-nameditem-02.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-nameditem-02.html new file mode 100644 index 000000000..c25e554de --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-nameditem-02.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-sameobject.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-sameobject.html new file mode 100644 index 000000000..d1ebac07f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-elements-sameobject.html @@ -0,0 +1,20 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Testing [SameObject] on the 'elements' attribute on the 'form' element</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> + +<form> + <input> +</form> + +<script> +test(function() { + var form = document.querySelector('form'); + var elements = form.elements; + assert_true(elements === form.elements); + form.appendChild(document.createElement('input')); + assert_true(elements === form.elements); +}, "[SameObject] should apply to 'elements' attr on <form>"); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-indexed-element.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-indexed-element.html new file mode 100644 index 000000000..66f00e761 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-indexed-element.html @@ -0,0 +1,45 @@ +<!doctype html> +<meta charset="utf-8"> +<title>form.elements: indexed</title> +<link rel="author" title="Ivan.Yang" href="mailto:jsyangwenjie@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<div id="test"> +<form id=form> +<input type="radio" name="radio1" id="r1" value=1> +<input type="radio" name="radio2" id="r2" value=2> +</form> +</div> +<script> +test(function() { + var form = document.getElementById("form"); + assert_equals(form[0], document.getElementById("r1")); + assert_equals(form[1], document.getElementById("r2")); + assert_equals(form[2], undefined); + assert_equals(form[-1], undefined); +}, "form.elements should be accessed correctly by index") + +test(function(){ + var form = document.getElementById("form"); + var old_item = form[0]; + var old_desc = Object.getOwnPropertyDescriptor(form, 0); + assert_equals(old_desc.value, old_item); + assert_true(old_desc.enumerable); + assert_true(old_desc.configurable); + assert_false(old_desc.writable); + + Object.prototype[0] = 5; + this.add_cleanup(function () { delete Object.prototype[0]; }); + assert_equals(form[0], old_item); + + delete form[0]; + assert_equals(form[0], old_item); + + assert_throws(new TypeError(), function() { + "use strict"; + delete form[0]; + }); + assert_equals(form[0], old_item); +}, 'Trying to delete an indexed property name should never work'); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-form-element/form-nameditem.html b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-nameditem.html new file mode 100644 index 000000000..3edf903b7 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-form-element/form-nameditem.html @@ -0,0 +1,330 @@ +<!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) + var desc = Object.getOwnPropertyDescriptor(form, "button"); + assert_equals(desc.value, button); + assert_false(desc.writable); + assert_true(desc.configurable); + assert_false(desc.enumerable); + 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") + + var desc = Object.getOwnPropertyDescriptor(form, "d"); + assert_equals(desc.value, form.d); + assert_false(desc.writable); + assert_true(desc.configurable); + assert_false(desc.enumerable); + + 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") + +test(function() { + var form = document.getElementsByTagName("form")[1]; + var old_item = form["l1"]; + var old_desc = Object.getOwnPropertyDescriptor(form, "l1"); + assert_equals(old_desc.value, old_item); + assert_false(old_desc.enumerable); + assert_true(old_desc.configurable); + assert_false(old_desc.writable); + + form["l1"] = 5; + assert_equals(form["l1"], old_item); + assert_throws(new TypeError(), function() { + "use strict"; + form["l1"] = 5; + }); + assert_throws(new TypeError(), function() { + Object.defineProperty(form, "l1", { value: 5 }); + }); + + delete form["l1"]; + assert_equals(form["l1"], old_item); + + assert_throws(new TypeError(), function() { + "use strict"; + delete form["l1"]; + }); + assert_equals(form["l1"], old_item); + +}, 'Trying to set an expando that would shadow an already-existing named property'); + +test(function() { + var form = document.getElementsByTagName("form")[1]; + var old_item = form["new-name"]; + var old_desc = Object.getOwnPropertyDescriptor(form, "new-name"); + assert_equals(old_item, undefined); + assert_equals(old_desc, undefined); + + form["new-name"] = 5; + assert_equals(form["new-name"], 5); + + var input = document.createElement("input"); + this.add_cleanup(function () {input.remove();}); + input.name = "new-name"; + form.appendChild(input); + + assert_equals(form["new-name"], 5); + + delete form["new-name"]; + assert_equals(form["new-name"], input); +}, 'Trying to set an expando that shadows a named property that gets added later'); + +test(function() { + var form = document.getElementsByTagName("form")[1]; + var old_item = form["new-name2"]; + var old_desc = Object.getOwnPropertyDescriptor(form, "new-name2"); + assert_equals(old_item, undefined); + assert_equals(old_desc, undefined); + + Object.defineProperty(form, "new-name2", { configurable: false, writable: + false, value: 5 }); + assert_equals(form["new-name2"], 5); + + var input = document.createElement("input"); + this.add_cleanup(function () {input.remove();}); + input.name = "new-name2"; + form.appendChild(input); + + assert_equals(form["new-name2"], 5); + + delete form["new-name2"]; + assert_equals(form["new-name2"], 5); + + assert_throws(new TypeError(), function() { + "use strict"; + delete form["new-name2"]; + }); + assert_equals(form["new-name2"], 5); +}, 'Trying to set a non-configurable expando that shadows a named property that gets added later'); + +</script> |