<!DOCTYPE html> <meta charset="utf-8"> <link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> <title>input and change events for detached checkbox and radio elements</title> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <body> <script> test(() => { const input = document.createElement('input'); input.type = 'checkbox'; let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.click(); assert_false(inputEventFired); assert_false(changeEventFired); }, 'detached checkbox should not emit input or change events on click().'); test(() => { const input = document.createElement('input'); input.type = 'radio'; let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.click(); assert_false(inputEventFired); assert_false(changeEventFired); }, 'detached radio should not emit input or change events on click().'); test(() => { const input = document.createElement('input'); input.type = 'checkbox'; let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.dispatchEvent(new MouseEvent('click')); assert_false(inputEventFired); assert_false(changeEventFired); }, `detached checkbox should not emit input or change events on dispatchEvent(new MouseEvent('click')).`); test(() => { const input = document.createElement('input'); input.type = 'radio'; let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.dispatchEvent(new MouseEvent('click')); assert_false(inputEventFired); assert_false(changeEventFired); }, `detached radio should not emit input or change events on dispatchEvent(new MouseEvent('click')).`); test(() => { const input = document.createElement('input'); input.type = 'checkbox'; document.body.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.click(); assert_true(inputEventFired); assert_true(changeEventFired); }, 'attached checkbox should emit input and change events on click().'); test(() => { const input = document.createElement('input'); input.type = 'radio'; document.body.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.click(); assert_true(inputEventFired); assert_true(changeEventFired); }, 'attached radio should emit input and change events on click().'); test(() => { const input = document.createElement('input'); input.type = 'checkbox'; document.body.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.dispatchEvent(new MouseEvent('click')); assert_true(inputEventFired); assert_true(changeEventFired); }, `attached checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`); test(() => { const input = document.createElement('input'); input.type = 'radio'; document.body.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.dispatchEvent(new MouseEvent('click')); assert_true(inputEventFired); assert_true(changeEventFired); }, `attached radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`); test(() => { const input = document.createElement('input'); input.type = 'checkbox'; const shadowHost = document.createElement('div'); document.body.appendChild(shadowHost); const shadowRoot = shadowHost.attachShadow({mode: 'open'}); shadowRoot.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.click(); assert_true(inputEventFired); assert_true(changeEventFired); }, 'attached to shadow dom checkbox should emit input and change events on click().'); test(() => { const input = document.createElement('input'); input.type = 'radio'; const shadowHost = document.createElement('div'); document.body.appendChild(shadowHost); const shadowRoot = shadowHost.attachShadow({mode: 'open'}); shadowRoot.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.click(); assert_true(inputEventFired); assert_true(changeEventFired); }, 'attached to shadow dom radio should emit input and change events on click().'); test(() => { const input = document.createElement('input'); input.type = 'checkbox'; const shadowHost = document.createElement('div'); document.body.appendChild(shadowHost); const shadowRoot = shadowHost.attachShadow({mode: 'open'}); shadowRoot.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.dispatchEvent(new MouseEvent('click')); assert_true(inputEventFired); assert_true(changeEventFired); }, `attached to shadow dom checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`); test(() => { const input = document.createElement('input'); input.type = 'radio'; const shadowHost = document.createElement('div'); document.body.appendChild(shadowHost); const shadowRoot = shadowHost.attachShadow({mode: 'open'}); shadowRoot.appendChild(input); let inputEventFired = false; input.addEventListener('input', () => inputEventFired = true); let changeEventFired = false; input.addEventListener('change', () => changeEventFired = true); input.dispatchEvent(new MouseEvent('click')); assert_true(inputEventFired); assert_true(changeEventFired); }, `attached to shadow dom radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`); </script> </body>