inputevent-ime.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<body>
<script>
  const eventLog = [];

  document.addEventListener('beforeinput', event => {
    const logString =
      `beforeinput: isComposing=${event.isComposing}, data="${event.data}", `
          + `inputType=${event.inputType}`;
    eventLog.push(logString);
  });

  document.addEventListener('textInput', event => {
    const logString = `textInput: data="${event.data}"`;
    eventLog.push(logString);
  });

  document.addEventListener('input', event => {
    const logString =
      `input: isComposing=${event.isComposing}, data="${event.data}", `
          + `inputType=${event.inputType}`;
    eventLog.push(logString);
  });

  document.addEventListener('compositionstart', event => {
    eventLog.push('compositionstart');
  });

  document.addEventListener('compositionupdate', event => {
    const logString = `compositionupdate: data="${event.data}"`;
    eventLog.push(logString);
  });

  document.addEventListener('compositionend', event => {
    const logString = `compositionend: data="${event.data}"`;
    eventLog.push(logString);
  });

  function resetEventLog() {
    eventLog.length = 0;
  }

  function checkTextInputController() {
    assert_not_equals(textInputController, undefined,
                      'This test requires textInputController.');
  }

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.value = 'hello';
    input.focus();
    textInputController.setMarkedTextFromExistingText(0, 5);

    assert_array_equals(eventLog, [
      'compositionstart',
      'compositionupdate: data="hello"',
    ]);
  }, 'setMarkedTextFromExistingText');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.value = 'hello';
    input.select();
    input.focus();

    resetEventLog();
    textInputController.setComposition('');
    assert_array_equals(eventLog, [
      'beforeinput: isComposing=false, data="null", '
          + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
    ]);
  }, 'setComposition with no composition open, empty text replacing selection');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();

    resetEventLog();
    textInputController.setComposition('');
    assert_array_equals(eventLog, []);
  }, 'setComposition with no composition open, empty text, no selection');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();

    resetEventLog();
    textInputController.setComposition('hello');
    assert_array_equals(eventLog, [
      'compositionstart',
      'compositionupdate: data="hello"',
      'beforeinput: isComposing=true, data="hello", '
          + 'inputType=insertCompositionText',
      'input: isComposing=true, data="hello", inputType=insertCompositionText',
    ]);
  }, 'setComposition with no composition open, non-empty text, no selection');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.setComposition('');
    assert_array_equals(eventLog, [
      'compositionupdate: data=""',
      'beforeinput: isComposing=true, data="", inputType=insertCompositionText',
      'textInput: data=""',
      'input: isComposing=true, data="null", inputType=insertCompositionText',
      'compositionend: data=""',
    ]);
  }, 'setComposition with open composition, empty text');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.setComposition('hello world');
    assert_array_equals(eventLog, [
      'compositionupdate: data="hello world"',
      'beforeinput: isComposing=true, data="hello world", '
          + 'inputType=insertCompositionText',
      'input: isComposing=true, data="hello world", '
          + 'inputType=insertCompositionText',
    ]);
  }, 'setComposition with open composition, non-empty text');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.insertText('hello world');
    assert_array_equals(eventLog, [
      'compositionupdate: data="hello world"',
      'beforeinput: isComposing=true, data="hello world", '
          + 'inputType=insertCompositionText',
      'textInput: data="hello world"',
      'input: isComposing=true, data="hello world", '
          + 'inputType=insertCompositionText',
      'compositionend: data="hello world"',
    ]);
  }, 'insertText with open composition, non-empty text');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.insertText('');
    assert_array_equals(eventLog, [
      'compositionupdate: data=""',
      'beforeinput: isComposing=true, data="", inputType=insertCompositionText',
      'textInput: data=""',
      'input: isComposing=true, data="null", inputType=insertCompositionText',
      'compositionend: data=""',
    ]);
  }, 'insertText with open composition, empty text');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    resetEventLog();

    textInputController.insertText('hello');
    assert_array_equals(eventLog, [
      'beforeinput: isComposing=false, data="hello", inputType=insertText',
      'textInput: data="hello"',
      'input: isComposing=false, data="hello", inputType=insertText',
    ]);
  }, 'insertText without open composition, non-empty text');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    resetEventLog();

    textInputController.insertText('');
    assert_array_equals(eventLog, []);
  }, 'insertText without open composition, empty text');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.unmarkText();
    assert_array_equals(eventLog, [
      'compositionend: data="hello"',
    ]);
  }, 'unmarkText, not too long for input');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.setAttribute('maxlength', 1);
    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.unmarkText();
    assert_array_equals(eventLog, [
      'compositionupdate: data="hello"',
      'beforeinput: isComposing=true, data="hello", '
          + 'inputType=insertCompositionText',
      'textInput: data="h"',
      'input: isComposing=true, data="h", inputType=insertCompositionText',
      'compositionend: data="hello"',
    ]);
  }, 'unmarkText, too long for input');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.unmarkAndUnselectText();
    assert_array_equals(eventLog, [
      'compositionend: data="hello"',
    ]);
  }, 'unmarkAndUnselectText, not too long for input');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.setAttribute('maxlength', 1);
    input.focus();
    textInputController.setComposition('hello');
    resetEventLog();

    textInputController.unmarkAndUnselectText();
    assert_array_equals(eventLog, [
      'compositionupdate: data="hello"',
      'beforeinput: isComposing=true, data="hello", '
          + 'inputType=insertCompositionText',
      'textInput: data="h"',
      'input: isComposing=true, data="h", inputType=insertCompositionText',
      'compositionend: data="hello"',
    ]);
  }, 'unmarkAndUnselectText, too long for input');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.value = 'hello';
    input.focus();
    input.setSelectionRange(2, 2);
    resetEventLog();

    textInputController.extendSelectionAndDelete(1, 1);
    assert_array_equals(eventLog, [
      'beforeinput: isComposing=false, data="null", '
          + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
    ]);
  }, 'extendSelectionAndDelete, no composition open');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.value = 'hello';
    input.focus();
    textInputController.setMarkedTextFromExistingText(0, 5);
    input.setSelectionRange(2, 2);
    resetEventLog();

    textInputController.extendSelectionAndDelete(1, 1);
    assert_array_equals(eventLog, [
      'beforeinput: isComposing=false, data="null", '
          + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
    ]);
  }, 'extendSelectionAndDelete, composition open');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.value = 'hello';
    input.focus();
    input.setSelectionRange(2, 2);
    resetEventLog();

    textInputController.deleteSurroundingText(1, 1);
    assert_array_equals(eventLog, [
      'beforeinput: isComposing=false, data="null", '
          + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
      'beforeinput: isComposing=false, data="null", '
          + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
    ]);
  }, 'deleteSurroundingText, no composition open');

  test(() => {
    checkTextInputController();

    const input = document.createElement('input');
    document.body.appendChild(input);

    input.value = 'hello';
    input.focus();
    textInputController.setMarkedTextFromExistingText(0, 5);
    input.setSelectionRange(2, 2);
    resetEventLog();

    textInputController.deleteSurroundingText(1, 1);
    assert_array_equals(eventLog, [
      'beforeinput: isComposing=false, data="null", '
           + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
      'beforeinput: isComposing=false, data="null", '
         + 'inputType=deleteContentBackward',
      'input: isComposing=false, data="null", inputType=deleteContentBackward',
    ]);
  }, 'deleteSurroundingText, composition open');
</script>
chromium/third_party/blink/web_tests/fast/events/inputevents/inputevent-ime.html
