components/test/data/actor/input.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
    <title>Page with text input</title>
    <style>
      div {
        margin-top: 8px;
      }
    </style>
  </head>
  <body>
    <!-- method=dialog prevents the form from navigating the page -->
    <form id="form" method="dialog">
      <input type="text" name="input" id="input">
      <input type="text" name="input2" id="input2" aria-label="test-input">
      <input type="text" name="input3" id="input3" aria-label="disabled-input" disabled>
      <input type="submit" id="submit">
    </form>
    <script>
      let input_event_log = [];
      let log_handler = e => {
        input_event_log.push({ type: e.type, time: e.timeStamp });
      };

      document.getElementById('input').addEventListener('change', log_handler);
      document.getElementById('input').addEventListener('input', log_handler);
      document.getElementById('input').addEventListener('keydown', log_handler);
      document.getElementById('input').addEventListener('keyup', log_handler);
      document.getElementById('submit').addEventListener('click', log_handler);

      // Filtering out unexpected 'change' events. Change events depend on focus
      // which causes browser_tests to flake.
      function getStableEvents() {
        return input_event_log.filter((event, index, arr) => {
          return event.type !== 'change';
        });
      }

      function getStableEventLog() {
        return getStableEvents().map(event => event.type).join(',');
      }

      function getStableEventLogTimes() {
        return getStableEvents().map(event => event.time);
      }
    </script>

    <div>
      This input calls preventDefault on all key events.
      <input type="text" id="keyHandlingInput" aria-label="key-handling-input">
      <script>
        document.getElementById('keyHandlingInput')
            .addEventListener('keydown', e => {
          e.target.value += e.key;
          e.preventDefault();
        });
        document.getElementById('keyHandlingInput')
            .addEventListener('keypress', e => e.preventDefault());
        document.getElementById('keyHandlingInput')
            .addEventListener('keyup', e => e.preventDefault());
      </script>
    </div>

    <div>
      This input is disabled and initially offscreen
      <input type="text"
             style="position: absolute; top: 200vh"
             id="offscreen-disabled-input"
             aria-label="offscreen_disabled_input" disabled>
    </div>
  </body>
</html>