button-click-submits-with-commandfor.tentative.html (3567B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>Clicking a button should submit the form</title> 4 <meta name="author" title="Keith Cirkel" href="mailto:wpt@keithcirkel.co.uk" /> 5 <link 6 rel="help" 7 href="https://html.spec.whatwg.org/multipage/#attr-button-type-submit-state" 8 /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 12 <form id="form"> 13 <button id="button"></button> 14 </form> 15 16 <script> 17 const form = document.getElementById("form"); 18 const button = document.getElementById("button"); 19 20 function resetState() { 21 button.removeAttribute("commandfor"); 22 button.removeAttribute("command"); 23 button.removeAttribute("disabled"); 24 button.removeAttribute("form"); 25 button.removeAttribute("type"); 26 } 27 28 test((t) => { 29 t.add_cleanup(resetState); 30 button.setAttribute("command", "--foo"); 31 32 let called = false; 33 form.addEventListener("submit", (e) => { 34 e.preventDefault(); 35 called = true; 36 }, { once: true }); 37 button.click(); 38 assert_false(called, "submit should not have been dispatched"); 39 }, "clicking a button (implicit type) should NOT trigger a submit (with command attribute)"); 40 41 test((t) => { 42 t.add_cleanup(resetState); 43 button.setAttribute("commandfor", "whatever"); 44 45 let called = false; 46 form.addEventListener("submit", (e) => { 47 e.preventDefault(); 48 called = true; 49 }, { once: true }); 50 button.click(); 51 assert_false(called, "submit should not have been dispatched"); 52 }, "clicking a button (implicit type) should NOT trigger a submit (with commandfor attribute)"); 53 54 test((t) => { 55 t.add_cleanup(resetState); 56 button.setAttribute("command", "--foo"); 57 button.setAttribute("commandfor", "whatever"); 58 59 let called = false; 60 form.addEventListener("submit", (e) => { 61 e.preventDefault(); 62 called = true; 63 }, { once: true }); 64 button.click(); 65 assert_false(called, "submit should not have been dispatched"); 66 }, "clicking a button (implicit type) should NOT trigger a submit (with command and commandfor attribute)"); 67 68 test((t) => { 69 t.add_cleanup(resetState); 70 button.setAttribute("command", "--foo"); 71 button.setAttribute("type", "submit"); 72 73 let called = false; 74 form.addEventListener("submit", (e) => { 75 e.preventDefault(); 76 called = true; 77 }, { once: true }); 78 button.click(); 79 assert_true(called, "submit should have been dispatched"); 80 }, "clicking a button (explicit type=submit) SHOULD trigger a submit (with command attribute)"); 81 82 test((t) => { 83 t.add_cleanup(resetState); 84 button.setAttribute("commandfor", "whatever"); 85 button.setAttribute("type", "submit"); 86 87 let called = false; 88 form.addEventListener("submit", (e) => { 89 e.preventDefault(); 90 called = true; 91 }, { once: true }); 92 button.click(); 93 assert_true(called, "submit should have been dispatched"); 94 }, "clicking a button (explicit type=submit) SHOULD trigger a submit (with commandfor attribute)"); 95 96 test((t) => { 97 t.add_cleanup(resetState); 98 button.setAttribute("command", "--foo"); 99 button.setAttribute("commandfor", "whatever"); 100 button.setAttribute("type", "submit"); 101 102 let called = false; 103 form.addEventListener("submit", (e) => { 104 e.preventDefault(); 105 called = true; 106 }, { once: true }); 107 button.click(); 108 assert_true(called, "submit should have been dispatched"); 109 }, "clicking a button (explicit type=submit) SHOULD trigger a submit (with command and commandfor attribute)"); 110 </script>