11cb0ef41Sopenharmony_ci<!DOCTYPE html> 21cb0ef41Sopenharmony_ci<meta charset="utf-8"> 31cb0ef41Sopenharmony_ci<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> 41cb0ef41Sopenharmony_ci<title>input and change events for detached checkbox and radio elements</title> 51cb0ef41Sopenharmony_ci<script src="/resources/testharness.js"></script> 61cb0ef41Sopenharmony_ci<script src="/resources/testharnessreport.js"></script> 71cb0ef41Sopenharmony_ci 81cb0ef41Sopenharmony_ci<body> 91cb0ef41Sopenharmony_ci<script> 101cb0ef41Sopenharmony_ci 111cb0ef41Sopenharmony_citest(() => { 121cb0ef41Sopenharmony_ci const input = document.createElement('input'); 131cb0ef41Sopenharmony_ci input.type = 'checkbox'; 141cb0ef41Sopenharmony_ci 151cb0ef41Sopenharmony_ci let inputEventFired = false; 161cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 171cb0ef41Sopenharmony_ci let changeEventFired = false; 181cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 191cb0ef41Sopenharmony_ci input.click(); 201cb0ef41Sopenharmony_ci assert_false(inputEventFired); 211cb0ef41Sopenharmony_ci assert_false(changeEventFired); 221cb0ef41Sopenharmony_ci}, 'detached checkbox should not emit input or change events on click().'); 231cb0ef41Sopenharmony_ci 241cb0ef41Sopenharmony_citest(() => { 251cb0ef41Sopenharmony_ci const input = document.createElement('input'); 261cb0ef41Sopenharmony_ci input.type = 'radio'; 271cb0ef41Sopenharmony_ci 281cb0ef41Sopenharmony_ci let inputEventFired = false; 291cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 301cb0ef41Sopenharmony_ci let changeEventFired = false; 311cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 321cb0ef41Sopenharmony_ci input.click(); 331cb0ef41Sopenharmony_ci assert_false(inputEventFired); 341cb0ef41Sopenharmony_ci assert_false(changeEventFired); 351cb0ef41Sopenharmony_ci}, 'detached radio should not emit input or change events on click().'); 361cb0ef41Sopenharmony_ci 371cb0ef41Sopenharmony_citest(() => { 381cb0ef41Sopenharmony_ci const input = document.createElement('input'); 391cb0ef41Sopenharmony_ci input.type = 'checkbox'; 401cb0ef41Sopenharmony_ci 411cb0ef41Sopenharmony_ci let inputEventFired = false; 421cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 431cb0ef41Sopenharmony_ci let changeEventFired = false; 441cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 451cb0ef41Sopenharmony_ci input.dispatchEvent(new MouseEvent('click')); 461cb0ef41Sopenharmony_ci assert_false(inputEventFired); 471cb0ef41Sopenharmony_ci assert_false(changeEventFired); 481cb0ef41Sopenharmony_ci}, `detached checkbox should not emit input or change events on dispatchEvent(new MouseEvent('click')).`); 491cb0ef41Sopenharmony_ci 501cb0ef41Sopenharmony_citest(() => { 511cb0ef41Sopenharmony_ci const input = document.createElement('input'); 521cb0ef41Sopenharmony_ci input.type = 'radio'; 531cb0ef41Sopenharmony_ci 541cb0ef41Sopenharmony_ci let inputEventFired = false; 551cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 561cb0ef41Sopenharmony_ci let changeEventFired = false; 571cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 581cb0ef41Sopenharmony_ci input.dispatchEvent(new MouseEvent('click')); 591cb0ef41Sopenharmony_ci assert_false(inputEventFired); 601cb0ef41Sopenharmony_ci assert_false(changeEventFired); 611cb0ef41Sopenharmony_ci}, `detached radio should not emit input or change events on dispatchEvent(new MouseEvent('click')).`); 621cb0ef41Sopenharmony_ci 631cb0ef41Sopenharmony_ci 641cb0ef41Sopenharmony_citest(() => { 651cb0ef41Sopenharmony_ci const input = document.createElement('input'); 661cb0ef41Sopenharmony_ci input.type = 'checkbox'; 671cb0ef41Sopenharmony_ci document.body.appendChild(input); 681cb0ef41Sopenharmony_ci 691cb0ef41Sopenharmony_ci let inputEventFired = false; 701cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 711cb0ef41Sopenharmony_ci let changeEventFired = false; 721cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 731cb0ef41Sopenharmony_ci input.click(); 741cb0ef41Sopenharmony_ci assert_true(inputEventFired); 751cb0ef41Sopenharmony_ci assert_true(changeEventFired); 761cb0ef41Sopenharmony_ci}, 'attached checkbox should emit input and change events on click().'); 771cb0ef41Sopenharmony_ci 781cb0ef41Sopenharmony_citest(() => { 791cb0ef41Sopenharmony_ci const input = document.createElement('input'); 801cb0ef41Sopenharmony_ci input.type = 'radio'; 811cb0ef41Sopenharmony_ci document.body.appendChild(input); 821cb0ef41Sopenharmony_ci 831cb0ef41Sopenharmony_ci let inputEventFired = false; 841cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 851cb0ef41Sopenharmony_ci let changeEventFired = false; 861cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 871cb0ef41Sopenharmony_ci input.click(); 881cb0ef41Sopenharmony_ci assert_true(inputEventFired); 891cb0ef41Sopenharmony_ci assert_true(changeEventFired); 901cb0ef41Sopenharmony_ci}, 'attached radio should emit input and change events on click().'); 911cb0ef41Sopenharmony_ci 921cb0ef41Sopenharmony_citest(() => { 931cb0ef41Sopenharmony_ci const input = document.createElement('input'); 941cb0ef41Sopenharmony_ci input.type = 'checkbox'; 951cb0ef41Sopenharmony_ci document.body.appendChild(input); 961cb0ef41Sopenharmony_ci 971cb0ef41Sopenharmony_ci let inputEventFired = false; 981cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 991cb0ef41Sopenharmony_ci let changeEventFired = false; 1001cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 1011cb0ef41Sopenharmony_ci input.dispatchEvent(new MouseEvent('click')); 1021cb0ef41Sopenharmony_ci assert_true(inputEventFired); 1031cb0ef41Sopenharmony_ci assert_true(changeEventFired); 1041cb0ef41Sopenharmony_ci}, `attached checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 1051cb0ef41Sopenharmony_ci 1061cb0ef41Sopenharmony_citest(() => { 1071cb0ef41Sopenharmony_ci const input = document.createElement('input'); 1081cb0ef41Sopenharmony_ci input.type = 'radio'; 1091cb0ef41Sopenharmony_ci document.body.appendChild(input); 1101cb0ef41Sopenharmony_ci 1111cb0ef41Sopenharmony_ci let inputEventFired = false; 1121cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 1131cb0ef41Sopenharmony_ci let changeEventFired = false; 1141cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 1151cb0ef41Sopenharmony_ci input.dispatchEvent(new MouseEvent('click')); 1161cb0ef41Sopenharmony_ci assert_true(inputEventFired); 1171cb0ef41Sopenharmony_ci assert_true(changeEventFired); 1181cb0ef41Sopenharmony_ci}, `attached radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 1191cb0ef41Sopenharmony_ci 1201cb0ef41Sopenharmony_ci 1211cb0ef41Sopenharmony_citest(() => { 1221cb0ef41Sopenharmony_ci const input = document.createElement('input'); 1231cb0ef41Sopenharmony_ci input.type = 'checkbox'; 1241cb0ef41Sopenharmony_ci const shadowHost = document.createElement('div'); 1251cb0ef41Sopenharmony_ci document.body.appendChild(shadowHost); 1261cb0ef41Sopenharmony_ci const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 1271cb0ef41Sopenharmony_ci shadowRoot.appendChild(input); 1281cb0ef41Sopenharmony_ci 1291cb0ef41Sopenharmony_ci let inputEventFired = false; 1301cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 1311cb0ef41Sopenharmony_ci let changeEventFired = false; 1321cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 1331cb0ef41Sopenharmony_ci input.click(); 1341cb0ef41Sopenharmony_ci assert_true(inputEventFired); 1351cb0ef41Sopenharmony_ci assert_true(changeEventFired); 1361cb0ef41Sopenharmony_ci}, 'attached to shadow dom checkbox should emit input and change events on click().'); 1371cb0ef41Sopenharmony_ci 1381cb0ef41Sopenharmony_citest(() => { 1391cb0ef41Sopenharmony_ci const input = document.createElement('input'); 1401cb0ef41Sopenharmony_ci input.type = 'radio'; 1411cb0ef41Sopenharmony_ci const shadowHost = document.createElement('div'); 1421cb0ef41Sopenharmony_ci document.body.appendChild(shadowHost); 1431cb0ef41Sopenharmony_ci const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 1441cb0ef41Sopenharmony_ci shadowRoot.appendChild(input); 1451cb0ef41Sopenharmony_ci 1461cb0ef41Sopenharmony_ci let inputEventFired = false; 1471cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 1481cb0ef41Sopenharmony_ci let changeEventFired = false; 1491cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 1501cb0ef41Sopenharmony_ci input.click(); 1511cb0ef41Sopenharmony_ci assert_true(inputEventFired); 1521cb0ef41Sopenharmony_ci assert_true(changeEventFired); 1531cb0ef41Sopenharmony_ci}, 'attached to shadow dom radio should emit input and change events on click().'); 1541cb0ef41Sopenharmony_ci 1551cb0ef41Sopenharmony_citest(() => { 1561cb0ef41Sopenharmony_ci const input = document.createElement('input'); 1571cb0ef41Sopenharmony_ci input.type = 'checkbox'; 1581cb0ef41Sopenharmony_ci const shadowHost = document.createElement('div'); 1591cb0ef41Sopenharmony_ci document.body.appendChild(shadowHost); 1601cb0ef41Sopenharmony_ci const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 1611cb0ef41Sopenharmony_ci shadowRoot.appendChild(input); 1621cb0ef41Sopenharmony_ci 1631cb0ef41Sopenharmony_ci let inputEventFired = false; 1641cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 1651cb0ef41Sopenharmony_ci let changeEventFired = false; 1661cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 1671cb0ef41Sopenharmony_ci input.dispatchEvent(new MouseEvent('click')); 1681cb0ef41Sopenharmony_ci assert_true(inputEventFired); 1691cb0ef41Sopenharmony_ci assert_true(changeEventFired); 1701cb0ef41Sopenharmony_ci}, `attached to shadow dom checkbox should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 1711cb0ef41Sopenharmony_ci 1721cb0ef41Sopenharmony_citest(() => { 1731cb0ef41Sopenharmony_ci const input = document.createElement('input'); 1741cb0ef41Sopenharmony_ci input.type = 'radio'; 1751cb0ef41Sopenharmony_ci const shadowHost = document.createElement('div'); 1761cb0ef41Sopenharmony_ci document.body.appendChild(shadowHost); 1771cb0ef41Sopenharmony_ci const shadowRoot = shadowHost.attachShadow({mode: 'open'}); 1781cb0ef41Sopenharmony_ci shadowRoot.appendChild(input); 1791cb0ef41Sopenharmony_ci 1801cb0ef41Sopenharmony_ci let inputEventFired = false; 1811cb0ef41Sopenharmony_ci input.addEventListener('input', () => inputEventFired = true); 1821cb0ef41Sopenharmony_ci let changeEventFired = false; 1831cb0ef41Sopenharmony_ci input.addEventListener('change', () => changeEventFired = true); 1841cb0ef41Sopenharmony_ci input.dispatchEvent(new MouseEvent('click')); 1851cb0ef41Sopenharmony_ci assert_true(inputEventFired); 1861cb0ef41Sopenharmony_ci assert_true(changeEventFired); 1871cb0ef41Sopenharmony_ci}, `attached to shadow dom radio should emit input and change events on dispatchEvent(new MouseEvent('click')).`); 1881cb0ef41Sopenharmony_ci 1891cb0ef41Sopenharmony_ci</script> 1901cb0ef41Sopenharmony_ci</body> 191