button-events.html (5739B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: Button - events</title> 4 <link rel="author" title="Intel" href="http://www.intel.com/"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-button-element"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="log"></div> 9 <form name="fm1" style="display:none"> 10 <button id="btn">BUTTON</button> 11 <button id="menu_btn" type="menu" menu="menu">MENU BUTTON</button> 12 </form> 13 <script> 14 15 var btn = document.getElementById("btn"), 16 menu_btn = document.getElementById("menu_btn"), 17 t1 = async_test("The submit event must be fired when click a button in submit status"), 18 t2 = async_test("The reset event must be fired when click a button in reset status"); 19 t3 = async_test("type=button shouldn't trigger submit or reset events"); 20 t4 = async_test("Switching from type=button to type=submit should submit the form"); 21 t5 = async_test("Switching from type=button to type=reset should reset the form"); 22 t6 = async_test("Innermost button should submit its form"); 23 t7 = async_test("Innermost button should reset its form"); 24 t8 = async_test("Anchor inside a button should be prevent button activation"); 25 t9 = async_test("input type=submit inside a button should be prevent button activation"); 26 27 document.forms.fm1.onsubmit = t1.step_func(function (evt) { 28 evt.preventDefault(); 29 assert_true(evt.isTrusted, "The isTrusted attribute of the submit event should be true."); 30 assert_true(evt.bubbles, "The bubbles attribute of the submit event should be true."); 31 assert_true(evt.cancelable, "The cancelable attribute of the submit event should be true."); 32 assert_true(evt instanceof Event, "The submit event is an instance of Event interface."); 33 t1.done(); 34 }); 35 36 document.forms.fm1.onreset = t2.step_func(function (evt) { 37 assert_true(evt.isTrusted, "The isTrusted attribute of the reset event should be true."); 38 assert_true(evt.bubbles, "The bubbles attribute of the reset event should be true."); 39 assert_true(evt.cancelable, "The cancelable attribute of the reset event should be true."); 40 assert_true(evt instanceof Event, "The reset event is an instance of Event interface."); 41 t2.done(); 42 }); 43 44 t1.step(function () { 45 btn.type = "submit"; 46 assert_equals(btn.type, "submit", "The button type should be 'submit'."); 47 btn.click(); 48 }); 49 50 t2.step(function () { 51 btn.type = "reset"; 52 assert_equals(btn.type, "reset", "The button type should be 'reset'."); 53 btn.click(); 54 }); 55 56 t3.step(function () { 57 btn.type = "button"; 58 assert_equals(btn.type, "button", "The button type should be 'button'."); 59 document.forms.fm1.onsubmit = t3.step_func(function (evt) { 60 assert_unreached("type=button shouldn't trigger submission."); 61 }); 62 document.forms.fm1.onreset = t3.step_func(function (evt) { 63 assert_unreached("type=button shouldn't reset the form."); 64 }); 65 btn.click(); 66 t3.done(); 67 }); 68 69 t4.step(function () { 70 btn.type = "button"; 71 btn.onclick = function() { btn.type = "submit"; } 72 document.forms.fm1.onsubmit = t4.step_func(function (evt) { 73 evt.preventDefault(); 74 assert_equals(btn.type, "submit", "The button type should be 'submit'."); 75 t4.done(); 76 }); 77 btn.click(); 78 }); 79 80 t5.step(function () { 81 btn.type = "button"; 82 btn.onclick = function() { btn.type = "reset"; } 83 document.forms.fm1.onreset = t5.step_func(function (evt) { 84 evt.preventDefault(); 85 assert_equals(btn.type, "reset", "The button type should be 'reset'."); 86 t5.done(); 87 }); 88 btn.click(); 89 }); 90 91 t6.step(function () { 92 btn.type = "submit"; 93 btn.innerHTML = ""; 94 var fm2 = document.createElement("form"); 95 var btn2 = document.createElement("button"); 96 btn2.type = "submit"; 97 fm2.appendChild(btn2); 98 btn.appendChild(fm2); 99 assert_true(document.forms.fm1.contains(fm2), "Should have nested forms"); 100 101 function submitListener(evt) { 102 evt.preventDefault(); 103 assert_equals(evt.target, fm2, "Innermost form should have got the submit event"); 104 }; 105 window.addEventListener("submit", submitListener, true); 106 btn2.click(); 107 window.removeEventListener("submit", submitListener, true); 108 t6.done(); 109 }); 110 111 t7.step(function () { 112 btn.type = "reset"; 113 btn.innerHTML = ""; 114 var fm2 = document.createElement("form"); 115 var btn2 = document.createElement("button"); 116 btn2.type = "reset"; 117 fm2.appendChild(btn2); 118 btn.appendChild(fm2); 119 assert_true(document.forms.fm1.contains(fm2), "Should have nested forms"); 120 121 function resetListener(evt) { 122 evt.currentTarget.removeEventListener(evt.type, resetListener, true); 123 evt.preventDefault(); 124 assert_equals(evt.target, fm2, "Innermost form should have got the reset event"); 125 t7.done(); 126 }; 127 window.addEventListener("reset", resetListener, true); 128 btn2.click(); 129 }); 130 131 t8.step(function () { 132 btn.type = "submit"; 133 btn.innerHTML = ""; 134 var a = document.createElement("a"); 135 a.href = "#"; 136 btn.appendChild(a); 137 document.forms.fm1.onsubmit = t8.step_func(function (evt) { 138 assert_unreached("type=button shouldn't trigger submission."); 139 }); 140 141 a.click(); 142 t8.done(); 143 }); 144 145 t9.step(function () { 146 btn.type = "submit"; 147 btn.innerHTML = ""; 148 var fm2 = document.createElement("form"); 149 var btn2 = document.createElement("input"); 150 btn2.type = "submit"; 151 fm2.appendChild(btn2); 152 btn.appendChild(fm2); 153 assert_true(document.forms.fm1.contains(fm2), "Should have nested forms"); 154 155 function submitListener(evt) { 156 evt.preventDefault(); 157 assert_equals(evt.target, fm2, "Innermost form should have got the submit event"); 158 }; 159 160 window.addEventListener("submit", submitListener, true); 161 btn2.click(); 162 window.removeEventListener("submit", submitListener, true); 163 t9.done(); 164 }); 165 166 </script>