radio-input-cancel.html (2013B)
1 <!DOCTYPE HTML> 2 <title>Radio input cancel behavior reverts state</title> 3 <link rel="author" title="jeffcarp" href="mailto:gcarpenterv@gmail.com"> 4 <link rel="help" href="https://html.spec.whatwg.org/#radio-button-state-(type=radio)"> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <body> 10 <script> 11 "use strict"; 12 13 test(() => { 14 const input = document.createElement("input"); 15 input.type = "radio"; 16 document.body.appendChild(input); 17 const events = []; 18 19 input.addEventListener("change", () => { 20 events.push("change"); 21 }); 22 input.addEventListener("click", e => { 23 // cancel click event 24 e.preventDefault(); 25 events.push("click"); 26 }); 27 input.addEventListener("input", () => { 28 events.push("input"); 29 }); 30 31 assert_false(input.checked); 32 33 input.click(); 34 35 assert_false(input.checked); 36 37 // only click event called 38 assert_array_equals(events, ["click"]); 39 40 }, "radio input cancel behavior reverts state"); 41 42 test(() => { 43 const form = document.createElement("form"); 44 form.innerHTML = ` 45 <input id="radio1" type="radio" name="radiogroup" checked> 46 <input id="radio2" type="radio" name="radiogroup"> 47 `; 48 document.body.appendChild(form); 49 50 const inputs = form.querySelectorAll("input[type=radio]"); 51 const events = []; 52 53 inputs.forEach(input => { 54 input.addEventListener("change", () => { 55 events.push(`${input.id} change`); 56 }); 57 input.addEventListener("click", e => { 58 // cancel click event 59 e.preventDefault(); 60 events.push(`${input.id} click`); 61 }); 62 input.addEventListener("input", () => { 63 events.push(`${input.id} input`); 64 }); 65 }); 66 67 assert_true(inputs[0].checked); 68 assert_false(inputs[1].checked); 69 70 inputs[1].click(); 71 72 assert_true(inputs[0].checked); 73 assert_false(inputs[1].checked); 74 75 // only click event called 76 assert_array_equals(events, ["radio2 click"]); 77 78 }, "radio input cancel behavior reverts previous selected radio input state"); 79 </script>