<!DOCTYPE html>
<meta charset="utf-8">
<title>Test the properties of input and change events</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<fieldset id="clickable">
  <input type="checkbox">
  <input type="radio">
</fieldset>

<fieldset id="typeable">
  <input type="text">
  <input type="search">
  <input type="tel">
  <input type="url">
  <input type="email">
  <input type="password">
  <input type="number">
  <textarea></textarea>
</fieldset>

<select>
  <option>1</option>
  <option>2</option>
</select>

<!-- Not going to test the more complicated input types like date or color for now... -->

<button id="click-me-to-unfocus-other-things">Clickable</button>

<script>
"use strict";
const clickMeToUnfocusOtherThings = document.querySelector("#click-me-to-unfocus-other-things");

for (const el of document.querySelector("#clickable").children) {
  test(() => {
    let inputEvent, changeEvent;
    el.oninput = e => inputEvent = e;
    el.onchange = e => changeEvent = e;

    el.click();

    assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true });
    assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false });
  }, `${el.outerHTML} click()`);
}

for (const el of document.querySelector("#typeable").children) {
  promise_test(async () => {
    let inputEvent, changeEvent;
    el.oninput = e => inputEvent = e;
    el.onchange = e => changeEvent = e;

    await test_driver.send_keys(el, "1"); // has to be a number so <input type=number> works
    await test_driver.click(clickMeToUnfocusOtherThings);

    assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true });
    assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false });
  }, `${el.outerHTML} typing`);
}

promise_test(async () => {
  const el = document.querySelector("select");

  let inputEvent, changeEvent;
  el.oninput = e => inputEvent = e;
  el.onchange = e => changeEvent = e;

  // TODO: this doesn't seem to work in Safari/on Macs. Or maybe Safari is legitimately failing.
  // Someone with a Mac should investigate.
  await test_driver.send_keys(el, "\uE015"); // down arrow key
  await test_driver.click(clickMeToUnfocusOtherThings);

  assert_event(inputEvent, { bubbles: true, cancelable: false, composed: true });
  assert_event(changeEvent, { bubbles: true, cancelable: false, composed: false });
}, `<select> pressing down arrow`);

function assert_event(e, { bubbles, cancelable, composed }) {
  assert_equals(e.bubbles, bubbles, `${e.type} bubbles`);
  assert_equals(e.cancelable, cancelable, `${e.type} cancelable`);
  assert_equals(e.composed, composed, `${e.type} composed`);
}
</script>