<!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", 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 {
            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>