wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-06 07:48:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

Browse source
This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

0
testing/web-platform/tests/html/semantics/forms/the-input-element/.gitkeep Normal file
View file

66
testing/web-platform/tests/html/semantics/forms/the-input-element/button.html Normal file
View file

@ -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>

149
testing/web-platform/tests/html/semantics/forms/the-input-element/checkbox.html Normal file
View file

@ -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>

19
testing/web-platform/tests/html/semantics/forms/the-input-element/checked.xhtml Normal file
View file

@ -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>

150
testing/web-platform/tests/html/semantics/forms/the-input-element/clone.html Normal file
View file

@ -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>

53
testing/web-platform/tests/html/semantics/forms/the-input-element/cloning-steps.html Normal file
View file

@ -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>

45
testing/web-platform/tests/html/semantics/forms/the-input-element/color.html Normal file
View file

@ -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>

154
testing/web-platform/tests/html/semantics/forms/the-input-element/contains.json Normal file
View file

@ -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"
}
]

90
testing/web-platform/tests/html/semantics/forms/the-input-element/date.html Normal file
View file

@ -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>

36
testing/web-platform/tests/html/semantics/forms/the-input-element/datetime-local.html Normal file
View file

@ -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>

106
testing/web-platform/tests/html/semantics/forms/the-input-element/datetime.html Normal file
View file

@ -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>

58
testing/web-platform/tests/html/semantics/forms/the-input-element/email.html Normal file
View file

@ -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>

30
testing/web-platform/tests/html/semantics/forms/the-input-element/file-manual.html Normal file
View file

@ -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>

48
testing/web-platform/tests/html/semantics/forms/the-input-element/files.html Normal file
View file

@ -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>

74
testing/web-platform/tests/html/semantics/forms/the-input-element/hidden.html Normal file
View file

@ -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>

5
testing/web-platform/tests/html/semantics/forms/the-input-element/image01-ref.html Normal file
View file

@ -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"/>

7
testing/web-platform/tests/html/semantics/forms/the-input-element/image01.html Normal file
View file

@ -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">

51
testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-button.html Normal file
View file

@ -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>

60
testing/web-platform/tests/html/semantics/forms/the-input-element/input-type-checkbox.html Normal file
View file

@ -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>

37
testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength-manual.html Normal file
View file

@ -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>

55
testing/web-platform/tests/html/semantics/forms/the-input-element/maxlength.html Normal file
View file

@ -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>

55
testing/web-platform/tests/html/semantics/forms/the-input-element/minlength.html Normal file
View file

@ -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>

65
testing/web-platform/tests/html/semantics/forms/the-input-element/month.html Normal file
View file

@ -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>

53
testing/web-platform/tests/html/semantics/forms/the-input-element/number.html Normal file
View file

@ -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>

79
testing/web-platform/tests/html/semantics/forms/the-input-element/password.html Normal file
View file

@ -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>

34
testing/web-platform/tests/html/semantics/forms/the-input-element/pattern_attribute.html Normal file
View file

@ -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>

75
testing/web-platform/tests/html/semantics/forms/the-input-element/radio-groupname-case.html Normal file
View file

@ -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-&#x212a;illroyß">
<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="глупы&#x438;&#x306;">
<input id=r17 type="radio" name="ГЛУПЫЙ">
<input id=r18 type="radio" name="ГЛУПЫ&#x418;&#x306;">
<input id=r19 type="radio" name="åωk">
<input id=r20 type="radio" name="ÅΩK">
<input id=r21 type="radio" name="&#x212b;ωk">
<input id=r22 type="radio" name="å&#x2126;k">
<input id=r23 type="radio" name="åω&#x212a;">
<input id=r24 type="radio" name="blah1">
<input id=r25 type="radio" name="blah&#x2460;">
<input id=r26 type="radio" name="bl&#x24b6;h1">
<input id=r27 type="radio" name="bl&#x24d0;h1">
<input id=r28 type="radio" name="t&Eacute;dz5アパートFi">
<input id=r29 type="radio" name="T&Eacute;DZ5アパートFi">
<input id=r30 type="radio" name="T&eacute;&#x01F1;&#x2075;アパートFi">
<input id=r31 type="radio" name="t&Eacute;dz5&#x3300;Fi">
<input id=r32 type="radio" name="t&Eacute;dz5&#x30A2;&#x30CF;&#x309A;&#x30FC;&#x30C8;Fi">
<input id=r33 type="radio" name="t&Eacute;dz5&#x30A2;&#x30D1;&#x30FC;&#x30C8;Fi">
<input id=r34 type="radio" name="T&Eacute;DZ⁵アパートFi">
<input id=r35 type="radio" name="T&Eacute;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>

144
testing/web-platform/tests/html/semantics/forms/the-input-element/radio.html Normal file
View file

@ -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>

43
testing/web-platform/tests/html/semantics/forms/the-input-element/range-2.html Normal file
View file

@ -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>

276
testing/web-platform/tests/html/semantics/forms/the-input-element/range.html Normal file
View file

@ -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>

34
testing/web-platform/tests/html/semantics/forms/the-input-element/required_attribute.html Normal file
View file

@ -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>

113
testing/web-platform/tests/html/semantics/forms/the-input-element/reset.html Normal file
View file

@ -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>

35
testing/web-platform/tests/html/semantics/forms/the-input-element/search_input.html Normal file
View file

@ -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>

135
testing/web-platform/tests/html/semantics/forms/the-input-element/selection.html Normal file
View file

@ -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>

84
testing/web-platform/tests/html/semantics/forms/the-input-element/telephone.html Normal file
View file

@ -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&#x000A;1" />
<input type="tel" id="value_with_CR" value="0&#x000D;1" />
<input type="tel" id="value_with_CRLF" value="0&#x000A;&#x000D;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>

104
testing/web-platform/tests/html/semantics/forms/the-input-element/text.html Normal file
View file

@ -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>

42
testing/web-platform/tests/html/semantics/forms/the-input-element/time-2.html Normal file
View file

@ -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>

207
testing/web-platform/tests/html/semantics/forms/the-input-element/time.html Normal file
View file

@ -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>

62
testing/web-platform/tests/html/semantics/forms/the-input-element/type-change-state.html Normal file
View file

@ -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>

59
testing/web-platform/tests/html/semantics/forms/the-input-element/url.html Normal file
View file

@ -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&#x000D;&#x000A;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>

72
testing/web-platform/tests/html/semantics/forms/the-input-element/valueMode.html Normal file
View file

@ -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>

38
testing/web-platform/tests/html/semantics/forms/the-input-element/week.html Normal file
View file

@ -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>