input_forms.html | Explore in Territory

<!DOCTYPE html>
<!-- Note: if this page gets long (or wide) enough that it can't fit entirely on
     the phone's display without scrolling, the test will start being flaky and
     it will be very difficult to debug :(. -->
<html>
  <head>
    <meta name="viewport" content="width=device-width">
  </head>
  <body>
    <form action="about:blank">
      <input id="input_text" type="text" size="10"><br>
    </form>
    <input id="input_text1" type="text" size="10" value="sometext"><br>
    <input id="input_text2" type="text" size="10" value="othertext"><br>
    <form>
      <textarea id="textarea" rows="2" cols="10"></textarea>
      <textarea id="textarea2" rows="2" cols="10" autocomplete="off"></textarea>
      <input id="input_number1" type="number">
      <input id="input_number2" type="number"><br><br>
      <!-- We need extra space around the plain text since otherwise taps on it
           would get snapped to the surrounding <input> elements. -->
      <span id="plain_text">This is Plain Text One</span><br><br>
      <div id="contenteditable1" contenteditable>contenteditable1</div>
      <input id="search1" type="search" size="10">
      <input id="input_text3" type="text" size="10"><br>
      <input id="input_radio" type="radio" style="width:50px;height:50px"><br>
    </form>
    <form>
      <input id="autocorrect_off" type="input" autocorrect="off">
      <input id="autocorrect_on" type="input" autocorrect="on">
    </form>

    <!-- We may trigger different sets of events for CONTENTEDITABLE and INPUT / TEXTAREA -->
    <div id="contenteditable_event" contenteditable><b>ab</b>cd<i>ef<b>gh</b></i></div>
    <a id="link" href="about:blank">hello</a>

    <script>
      var selectionChangeEventLog = "";
      var otherEventLog = "";
      var mutationObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
          addEventLog(mutation.type, mutation.detail);
        });
      })

      var mutationConfig = { attributes: false, childList: false, characterData: true };

      function addOtherEventLog(type, detail) {
        if (otherEventLog.length > 0) {
          otherEventLog += ',';
        }
        if (detail == null) {
          otherEventLog += type;
        } else {
          otherEventLog += type + '(' + detail + ')';
        }
      }

      function addSelectionChangeEventLog(type, detail) {
        if (selectionChangeEventLog.length > 0) {
          selectionChangeEventLog += ',';
        }
        if (detail == null) {
          selectionChangeEventLog += type;
        } else {
          selectionChangeEventLog += type + '(' + detail + ')';
        }
      }

      // selectionchange event is queued, so it races with the other events.
      // crbug.com/628964
      function getEventLogs() {
        if (otherEventLog.length > 0 && selectionChangeEventLog.length > 0)
          return otherEventLog + ',' + selectionChangeEventLog;
        return otherEventLog + selectionChangeEventLog;
      }

      function clearEventLogs() {
        selectionChangeEventLog = '';
        otherEventLog = '';
      }

      function addEventListener(element, event_name) {
        element.addEventListener(event_name, function (e) { addOtherEventLog(event_name, e.data); });
      }

      function addKeyEventListener(element, event_name) {
        element.addEventListener(event_name, function (e) { addOtherEventLog(event_name, e.keyCode); });
      }

      function addSelectionEventListener(event_name) {
        // Note that listeners added to the element are not effective for now.
        document.addEventListener(event_name, function (e) { addSelectionChangeEventLog(event_name, e.data); });
      }

      function registerListenersAndObserver(element) {
        addKeyEventListener(element, "keydown");
        addKeyEventListener(element, "keypress");
        addKeyEventListener(element, "keyup");
        addEventListener(element, "compositionstart");
        addEventListener(element, "compositionupdate");
        addEventListener(element, "compositionend");
        addEventListener(element, "beforeedit");
        addEventListener(element, "edit");
        addEventListener(element, "select");
        addEventListener(element, "change");
        addEventListener(element, "input");
        mutationObserver.observe(element, mutationConfig);
      }

      var inputText = document.getElementById("input_text");
      var contenteditableEvent = document.getElementById("contenteditable_event");

      // SelectionEventListener should be outside registerListenersAndObserver() to avoid duplication.
      addSelectionEventListener("selectionchange");

      registerListenersAndObserver(inputText);
      registerListenersAndObserver(contenteditableEvent);
    </script>
  </body>
</html>
chromium/content/test/data/android/input/input_forms.html
