chromium_src/content/test/data/android/input/input_mode.html · OpenHarmony-TPC/chromium_src - AtomGit

<!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">
    </form>

    <div id="contenteditable_none" contenteditable inputMode="none"></div>
    <div id="contenteditable_text" contenteditable inputMode="text"></div>
    <div id="contenteditable_tel" contenteditable inputMode="tel"></div>
    <div id="contenteditable_url" contenteditable inputMode="url"></div>
    <div id="contenteditable_email" contenteditable inputMode="email"></div>
    <div id="contenteditable_numeric" contenteditable inputMode="numeric"></div>
    <div id="contenteditable_decimal" contenteditable inputMode="decimal"></div>
    <div id="contenteditable_search" contenteditable inputMode="search"></div>

    <input type="password" inputMode="numeric" id="input_numeric_password" />
  </body>

    <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");

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

      registerListenersAndObserver(inputText);
    </script>
</html>