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