diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/forms/the-input-element')
42 files changed, 3102 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/.gitkeep b/testing/web-platform/tests/html/semantics/forms/the-input-element/.gitkeep new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/.gitkeep diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/button.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/button.html new file mode 100644 index 000000000..3c826a975 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/button.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/checkbox.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/checkbox.html new file mode 100644 index 000000000..b1ccc64c1 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/checkbox.html @@ -0,0 +1,149 @@ +<!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)"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#run-synthetic-click-activation-steps"> +<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_click_fired = false, + c1_input_fired = false, + c1_change_fired = false, + t1 = async_test("click on mutable checkbox fires a click event, then an input event, then a change event"), + 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.onclick = t1.step_func(function(e) { + c1_click_fired = true; + assert_false(c1_input_fired, "click event should fire before input event"); + assert_false(c1_change_fired, "click event should fire before change event"); + assert_false(e.isTrusted, "click()-initiated click event should not be trusted"); + }); + checkbox1.oninput = t1.step_func(function(e) { + c1_input_fired = true; + assert_true(c1_click_fired, "input event should fire after click event"); + assert_false(c1_change_fired, "input event should fire before change event"); + assert_true(e.bubbles, "event should bubble"); + assert_true(e.isTrusted, "click()-initiated event should be trusted"); + assert_false(e.cancelable, "event should 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(c1_click_fired, "change event should fire after click event"); + assert_true(c1_input_fired, "change event should fire after input event"); + assert_true(e.bubbles, "event should bubble") + assert_true(e.isTrusted, "click()-initiated event should be trusted"); + assert_false(e.cancelable, "event should 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(); + /* + The prevention of the click doesn't have an effect until after all the + click event handlers have been run. + */ + assert_true(checkbox5.checked); + assert_false(checkbox5.indeterminate); + window.setTimeout(t5.step_func(function(e) { + /* + The click event has finished being dispatched, so the checkedness and + determinateness have been toggled back by now because the event + was preventDefault-ed. + */ + assert_false(checkbox5.checked); + assert_false(checkbox5.indeterminate); + t5.done(); + }), 0); + }); + + 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(); + /* + The prevention of the click doesn't have an effect until after all the + click event handlers have been run. + */ + assert_true(checkbox6.checked); + assert_true(checkbox6.indeterminate); + window.setTimeout(t6.step_func(function(e) { + /* + The click event has finished being dispatched, so the checkedness and + determinateness have been toggled back by now because the event + was preventDefault-ed. + */ + assert_false(checkbox6.checked); + assert_false(checkbox6.indeterminate); + t6.done(); + }), 0); + }); + + t6.step(function(){ + assert_false(checkbox6.checked); + assert_false(checkbox6.indeterminate); + checkbox6.click(); + }); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/checked.xhtml b/testing/web-platform/tests/html/semantics/forms/the-input-element/checked.xhtml new file mode 100644 index 000000000..70aeb5109 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/checked.xhtml @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/clone.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/clone.html new file mode 100644 index 000000000..0f7e053ba --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/clone.html @@ -0,0 +1,150 @@ +<!doctype html> +<meta charset=utf-8> +<title>Test input value retention upon clone</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<style>form {display: none;} </style> +<form> +<p><input type=checkbox> This checkbox is initially unchecked.</p> +<p><input type=checkbox checked="checked"> This checkbox is initially checked.</p> +<p><input type=radio name=radio> This radiobutton is initially unchecked.</p> +<p><input type=radio checked="checked" name=radio> This radiobutton is initially checked.</p> +<p><input type=hidden value="DEFAULT +DEFAULT"> This hidden field has the initial value "DEFAULT\nDEFAULT".</p> +<p><input type=text value=DEFAULT> This text field has the initial value "DEFAULT".</p> +<p><input type=search value=DEFAULT> This search field has the initial value "DEFAULT".</p> +<p><input type=tel value=DEFAULT> This phone number field has the initial value "DEFAULT".</p> +<p><input type=url value=https://default.invalid/> This URL field has the initial value "https://default.invalid/".</p> +<p><input type=email value=default@default.invalid> This email field has the initial value "default@default.invalid".</p> +<p><input type=password value=DEFAULT> This password field has the initial value "DEFAULT".</p> +<p><input type=date value=2015-01-01> This date field has the initial value "2015-01-01".</p> +<p><input type=month value=2015-01> This month field has the initial value "2015-01".</p> +<p><input type=week value=2015-W01> This week field has the initial value "2015-W01".</p> +<p><input type=time value=12:00> This time field has the initial value "12:00".</p> +<p><input type=datetime-local value=2015-01-01T12:00> This datetime (local) field has the initial value "2015-01-01T12:00".</p> +<p><input type=number value=1> This number field has the initial value "1".</p> +<p><input type=range value=1> This range control has the initial value "1".</p> +<p><input type=color value=#ff0000> This color picker has the initial value "#FF0000".</p> +<p><input type="button" value="Clone" onclick="clone();"></p> +</form> +<script> +setup(function() { + let form = document.getElementsByTagName("form")[0]; + let inputs = form.getElementsByTagName("input"); + inputs[0].checked = true; + inputs[1].checked = false; + inputs[2].checked = true; + inputs[4].value = "CHANGED\nCHANGED"; + inputs[5].value = "CHANGED"; + inputs[6].value = "CHANGED"; + inputs[7].value = "CHANGED"; + inputs[8].value = "https://changed.invalid/"; + inputs[9].value = "changed@changed.invalid"; + inputs[10].value = "CHANGED"; + inputs[11].value = "2016-01-01"; + inputs[12].value = "2016-01"; + inputs[13].value = "2016-W01"; + inputs[14].value = "12:30"; + inputs[15].value = "2016-01-01T12:30"; + inputs[16].value = "2"; + inputs[17].value = "2"; + inputs[18].value = "#00ff00"; + let clone = form.cloneNode(true); + document.body.appendChild(clone); +}); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_true(inputs[0].checked, "Should have retained checked state"); +}, "Checkbox must retain checked state."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_false(inputs[1].checked, "Should have retained unchecked state"); +}, "Checkbox must retain unchecked state."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_true(inputs[2].checked, "Should have retained checked state"); +}, "Radiobutton must retain checked state."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_false(inputs[3].checked, "Should have retained unchecked state"); +}, "Radiobutton must retain unchecked state."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[4].value, "CHANGED\nCHANGED", "Should have retained the changed value."); +}, "Hidden field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[5].value, "CHANGED", "Should have retained the changed value."); +}, "Text field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[6].value, "CHANGED", "Should have retained the changed value."); +}, "Search field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[7].value, "CHANGED", "Should have retained the changed value."); +}, "Phone number field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[8].value, "https://changed.invalid/", "Should have retained the changed value."); +}, "URL field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[9].value, "changed@changed.invalid", "Should have retained the changed value."); +}, "Email field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[10].value, "CHANGED", "Should have retained the changed value."); +}, "Password field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[11].value, "2016-01-01", "Should have retained the changed value."); +}, "Date field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[12].value, "2016-01", "Should have retained the changed value."); +}, "Month field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[13].value, "2016-W01", "Should have retained the changed value."); +}, "Week field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[14].value, "12:30", "Should have retained the changed value."); +}, "Time field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[15].value, "2016-01-01T12:30", "Should have retained the changed value."); +}, "Datetime (local) field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[16].value, "2", "Should have retained the changed value."); +}, "Number field must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[17].value, "2", "Should have retained the changed value."); +}, "Range control must retain changed value."); +test(function() { + let clone = document.getElementsByTagName("form")[1]; + let inputs = clone.getElementsByTagName("input"); + assert_equals(inputs[18].value, "#00ff00", "Should have retained the changed value."); +}, "Color picker must retain changed value."); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/cloning-steps.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/cloning-steps.html new file mode 100644 index 000000000..9e6c46fd7 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/cloning-steps.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Cloning of input elements</title> +<link rel="help" href="https://dom.spec.whatwg.org/#dom-node-clonenode"> +<link rel="help" href="https://dom.spec.whatwg.org/#concept-node-clone"> +<link rel="help" href="https://dom.spec.whatwg.org/#concept-node-clone-ext"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-input-element:concept-node-clone-ext"> +<link rel="author" title="Matthew Phillips" href="mailto:matthew@matthewphillips.info"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +"use strict"; + +test(function() { + var input = document.createElement("input"); + input.value = "foo bar"; + + var copy = input.cloneNode(); + assert_equals(copy.value, "foo bar"); +}, "input element's value should be cloned"); + +test(function() { + var input = document.createElement("input"); + input.value = "foo bar"; + + var copy = input.cloneNode(); + copy.setAttribute("value", "something else"); + + assert_equals(copy.value, "foo bar"); +}, "input element's dirty value flag should be cloned, so setAttribute doesn't affect the cloned input's value"); + +test(function() { + var input = document.createElement("input"); + input.setAttribute("type", "radio"); + input.checked = true; + + var copy = input.cloneNode(); + assert_equals(copy.checked, true); +}, "input element's checkedness should be cloned"); + +test(function() { + var input = document.createElement("input"); + input.setAttribute("type", "radio"); + input.checked = false; + + var copy = input.cloneNode(); + copy.setAttribute("checked", "checked"); + + assert_equals(copy.checked, false); +}, "input element's dirty checkedness should be cloned, so setAttribute doesn't affect the cloned input's checkedness"); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/color.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/color.html new file mode 100644 index 000000000..6164815f6 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/color.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/contains.json b/testing/web-platform/tests/html/semantics/forms/the-input-element/contains.json new file mode 100644 index 000000000..c2b780f0b --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/contains.json @@ -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" + } +]
\ No newline at end of file diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/date.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/date.html new file mode 100644 index 000000000..70885ed05 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/date.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/datetime-local.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/datetime-local.html new file mode 100644 index 000000000..b4548b77a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/datetime-local.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/datetime.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/datetime.html new file mode 100644 index 000000000..2e909da2d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/datetime.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/email.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/email.html new file mode 100644 index 000000000..fc92529ef --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/email.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/file-manual.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/file-manual.html new file mode 100644 index 000000000..9e2d47c42 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/file-manual.html @@ -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 should 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 should not be cancelable"); + assert_true(input.files instanceof FileList); + assert_equals(input.value, "C:\\fakepath\\" + input.files[0].name); + }) +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/files.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/files.html new file mode 100644 index 000000000..107b86c08 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/files.html @@ -0,0 +1,48 @@ +<!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", + "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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/hidden.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/hidden.html new file mode 100644 index 000000000..4aca00d8c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/hidden.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/image01-ref.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/image01-ref.html new file mode 100644 index 000000000..62c141d96 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/image01-ref.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"/> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/image01.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/image01.html new file mode 100644 index 000000000..e9028dcee --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/image01.html @@ -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"> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-button.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-button.html new file mode 100644 index 000000000..0f269355a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-button.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-checkbox.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-checkbox.html new file mode 100644 index 000000000..7dd2f26b1 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-checkbox.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength-manual.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength-manual.html new file mode 100644 index 000000000..fdf6c2644 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength-manual.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset=utf-8> + <title>input max length</title> + <link rel="author" title="Sam Gibson" href="mailto:sam@ifdown.net"> + <link rel=help href="https://html.spec.whatwg.org/multipage/forms.html#the-maxlength-and-minlength-attributes"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + + <body> + <div id="log"></div> + <p>Type a letter anywhere into the input field (do not select any text, or otherwise manipulate the input)</p> + <input type=text maxlength=4 id=only-four value="inpu"></input> + + <script> + var input; + setup(function() { + input = document.getElementById('only-four'); + }, {explicit_done: true, explicit_timeout: true}); + + + on_event(input, 'keyup', function(event) { + if ((event.keyCode >= 65 && event.keyCode <= 90) || + (event.keyCode >= 97 && event.keyCode <= 122)) { + test(function() { + assert_equals(input.value, "inpu"); + }, 'input content should limit to maxlength') + + done(); + } + }); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength.html new file mode 100644 index 000000000..8f0a2567d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <title>input max length</title> + <link rel="author" title="Sam Gibson" href="mailto:sam@ifdown.net"> + <link rel=help href="https://html.spec.whatwg.org/multipage/forms.html#the-maxlength-and-minlength-attributes"> + <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="none" /> + <input id="negative" type="-5" /> + <input id="non-numeric" type="not-a-number" /> + <input id="assign-negative" /> + <input id="assign-non-numeric" /> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + test( + function() { + assert_equals(document.getElementById("none").maxLength, -1); + }, "Unset maxlength is -1"); + + test( + function() { + assert_equals(document.getElementById("negative").maxLength, -1); + }, "Negative maxlength is always -1"); + + test( + function() { + assert_equals(document.getElementById("non-numeric").maxLength, -1); + }, "Non-numeric maxlength is -1"); + + test( + function() { + assert_throws("INDEX_SIZE_ERR", function() { + document.getElementById("assign-negative").maxLength = -5; + }); + }, "Assigning negative integer throws IndexSizeError"); + + test( + function() { + document.getElementById("assign-non-numeric").maxLength = "not-a-number"; + assert_equals(document.getElementById("assign-non-numeric").maxLength, 0); + }, "Assigning non-numeric to maxlength sets maxlength to 0"); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/minlength.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/minlength.html new file mode 100644 index 000000000..7bfdf189a --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/minlength.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> + <head> + <title>input min length</title> + <link rel="author" title="Taryn Hill" href="mailto:Phrohdoh@gmail.com"> + <link rel=help href="https://html.spec.whatwg.org/multipage/forms.html#the-minlength-and-minlength-attributes"> + <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="none" /> + <input id="negative" minlength=-5 /> + <input id="non-numeric" minlength="not-a-number" /> + <input id="assign-negative" /> + <input id="assign-non-numeric" /> + </div> + + <div id="log"></div> + + <script type="text/javascript"> + test( + function() { + assert_equals(document.getElementById("none").minLength, -1); + }, "Unset minlength is -1"); + + test( + function() { + assert_equals(document.getElementById("negative").minLength, -1); + }, "Negative minlength is always -1"); + + test( + function() { + assert_equals(document.getElementById("non-numeric").minLength, -1); + }, "Non-numeric minlength is -1"); + + test( + function() { + assert_throws("INDEX_SIZE_ERR", function() { + document.getElementById("assign-negative").minLength = -5; + }); + }, "Assigning negative integer throws IndexSizeError"); + + test( + function() { + document.getElementById("assign-non-numeric").minLength = "not-a-number"; + assert_equals(document.getElementById("assign-non-numeric").minLength, 0); + }, "Assigning non-numeric to minlength sets minlength to 0"); + </script> + </body> +</html> + diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/month.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/month.html new file mode 100644 index 000000000..15fa76dd4 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/month.html @@ -0,0 +1,65 @@ +<!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="invalid_value" type="month" value="invalid-month" min="2011-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="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("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("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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/number.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/number.html new file mode 100644 index 000000000..5067d0e2f --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/number.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/password.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/password.html new file mode 100644 index 000000000..aac54aa1c --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/password.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/pattern_attribute.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/pattern_attribute.html new file mode 100644 index 000000000..ef01c2972 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/pattern_attribute.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/radio-groupname-case.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/radio-groupname-case.html new file mode 100644 index 000000000..05192fc7d --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/radio-groupname-case.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/radio.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/radio.html new file mode 100644 index 000000000..6681b3506 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/radio.html @@ -0,0 +1,144 @@ +<!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 name="group5" id=radio71 checked> +<input type=radio name="group5" 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 click event, then input event, then 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.onclick = t1.step_func(function(e) { + click_fired = true; + assert_false(input_fired, "click event should fire before input event"); + assert_false(change_fired, "click event should fire before change event"); + assert_false(e.isTrusted, "click()-initiated click event shouldn't be trusted"); + }); + + radio5.oninput = t1.step_func(function(e) { + input_fired = true; + assert_true(click_fired, "input event should fire after click event"); + assert_false(change_fired, "input event should fire before change event"); + assert_true(e.bubbles, "input event should bubble") + assert_true(e.isTrusted, "input event should be trusted"); + assert_false(e.cancelable, "input event should not be cancelable"); + }); + + radio5.onchange = t1.step_func(function(e) { + change_fired = true; + assert_true(click_fired, "change event should fire after click event"); + assert_true(input_fired, "change event should fire after input event"); + assert_true(e.bubbles, "change event should bubble") + assert_true(e.isTrusted, "change event should be trusted"); + assert_false(e.cancelable, "change event should 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(); + }); + + t3.step(function(){ + radio6.click(); + t3.done(); + t4.done(); + }); + + radio72.onclick = t5.step_func_done(function(e){ + assert_false(radio71.checked, "click on radio should uncheck other radio in same group"); + assert_true(radio72.checked, "click on radio should check that radio"); + e.preventDefault(); + // The cancelation of the click doesn't have an effect until after all the click event handlers have been run. + assert_false(radio71.checked, "radio remains unchecked immediately after click event on other radio in same group is canceled"); + assert_true(radio72.checked, "clicked radio remains checked immediately after click event is canceled"); + }); + + t5.step(function(){ + assert_true(radio71.checked, "initially checked radio should be checked"); + assert_false(radio72.checked, "other radios in same group as initially-checked radio should be unchecked"); + radio72.click(); + // Now that the click event has been fully dispatched, its cancelation has taken effect. + assert_true(radio71.checked, "canceled click event on radio should leave the previously-checked radio checked"); + assert_false(radio72.checked, "canceled click event on previously-unchecked radio should leave that radio unchecked"); + }); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/range-2.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/range-2.html new file mode 100644 index 000000000..3277dfc07 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/range-2.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/range.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/range.html new file mode 100644 index 000000000..2e7a85ea9 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/range.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/required_attribute.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/required_attribute.html new file mode 100644 index 000000000..63488e9f4 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/required_attribute.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/reset.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/reset.html new file mode 100644 index 000000000..9a9799542 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/reset.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/search_input.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/search_input.html new file mode 100644 index 000000000..175cdde99 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/search_input.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/selection.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/selection.html new file mode 100644 index 000000000..4ed4bc914 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/selection.html @@ -0,0 +1,135 @@ +<!DOCTYPE HTML> +<title>Input element programmatic selection support</title> +<link rel="author" title="yaycmyk" href="mailto:evan@yaycmyk.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#dom-textarea/input-select"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> + +/* all textual, non-hidden inputs support .select() */ +test(function() { + var valid = [ + "text", + "search", + "url", + "tel", + "email", + "password", + "date", + "month", + "week", + "time", + "datetime-local", + "number", + "color", + "file", + ]; + + var invalid = [ + "hidden", + "range", + "checkbox", + "radio", + "submit", + "image", + "reset", + "button" + ]; + + valid.forEach(function(type) { + test(function() { + var input = document.createElement("input"); + var a; + + input.type = type; + assert_equals(input.type, type, "the given input type is not supported"); + + input.select(); + + }, "input type " + type + " should support the select() method"); + }); + + invalid.forEach(function(type) { + test(function() { + var input = document.createElement("input"); + + input.type = type; + assert_equals(input.type, type, "the given input type is not supported"); + + assert_throws("INVALID_STATE_ERR", function() { input.select(); }); + + }, "input type " + type + " should not support the select() method"); + }); +}); + +/* only certain input types are allowed to have a variable-length selection */ +test(function() { + var valid = [ + "text", + "search", + "url", + "tel", + "password" + ]; + + var invalid = [ + "hidden", + "email", + "date", + "month", + "week", + "time", + "datetime-local", + "number", + "range", + "color", + "checkbox", + "radio", + "file", + "submit", + "image", + "reset", + "button" + ]; + + valid.forEach(function(type) { + test(function() { + var input = document.createElement("input"); + var a; + + input.type = type; + assert_equals(input.type, type, "the given input type is not supported"); + + a = input.selectionStart; + input.selectionStart = 0; + a = input.selectionEnd; + input.selectionEnd = 0; + a = input.selectionDirection; + input.selectionDirection = "none"; + input.setSelectionRange(0, 0); + input.setRangeText('', 0, 0); + + }, "input type " + type + " should support all selection attributes and methods"); + }); + + invalid.forEach(function(type) { + test(function() { + var input = document.createElement("input"); + + input.type = type; + assert_equals(input.type, type, "the given input type is not supported"); + + assert_equals(input.selectionStart, null, 'getting input.selectionStart'); + assert_throws("INVALID_STATE_ERR", function() { input.selectionStart = 0; }); + assert_equals(input.selectionEnd, null, 'getting input.selectionEnd'); + assert_throws("INVALID_STATE_ERR", function() { input.selectionEnd = 0; }); + assert_equals(input.selectionDirection, null, 'getting input.selectionDirection'); + assert_throws("INVALID_STATE_ERR", function() { input.selectionDirection = "none"; }); + assert_throws("INVALID_STATE_ERR", function() { input.setSelectionRange(0, 0); }); + assert_throws("INVALID_STATE_ERR", function() { input.setRangeText('', 0, 0); }); + + }, "input type " + type + " should not support variable-length selections"); + }); +}); +</script> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/telephone.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/telephone.html new file mode 100644 index 000000000..974cbaf88 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/telephone.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/text.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/text.html new file mode 100644 index 000000000..b6d4ceabf --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/text.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/time-2.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/time-2.html new file mode 100644 index 000000000..cf0d4cbbe --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/time-2.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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/time.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/time.html new file mode 100644 index 000000000..5178d91de --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/time.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/type-change-state.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/type-change-state.html new file mode 100644 index 000000000..def11da84 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/type-change-state.html @@ -0,0 +1,62 @@ +<!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-local", 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 if (types[j].type === "file") { + input.value = " foo\rbar "; + input.type = types[j].type; // change state + 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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/url.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/url.html new file mode 100644 index 000000000..aafa0ced9 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/url.html @@ -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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/valueMode.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/valueMode.html new file mode 100644 index 000000000..709c176dd --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/valueMode.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-local", 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> diff --git a/testing/web-platform/tests/html/semantics/forms/the-input-element/week.html b/testing/web-platform/tests/html/semantics/forms/the-input-element/week.html new file mode 100644 index 000000000..e06b67889 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/week.html @@ -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> |