1
    2
    3
    4
    5
    6
    7
    8
    9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
   96
   97
   98
   99
  100
  101
  102
  103
  104
  105
  106
  107
  108
  109
  110
  111
  112
  113
  114
  115
  116
  117
  118
  119
  120
  121


content / test / data / android / input / input_forms.html [blame]

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