<!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>