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