Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Implement <input> type state switch logic
Also make sure to use ASCII lowercase instead of Unicode lowercase during comparison.
- Loading branch information
Showing
3 changed files
with
144 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
110 changes: 92 additions & 18 deletions
110
test/web-platform-tests/to-upstream/html/semantics/forms/the-input-element/default-type.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,107 @@ | ||
<!DOCTYPE html> | ||
<meta charset="utf-8" /> | ||
<!-- This test should not be upstreamed, as it tests the same thing as html/dom/reflection-forms.html. --> | ||
<meta charset=utf-8> | ||
<!-- When upstreaming this test, it should be noted that there is significant overlap with html/dom/reflection-forms.html. --> | ||
<title>Input default type</title> | ||
<link | ||
rel="help" | ||
href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type" | ||
/> | ||
<link rel=help href="https://html.spec.whatwg.org/multipage/input.html#attr-input-type"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
|
||
<input id="no-type" /> | ||
<input id="valid-type" type="password" /> | ||
<input id="invalid-type" type="foo" /> | ||
<input id=no-type> | ||
<input id=valid-type-hidden type=hidden> | ||
<input id=valid-type-text type=text> | ||
<input id=valid-type-search type=search> | ||
<input id=valid-type-tel type=tel> | ||
<input id=valid-type-url type=url> | ||
<input id=valid-type-email type=email> | ||
<input id=valid-type-password type=password> | ||
<input id=valid-type-date type=date> | ||
<input id=valid-type-month type=month> | ||
<input id=valid-type-week type=week> | ||
<input id=valid-type-time type=time> | ||
<input id=valid-type-datetime-local type=datetime-local> | ||
<input id=valid-type-number type=number> | ||
<input id=valid-type-range type=range> | ||
<input id=valid-type-color type=color> | ||
<input id=valid-type-checkbox type=checkbox> | ||
<input id=valid-type-radio type=radio> | ||
<input id=valid-type-file type=file> | ||
<input id=valid-type-submit type=submit> | ||
<input id=valid-type-image type=image> | ||
<input id=valid-type-reset type=reset> | ||
<input id=valid-type-button type=button> | ||
<input id=valid-type-BUTTON type=BUTTON> | ||
<input id=invalid-type-foo type=foo> | ||
<input id=invalid-type-datetime type=datetime> | ||
<input id=invalid-type-hİdden type=hİdden> | ||
<input id=invalid-type-emaİl type=emaİl> | ||
<input id=invalid-type-tİme type=tİme> | ||
<input id=invalid-type-datetİme-local type=datetİme-local> | ||
<input id=invalid-type-radİo type=radİo> | ||
<input id=invalid-type-fİle type=fİle> | ||
<input id=invalid-type-submİt type=submİt> | ||
<input id=invalid-type-İmage type=İmage> | ||
<input id=invalid-type-weeK type=weeK> | ||
<input id=invalid-type-checKbox type=checKbox> | ||
|
||
<script> | ||
"use strict"; | ||
|
||
test(() => { | ||
const input = document.getElementById("no-type"); | ||
assert_true(input.type === "text"); | ||
}, "No input type defaults to text"); | ||
assert_equals(input.type, "text"); | ||
}, "No input type defaults to text (HTML)"); | ||
|
||
test(() => { | ||
const input = document.getElementById("valid-type"); | ||
assert_true(input.type === "password"); | ||
}, "Sets valid input type"); | ||
const input = document.createElement("input"); | ||
assert_equals(input.type, "text"); | ||
assert_equals(input.getAttributeNS(null, "type"), null); | ||
}, "No input type defaults to text (DOM)"); | ||
|
||
test(() => { | ||
const input = document.getElementById("invalid-type"); | ||
assert_true(input.type === "text"); | ||
}, "Sets invalid input types to text"); | ||
const validTypeTests = [ | ||
"hidden", "text", "search", "tel", "url", "email", "password", "date", "month", "week", "time", "datetime-local", | ||
"number", "range", "color", "checkbox", "radio", "file", "submit", "image", "reset", "button", "BUTTON" | ||
]; | ||
for (const type of validTypeTests) { | ||
test(() => { | ||
const input = document.getElementById(`valid-type-${type}`); | ||
assert_equals(input.type, type.toLowerCase()); | ||
}, `${type} should be recognized as a valid input type (HTML)`); | ||
|
||
test(() => { | ||
const input = document.createElement("input"); | ||
input.type = type; | ||
assert_equals(input.type, type.toLowerCase()); | ||
assert_equals(input.getAttributeNS(null, "type"), type); | ||
}, `${type} should be recognized as a valid input type (DOM)`); | ||
} | ||
|
||
const invalidTypeTests = [ | ||
"foo", | ||
"datetime", // datetime used to be a valid type, but not anymore. | ||
|
||
// The following use certain Unicode uppercase characters, which when toLowerCase()'d will get converted to certain | ||
// ASCII letters. However, the algorithms in HTML call for ASCII lowercase, so they should not be treated as valid. | ||
|
||
// U+0130 LATIN CAPITAL LETTER I WITH DOT ABOVE | ||
...validTypeTests.filter(t => t.includes("i")).map(t => t.replace(/i/g, "İ")), | ||
|
||
// U+212A KELVIN SIGN | ||
...validTypeTests.filter(t => t.includes("k")).map(t => t.replace(/k/g, "K")) | ||
]; | ||
for (const type of invalidTypeTests) { | ||
test(() => { | ||
const input = document.getElementById(`invalid-type-${type}`); | ||
assert_equals(input.type, "text"); | ||
assert_equals(input.getAttributeNS(null, "type"), type); | ||
}, `Invalid type ${type} is treated as text (HTML)`); | ||
|
||
test(() => { | ||
const input = document.createElement("input"); | ||
input.type = "hidden"; | ||
assert_equals(input.type, "hidden"); | ||
input.type = type; | ||
assert_equals(input.type, "text"); | ||
assert_equals(input.getAttributeNS(null, "type"), type); | ||
}, `Invalid type ${type} is treated as text (DOM)`); | ||
} | ||
</script> |