| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Input tel</title> |
| <link rel="author" title="Kazuki Kanamori" href="mailto:yogurito@gmail.com"> |
| <link rel="help" href="https://html.spec.whatwg.org/multipage/#telephone-state-(type=tel)"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <h1>Input tel</h1> |
| <input type="tel" id="novalue" /> |
| <input type="tel" id="value_with_LF" value="0
1" /> |
| <input type="tel" id="value_with_CR" value="0
1" /> |
| <input type="tel" id="value_with_CRLF" value="0

1" /> |
| <div id="log"> |
| </div> |
| |
| <script type="text/javascript"> |
| var element = document.getElementById('novalue'); |
| test(function(){ |
| assert_equals(element.type, 'tel'); |
| }, 'tel type supported on input element'); |
| test(function(){ |
| element.value = '0\u000A1'; |
| assert_equals(element.value, '01'); |
| }, 'User agents must not allow users to insert "LF" (U+000A)'); |
| test(function(){ |
| element.value = '0\u000D1'; |
| assert_equals(element.value, '01'); |
| }, 'User agents must not allow users to insert "CR" (U+000D)'); |
| |
| element = document.getElementById('value_with_LF'); |
| test(function(){ |
| assert_equals(element.value, '01'); |
| }, 'The value attribute, if specified, must have a value that contains no "LF" (U+000A)'); |
| |
| element = document.getElementById('value_with_CR'); |
| test(function(){ |
| assert_equals(element.value, '01'); |
| }, 'The value attribute, if specified, must have a value that contains no "CR" (U+000D)'); |
| |
| test(function(){ |
| element = document.getElementById('novalue'); |
| element.value = '0\u000D\u000A1'; |
| assert_equals(element.value, '01'); |
| |
| element = document.getElementById('value_with_CRLF'); |
| assert_equals(element.value, '01'); |
| }, 'The value sanitization algorithm is as follows: Strip line breaks from the value'); |
| |
| element = document.getElementById('novalue'); |
| test(function(){ |
| element.value = '+811234'; |
| assert_equals(element.value, '+811234'); |
| }, 'Element can accept the phone number with plus sign(country code)'); |
| test(function(){ |
| element.value = '1234#5678'; |
| assert_equals(element.value, '1234#5678'); |
| }, 'Element can accept the phone number with hash mark(extension number)'); |
| test(function(){ |
| element.value = '123-456-789'; |
| assert_equals(element.value, '123-456-789'); |
| }, 'Element can accept the phone number with hyphen'); |
| test(function(){ |
| element.value = '123.456.789'; |
| assert_equals(element.value, '123.456.789'); |
| }, 'Element can accept the phone number with dots'); |
| test(function(){ |
| element.value = '1 23 4'; |
| assert_equals(element.value, '1 23 4'); |
| }, 'Element can accept the phone number with whitespace'); |
| test(function(){ |
| element.value = ' 1234 '; |
| assert_equals(element.value, ' 1234 '); |
| }, 'Element can accept the phone number with leading & following whitespaces'); |
| test(function(){ |
| element.value = '(03)12345678'; |
| assert_equals(element.value, '(03)12345678'); |
| }, 'Element can accept the phone number with parentheses(area code)'); |
| </script> |
| |
| </body> |
| </html> |
