checkbox.html (5453B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>input type checkbox</title> 4 <link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/#checkbox-state-(type=checkbox)"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#run-synthetic-click-activation-steps"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <div id="log"></div> 10 <input type=checkbox id=checkbox1> 11 <input type=checkbox id=checkbox2 disabled> 12 <input type=checkbox id=checkbox3> 13 <input type=checkbox id=checkbox4 checked> 14 <input type=checkbox id=checkbox5> 15 <input type=checkbox id=checkbox6> 16 <script> 17 var checkbox1 = document.getElementById('checkbox1'), 18 checkbox2 = document.getElementById('checkbox2'), 19 checkbox3 = document.getElementById('checkbox3'), 20 checkbox4 = document.getElementById('checkbox4'), 21 checkbox5 = document.getElementById('checkbox5'), 22 checkbox6 = document.getElementById('checkbox6'), 23 c1_click_fired = false, 24 c1_input_fired = false, 25 c1_change_fired = false, 26 t1 = async_test("click on mutable checkbox fires a click event, then an input event, then a change event"), 27 t2 = async_test("click on non-mutable checkbox doesn't fire the input or change event"), 28 t3 = async_test("pre-activation steps on unchecked checkbox"), 29 t4 = async_test("pre-activation steps on checked checkbox"), 30 t5 = async_test("canceled activation steps on unchecked checkbox"), 31 t6 = async_test("canceled activation steps on unchecked checkbox (indeterminate=true in onclick)"); 32 33 checkbox1.onclick = t1.step_func(function(e) { 34 c1_click_fired = true; 35 assert_false(c1_input_fired, "click event should fire before input event"); 36 assert_false(c1_change_fired, "click event should fire before change event"); 37 assert_false(e.isTrusted, "click()-initiated click event should not be trusted"); 38 }); 39 checkbox1.oninput = t1.step_func(function(e) { 40 c1_input_fired = true; 41 assert_true(c1_click_fired, "input event should fire after click event"); 42 assert_false(c1_change_fired, "input event should fire before change event"); 43 assert_true(e.bubbles, "event should bubble"); 44 assert_true(e.isTrusted, "click()-initiated event should be trusted"); 45 assert_false(e.cancelable, "event should not be cancelable"); 46 assert_true(checkbox1.checked, "checkbox is checked"); 47 assert_false(checkbox1.indeterminate, "checkbox is not indeterminate"); 48 }); 49 50 checkbox1.onchange = t1.step_func(function(e) { 51 c1_change_fired = true; 52 assert_true(c1_click_fired, "change event should fire after click event"); 53 assert_true(c1_input_fired, "change event should fire after input event"); 54 assert_true(e.bubbles, "event should bubble") 55 assert_true(e.isTrusted, "click()-initiated event should be trusted"); 56 assert_false(e.cancelable, "event should not be cancelable"); 57 assert_true(checkbox1.checked, "checkbox is checked"); 58 assert_false(checkbox1.indeterminate, "checkbox is not indeterminate"); 59 }); 60 61 checkbox2.oninput= t2.step_func(function(e) { 62 assert_unreached("event input fired"); 63 }); 64 65 checkbox2.onchange = t2.step_func(function(e) { 66 assert_unreached("event change fired"); 67 }); 68 69 t1.step(function() { 70 checkbox1.click(); 71 assert_true(c1_input_fired); 72 assert_true(c1_change_fired); 73 t1.done(); 74 }); 75 76 t2.step(function() { 77 checkbox2.click(); 78 t2.done(); 79 }); 80 81 t3.step(function() { 82 checkbox3.indeterminate = true; 83 checkbox3.click(); 84 assert_true(checkbox3.checked); 85 assert_false(checkbox3.indeterminate); 86 t3.done(); 87 }); 88 89 t4.step(function() { 90 checkbox4.indeterminate = true; 91 checkbox4.click(); 92 assert_false(checkbox4.checked); 93 assert_false(checkbox4.indeterminate); 94 t4.done(); 95 }); 96 97 checkbox5.onclick = t5.step_func(function(e) { 98 e.preventDefault(); 99 /* 100 The prevention of the click doesn't have an effect until after all the 101 click event handlers have been run. 102 */ 103 assert_true(checkbox5.checked); 104 assert_false(checkbox5.indeterminate); 105 t5.step_timeout(function() { 106 /* 107 The click event has finished being dispatched, so the checkedness and 108 determinateness have been toggled back by now because the event 109 was preventDefault-ed. 110 */ 111 assert_false(checkbox5.checked); 112 assert_false(checkbox5.indeterminate); 113 t5.done(); 114 }, 0); 115 }); 116 117 t5.step(function(){ 118 assert_false(checkbox5.checked); 119 assert_false(checkbox5.indeterminate); 120 checkbox5.click(); 121 }); 122 123 checkbox6.onclick = t6.step_func(function(e) { 124 checkbox6.indeterminate = true; 125 e.preventDefault(); 126 /* 127 The prevention of the click doesn't have an effect until after all the 128 click event handlers have been run. 129 */ 130 assert_true(checkbox6.checked); 131 assert_true(checkbox6.indeterminate); 132 t6.step_timeout(function() { 133 /* 134 The click event has finished being dispatched, so the checkedness and 135 determinateness have been toggled back by now because the event 136 was preventDefault-ed. 137 */ 138 assert_false(checkbox6.checked); 139 assert_false(checkbox6.indeterminate); 140 t6.done(); 141 }, 0); 142 }); 143 144 t6.step(function(){ 145 assert_false(checkbox6.checked); 146 assert_false(checkbox6.indeterminate); 147 checkbox6.click(); 148 }); 149 </script>