Event-dispatch-detached-input-and-change.html (6936B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> 4 <title>input and change events for detached checkbox and radio elements</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <body> 9 <script> 10 11 test(() => { 12 const input = document.createElement('input'); 13 input.type = 'checkbox'; 14 15 let inputEventFired = false; 16 input.addEventListener('input', () => inputEventFired = true); 17 let changeEventFired = false; 18 input.addEventListener('change', () => changeEventFired = true); 19 input.click(); 20 assert_false(inputEventFired); 21 assert_false(changeEventFired); 22 }, 'detached checkbox should not emit input or change events on click().'); 23 24 test(() => { 25 const input = document.createElement('input'); 26 input.type = 'radio'; 27 28 let inputEventFired = false; 29 input.addEventListener('input', () => inputEventFired = true); 30 let changeEventFired = false; 31 input.addEventListener('change', () => changeEventFired = true); 32 input.click(); 33 assert_false(inputEventFired); 34 assert_false(changeEventFired); 35 }, 'detached radio should not emit input or change events on click().'); 36 37 test(() => { 38 const input = document.createElement('input'); 39 input.type = 'checkbox'; 40 41 let inputEventFired = false; 42 input.addEventListener('input', () => inputEventFired = true); 43 let changeEventFired = false; 44 input.addEventListener('change', () => changeEventFired = true); 45 input.dispatchEvent(new MouseEvent('click')); 46 assert_false(inputEventFired); 47 assert_false(changeEventFired); 48 }, `detached checkbox should not emit input or change events on dispatchEvent(new MouseEvent('click')).`); 49 50 test(() => { 51 const input = document.createElement('input'); 52 input.type = 'radio'; 53 54 let inputEventFired = false; 55 input.addEventListener('input', () => inputEventFired = true); 56 let changeEventFired = false; 57 input.addEventListener('change', () => changeEventFired = true); 58 input.dispatchEvent(new MouseEvent('click')); 59 assert_false(inputEventFired); 60 assert_false(changeEventFired); 61 }, `detached radio should not emit input or change events on dispatchEvent(new MouseEvent('click')).`); 62 63 64 test(() => { 65 const input = document.createElement('input'); 66 input.type = 'checkbox'; 67 document.body.appendChild(input); 68 69 let inputEventFired = false; 70 input.addEventListener('input', () => inputEventFired = true); 71 let changeEventFired = false; 72 input.addEventListener('change', () => changeEventFired = true); 73 input.click(); 74 assert_true(inputEventFired); 75 assert_true(changeEventFired); 76 }, 'attached checkbox should emit input and change events on click().'); 77 78 test(() => { 79 const input = document.createElement('input'); 80 input.type = 'radio'; 81 document.body.appendChild(input); 82 83 let inputEventFired = false; 84 input.addEventListener('input', () => inputEventFired = true); 85 let changeEventFired = false; 86 input.addEventListener('change', () => changeEventFired = true); 87 input.click(); 88 assert_true(inputEventFired); 89 assert_true(changeEventFired); 90 }, 'attached radio should emit input and change events on click().'); 91 92 test(() => { 93 const input = document.createElement('input'); 94 input.type = 'checkbox'; 95 document.body.appendChild(input); 96 97 let inputEventFired = false; 98 input.addEventListener('input', () => inputEventFired = true); 99 let changeEventFired = false; 100 input.addEventListener('change', () => changeEventFired = true); 101 input.dispatchEvent(new MouseEvent('click')); 102 assert_true(inputEventFired); 103 assert_true(changeEventFired); 104 }, `attached checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 105 106 test(() => { 107 const input = document.createElement('input'); 108 input.type = 'radio'; 109 document.body.appendChild(input); 110 111 let inputEventFired = false; 112 input.addEventListener('input', () => inputEventFired = true); 113 let changeEventFired = false; 114 input.addEventListener('change', () => changeEventFired = true); 115 input.dispatchEvent(new MouseEvent('click')); 116 assert_true(inputEventFired); 117 assert_true(changeEventFired); 118 }, `attached radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 119 120 121 test(() => { 122 const input = document.createElement('input'); 123 input.type = 'checkbox'; 124 const shadowHost = document.createElement('div'); 125 document.body.appendChild(shadowHost); 126 const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 127 shadowRoot.appendChild(input); 128 129 let inputEventFired = false; 130 input.addEventListener('input', () => inputEventFired = true); 131 let changeEventFired = false; 132 input.addEventListener('change', () => changeEventFired = true); 133 input.click(); 134 assert_true(inputEventFired); 135 assert_true(changeEventFired); 136 }, 'attached to shadow dom checkbox should emit input and change events on click().'); 137 138 test(() => { 139 const input = document.createElement('input'); 140 input.type = 'radio'; 141 const shadowHost = document.createElement('div'); 142 document.body.appendChild(shadowHost); 143 const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 144 shadowRoot.appendChild(input); 145 146 let inputEventFired = false; 147 input.addEventListener('input', () => inputEventFired = true); 148 let changeEventFired = false; 149 input.addEventListener('change', () => changeEventFired = true); 150 input.click(); 151 assert_true(inputEventFired); 152 assert_true(changeEventFired); 153 }, 'attached to shadow dom radio should emit input and change events on click().'); 154 155 test(() => { 156 const input = document.createElement('input'); 157 input.type = 'checkbox'; 158 const shadowHost = document.createElement('div'); 159 document.body.appendChild(shadowHost); 160 const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 161 shadowRoot.appendChild(input); 162 163 let inputEventFired = false; 164 input.addEventListener('input', () => inputEventFired = true); 165 let changeEventFired = false; 166 input.addEventListener('change', () => changeEventFired = true); 167 input.dispatchEvent(new MouseEvent('click')); 168 assert_true(inputEventFired); 169 assert_true(changeEventFired); 170 }, `attached to shadow dom checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 171 172 test(() => { 173 const input = document.createElement('input'); 174 input.type = 'radio'; 175 const shadowHost = document.createElement('div'); 176 document.body.appendChild(shadowHost); 177 const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 178 shadowRoot.appendChild(input); 179 180 let inputEventFired = false; 181 input.addEventListener('input', () => inputEventFired = true); 182 let changeEventFired = false; 183 input.addEventListener('change', () => changeEventFired = true); 184 input.dispatchEvent(new MouseEvent('click')); 185 assert_true(inputEventFired); 186 assert_true(changeEventFired); 187 }, `attached to shadow dom radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 188 189 </script> 190 </body>