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