<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Forms</title>
    <meta name="viewport" content="minimum-scale=1,width=device-width" />
  </head>
  <body>
    <form id="form1">
      <input type="text" id="user1" value="foo" />
      <input type="password" id="pass1" value="foo" />
      <input type="email" id="email1" value="@" />
      <input type="number" id="number1" value="0" />
      <input type="tel" id="tel1" value="0" />
      <input type="submit" value="submit" />
    </form>
    <input type="Text" id="user2" value="foo" />
    <input type="PassWord" id="pass2" maxlength="8" value="foo" />
    <input type="button" id="button1" value="foo" />
    <input type="checkbox" id="checkbox1" />
    <input type="search" id="search1" />
    <input type="url" id="url1" />
    <input type="hidden" id="hidden1" value="foo" />

    <iframe
      id="iframe"
      src="http://example.org/tests/junit/forms_iframe.html"
    ></iframe>
  </body>
  <script>
    const params = new URL(document.location).searchParams;
    const iframe = document.getElementById("iframe").contentWindow;

    function getEventInterface(event) {
      if (event instanceof document.defaultView.InputEvent) {
        return "InputEvent";
      }
      if (event instanceof document.defaultView.UIEvent) {
        return "UIEvent";
      }
      if (event instanceof document.defaultView.Event) {
        return "Event";
      }
      return "Unknown";
    }

    function getData(key, value) {
      return new Promise(resolve =>
        document.querySelector(key).addEventListener(
          "input",
          event => {
            resolve([key, event.target.value, value, getEventInterface(event)]);
          },
          { once: true }
        )
      );
    }

    window.getDataForAllFrames = function (key, value) {
      const data = [];
      data.push(
        new Promise(resolve =>
          window.addEventListener(
            "message",
            event => {
              resolve(event.data);
            },
            { once: true }
          )
        )
      );
      iframe.postMessage({ key, value }, "*");
      data.push(getData(key, value));
      return Promise.all(data);
    };
  </script>
</html>
