Make "compositionend" event fired after setting caret position

third_party/WebKit/Source/core/editing/InputMethodControllerTest.cpp

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "core/editing/InputMethodController.h"
 
 #include "core/dom/Document.h"
 #include "core/dom/Element.h"
 #include "core/dom/Range.h"
 #include "core/editing/Editor.h"
@@ skipping 10 matching lines @@
 namespace blink {
 
 class InputMethodControllerTest : public ::testing::Test {
  protected:
   InputMethodController& controller() {
     return frame().inputMethodController();
   }
   Document& document() const { return *m_document; }
   LocalFrame& frame() const { return m_dummyPageHolder->frame(); }
   Element* insertHTMLElement(const char* elementCode, const char* elementId);
+  void createHTMLWithCompositionInputEventListeners();
+  void createHTMLWithCompositionEndEventListener(const SelectionType);
 
  private:
   void SetUp() override;
 
   std::unique_ptr<DummyPageHolder> m_dummyPageHolder;
   Persistent<Document> m_document;
 };
 
 void InputMethodControllerTest::SetUp() {
   m_dummyPageHolder = DummyPageHolder::create(IntSize(800, 600));
   m_document = &m_dummyPageHolder->document();
   DCHECK(m_document);
 }
 
 Element* InputMethodControllerTest::insertHTMLElement(const char* elementCode,
                                                       const char* elementId) {
   document().write(elementCode);
   document().updateStyleAndLayout();
   Element* element = document().getElementById(elementId);
   element->focus();
   return element;
 }
 
+void InputMethodControllerTest::createHTMLWithCompositionInputEventListeners() {
+  document().settings()->setScriptEnabled(true);
+  Element* editable =
+      insertHTMLElement("<div id='sample' contenteditable></div>", "sample");
+  Element* script = document().createElement("script");
+  script->setInnerHTML(
+      "document.getElementById('sample').addEventListener('beforeinput', "
+      "event => document.title = `beforeinput.data:${event.data};`);"

[yosin_UTC9, 2016/11/17 05:38:06]

nit: s/event =>/  event ->/

[yabinh, 2016/11/17 06:58:15]

It seems that "event ->" doesn't work.

[yabinh, 2016/11/17 18:18:45]

According to ES6, there is only fat arrow function(=>), no thin arrow
function(->).

See
http://softwareengineering.stackexchange.com/questions/306082/why-doesnt-es6-...
and the document of arrow function:
http://exploringjs.com/es6/ch_arrow-functions.html

+      "document.getElementById('sample').addEventListener('input', "
+      "event => document.title += `input.data:${event.data};`);"

[yosin_UTC9, 2016/11/17 05:38:06]

nit: s/event =>/  event ->/

+      "document.getElementById('sample').addEventListener('compositionend', "
+      "event => document.title += `compositionend.data:${event.data};`);");

[yosin_UTC9, 2016/11/17 05:38:06]

nit: s/event =>/  event ->/

+  document().body()->appendChild(script);
+  document().view()->updateAllLifecyclePhases();
+  editable->focus();
+}
+
+void InputMethodControllerTest::createHTMLWithCompositionEndEventListener(
+    const SelectionType type) {
+  document().settings()->setScriptEnabled(true);
+  Element* editable =
+      insertHTMLElement("<div id='sample' contentEditable></div>", "sample");
+  Element* script = document().createElement("script");
+
+  switch (type) {
+    case NoSelection:
+      script->setInnerHTML(
+          // If the caret position is set before firing 'compositonend' event
+          // (and it should), the final caret position will be reset to null.
+          "document.getElementById('sample').addEventListener('compositionend',"
+          "event => getSelection().removeAllRanges());");
+      break;
+    case CaretSelection:
+      script->setInnerHTML(
+          // If the caret position is set before firing 'compositonend' event
+          // (and it should), the final caret position will be reset to [3,3].
+          "document.getElementById('sample').addEventListener('compositionend',"
+          "event => {"
+          "    const node = document.getElementById('sample').firstChild;"
+          "    getSelection().collapse(node, 3);"
+          "});");
+      break;
+    case RangeSelection:
+      script->setInnerHTML(
+          // If the caret position is set before firing 'compositonend' event
+          // (and it should), the final caret position will be reset to [2,4].
+          "document.getElementById('sample').addEventListener('compositionend',"
+          "event => {"
+          "    const node = document.getElementById('sample').firstChild;"
+          "    var range = document.createRange();"

[yosin_UTC9, 2016/11/17 05:38:06]

nit: s/var/const/

+          "    range.setStart(node, 2);"
+          "    range.setEnd(node, 4);"
+          "    const selection = getSelection();"
+          "    selection.removeAllRanges();"
+          "    selection.addRange(range);"

[yosin_UTC9, 2016/11/17 05:38:06]

We don't need to use |Rang| object. Just write as below:

seleciton.collapse(node, 2);
selection.extend(node, 4);

[yabinh, 2016/11/17 06:58:15]

Done.

+          "});");
+      break;
+    default:
+      NOTREACHED();
+  }
+  document().body()->appendChild(script);
+  document().view()->updateAllLifecyclePhases();
+  editable->focus();
+}
+
 TEST_F(InputMethodControllerTest, BackspaceFromEndOfInput) {
   HTMLInputElement* input =
       toHTMLInputElement(insertHTMLElement("<input id='sample'>", "sample"));
 
   input->setValue("fooX");
   document().updateStyleAndLayout();
   controller().setEditableSelectionOffsets(PlainTextRange(4, 4));
   EXPECT_STREQ("fooX", input->value().utf8().data());
   controller().extendSelectionAndDelete(0, 0);
   EXPECT_STREQ("fooX", input->value().utf8().data());
@@ skipping 32 matching lines @@
   input->setValue("fooX");
   document().updateStyleAndLayout();
   controller().setEditableSelectionOffsets(PlainTextRange(4, 4));
   EXPECT_STREQ("fooX", input->value().utf8().data());
   controller().extendSelectionAndDelete(0, 1);
   EXPECT_STREQ("fooX", input->value().utf8().data());
 }
 
 TEST_F(InputMethodControllerTest, SetCompositionFromExistingText) {
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'>hello world</div>", "sample");
+      "<div id='sample' contenteditable>hello world</div>", "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
   controller().setCompositionFromExistingText(underlines, 0, 5);
 
   Range* range = controller().compositionRange();
   EXPECT_EQ(0, range->startOffset());
   EXPECT_EQ(5, range->endOffset());
 
   PlainTextRange plainTextRange(PlainTextRange::create(*div, *range));
   EXPECT_EQ(0u, plainTextRange.start());
   EXPECT_EQ(5u, plainTextRange.end());
 }
 
 TEST_F(InputMethodControllerTest, SetCompositionKeepingStyle) {
   Element* div = insertHTMLElement(
       "<div id='sample' "
-      "contenteditable='true'>abc1<b>2</b>34567<b>8</b>9</div>",
+      "contenteditable>abc1<b>2</b>34567<b>8</b>9</div>",
       "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(3, 12, Color(255, 0, 0), false, 0));
   controller().setCompositionFromExistingText(underlines, 3, 12);
 
   // Subtract a character.
   controller().setComposition(String("12345789"), underlines, 8, 8);
   EXPECT_STREQ("abc1<b>2</b>3457<b>8</b>9", div->innerHTML().utf8().data());
 
   // Append a character.
   controller().setComposition(String("123456789"), underlines, 9, 9);
   EXPECT_STREQ("abc1<b>2</b>34567<b>8</b>9", div->innerHTML().utf8().data());
 
   // Subtract and append characters.
   controller().setComposition(String("123hello789"), underlines, 11, 11);
   EXPECT_STREQ("abc1<b>2</b>3hello7<b>8</b>9", div->innerHTML().utf8().data());
 }
 
 TEST_F(InputMethodControllerTest, SetCompositionWithEmojiKeepingStyle) {
   // U+1F3E0 = 0xF0 0x9F 0x8F 0xA0 (UTF8). It's an emoji character.
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'><b>&#x1f3e0</b></div>",
-      "sample");
+      "<div id='sample' contenteditable><b>&#x1f3e0</b></div>", "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 2, Color(255, 0, 0), false, 0));
 
   controller().setCompositionFromExistingText(underlines, 0, 2);
 
   // 0xF0 0x9F 0x8F 0xAB is also an emoji character, with the same leading
   // surrogate pair to the previous one.
   controller().setComposition(String::fromUTF8("\xF0\x9F\x8F\xAB"), underlines,
                               2, 2);
   EXPECT_STREQ("<b>\xF0\x9F\x8F\xAB</b>", div->innerHTML().utf8().data());
 
   controller().setComposition(String::fromUTF8("\xF0\x9F\x8F\xA0"), underlines,
                               2, 2);
   EXPECT_STREQ("<b>\xF0\x9F\x8F\xA0</b>", div->innerHTML().utf8().data());
 }
 
 TEST_F(InputMethodControllerTest,
        SetCompositionWithTeluguSignVisargaKeepingStyle) {
   // U+0C03 = 0xE0 0xB0 0x83 (UTF8), a telugu sign visarga with one code point.
   // It's one grapheme cluster if separated. It can also form one grapheme
   // cluster with another code point(e.g, itself).
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'><b>&#xc03</b></div>", "sample");
+      "<div id='sample' contenteditable><b>&#xc03</b></div>", "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 2, Color(255, 0, 0), false, 0));
   controller().setCompositionFromExistingText(underlines, 0, 1);
 
   // 0xE0 0xB0 0x83 0xE0 0xB0 0x83, a telugu character with 2 code points in
   // 1 grapheme cluster.
   controller().setComposition(String::fromUTF8("\xE0\xB0\x83\xE0\xB0\x83"),
                               underlines, 2, 2);
   EXPECT_STREQ("<b>\xE0\xB0\x83\xE0\xB0\x83</b>",
                div->innerHTML().utf8().data());
 
   controller().setComposition(String::fromUTF8("\xE0\xB0\x83"), underlines, 1,
                               1);
   EXPECT_STREQ("<b>\xE0\xB0\x83</b>", div->innerHTML().utf8().data());
 }
 
 TEST_F(InputMethodControllerTest, SelectionOnConfirmExistingText) {
-  insertHTMLElement("<div id='sample' contenteditable='true'>hello world</div>",
+  insertHTMLElement("<div id='sample' contenteditable>hello world</div>",
                     "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
   controller().setCompositionFromExistingText(underlines, 0, 5);
 
   controller().finishComposingText(InputMethodController::KeepSelection);
   EXPECT_EQ(0, frame().selection().start().computeOffsetInContainerNode());
   EXPECT_EQ(0, frame().selection().end().computeOffsetInContainerNode());
 }
@@ skipping 23 matching lines @@
   controller().setComposition(String(""), underlines, 0, 3);
 
   EXPECT_STREQ("", input->value().utf8().data());
 }
 
 TEST_F(InputMethodControllerTest,
        SetCompositionFromExistingTextWithCollapsedWhiteSpace) {
   // Creates a div with one leading new line char. The new line char is hidden
   // from the user and IME, but is visible to InputMethodController.
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'>\nhello world</div>", "sample");
+      "<div id='sample' contenteditable>\nhello world</div>", "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
   controller().setCompositionFromExistingText(underlines, 0, 5);
 
   Range* range = controller().compositionRange();
   EXPECT_EQ(1, range->startOffset());
   EXPECT_EQ(6, range->endOffset());
 
   PlainTextRange plainTextRange(PlainTextRange::create(*div, *range));
   EXPECT_EQ(0u, plainTextRange.start());
   EXPECT_EQ(5u, plainTextRange.end());
 }
 
 TEST_F(InputMethodControllerTest,
        SetCompositionFromExistingTextWithInvalidOffsets) {
-  insertHTMLElement("<div id='sample' contenteditable='true'>test</div>",
-                    "sample");
+  insertHTMLElement("<div id='sample' contenteditable>test</div>", "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(7, 8, Color(255, 0, 0), false, 0));
   controller().setCompositionFromExistingText(underlines, 7, 8);
 
   EXPECT_FALSE(controller().compositionRange());
 }
 
 TEST_F(InputMethodControllerTest, ConfirmPasswordComposition) {
   HTMLInputElement* input = toHTMLInputElement(insertHTMLElement(
@@ skipping 286 matching lines @@
   document().updateStyleAndLayout();
   controller().setEditableSelectionOffsets(PlainTextRange(2, 2));
   EXPECT_STREQ("\xF0\x9F\x8F\x86\xF0\x9F\x8F\x86",
                input->value().utf8().data());
   controller().deleteSurroundingText(1, 1);
   EXPECT_STREQ("", input->value().utf8().data());
 }
 
 TEST_F(InputMethodControllerTest, DeleteSurroundingTextForMultipleNodes) {
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'>aaa"
-      "<div id='sample2' contenteditable='true'>bbb"
-      "<div id='sample3' contenteditable='true'>ccc"
-      "<div id='sample4' contenteditable='true'>ddd"
-      "<div id='sample5' contenteditable='true'>eee"
+      "<div id='sample' contenteditable>aaa"
+      "<div id='sample2' contenteditable>bbb"
+      "<div id='sample3' contenteditable>ccc"
+      "<div id='sample4' contenteditable>ddd"
+      "<div id='sample5' contenteditable>eee"
       "</div></div></div></div></div>",
       "sample");
 
   controller().setEditableSelectionOffsets(PlainTextRange(8, 8));
   EXPECT_STREQ("aaa\nbbb\nccc\nddd\neee", div->innerText().utf8().data());
   EXPECT_EQ(8u, controller().getSelectionOffsets().start());
   EXPECT_EQ(8u, controller().getSelectionOffsets().end());
 
   controller().deleteSurroundingText(1, 0);
   EXPECT_STREQ("aaa\nbbbccc\nddd\neee", div->innerText().utf8().data());
@@ skipping 66 matching lines @@
   EXPECT_STREQ("heABllo", input->value().utf8().data());
   EXPECT_EQ(7u, controller().getSelectionOffsets().start());
   EXPECT_EQ(7u, controller().getSelectionOffsets().end());
 }
 
 TEST_F(InputMethodControllerTest,
        SetCompositionForContentEditableWithNewCaretPositions) {
   // There are 7 nodes and 5+1+5+1+3+4+3 characters: "hello", '\n', "world",
   // "\n", "012", "3456", "789".
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'>"
+      "<div id='sample' contenteditable>"
       "hello"
-      "<div id='sample2' contenteditable='true'>world"
+      "<div id='sample2' contenteditable>world"
       "<p>012<b>3456</b><i>789</i></p>"
       "</div>"
       "</div>",
       "sample");
 
   controller().setEditableSelectionOffsets(PlainTextRange(17, 17));
   EXPECT_STREQ("hello\nworld\n0123456789", div->innerText().utf8().data());
   EXPECT_EQ(17u, controller().getSelectionOffsets().start());
   EXPECT_EQ(17u, controller().getSelectionOffsets().end());
 
@@ skipping 73 matching lines @@
   // The caret exceeds right boundary.
   // "hello\nworld\n01234AB56789*".
   controller().setComposition("AB", underlines, 100, 100);
   EXPECT_STREQ("hello\nworld\n01234AB56789", div->innerText().utf8().data());
   EXPECT_EQ(24u, controller().getSelectionOffsets().start());
   EXPECT_EQ(24u, controller().getSelectionOffsets().end());
 }
 
 TEST_F(InputMethodControllerTest, SetCompositionWithEmptyText) {
   Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'>hello</div>", "sample");
+      "<div id='sample' contenteditable>hello</div>", "sample");
 
   controller().setEditableSelectionOffsets(PlainTextRange(2, 2));
   EXPECT_STREQ("hello", div->innerText().utf8().data());
   EXPECT_EQ(2u, controller().getSelectionOffsets().start());
   EXPECT_EQ(2u, controller().getSelectionOffsets().end());
 
   Vector<CompositionUnderline> underlines0;
   underlines0.append(CompositionUnderline(0, 0, Color(255, 0, 0), false, 0));
   Vector<CompositionUnderline> underlines2;
   underlines2.append(CompositionUnderline(0, 2, Color(255, 0, 0), false, 0));
 
   controller().setComposition("AB", underlines2, 2, 2);
   // With previous composition.
   controller().setComposition("", underlines0, 2, 2);
   EXPECT_STREQ("hello", div->innerText().utf8().data());
   EXPECT_EQ(4u, controller().getSelectionOffsets().start());
   EXPECT_EQ(4u, controller().getSelectionOffsets().end());
 
   // Without previous composition.
   controller().setComposition("", underlines0, -1, -1);
   EXPECT_STREQ("hello", div->innerText().utf8().data());
   EXPECT_EQ(3u, controller().getSelectionOffsets().start());
   EXPECT_EQ(3u, controller().getSelectionOffsets().end());
 }
 
 TEST_F(InputMethodControllerTest, InsertLineBreakWhileComposingText) {
-  Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'></div>", "sample");
+  Element* div =
+      insertHTMLElement("<div id='sample' contenteditable></div>", "sample");
 
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
   controller().setComposition("hello", underlines, 5, 5);
   EXPECT_STREQ("hello", div->innerText().utf8().data());
   EXPECT_EQ(5u, controller().getSelectionOffsets().start());
   EXPECT_EQ(5u, controller().getSelectionOffsets().end());
 
   frame().editor().insertLineBreak();
   EXPECT_STREQ("\n\n", div->innerText().utf8().data());
   EXPECT_EQ(1u, controller().getSelectionOffsets().start());
   EXPECT_EQ(1u, controller().getSelectionOffsets().end());
 }
 
 TEST_F(InputMethodControllerTest, InsertLineBreakAfterConfirmingText) {
-  Element* div = insertHTMLElement(
-      "<div id='sample' contenteditable='true'></div>", "sample");
+  Element* div =
+      insertHTMLElement("<div id='sample' contenteditable></div>", "sample");
 
   controller().commitText("hello", 0);
   EXPECT_STREQ("hello", div->innerText().utf8().data());
 
   controller().setEditableSelectionOffsets(PlainTextRange(2, 2));
   EXPECT_EQ(2u, controller().getSelectionOffsets().start());
   EXPECT_EQ(2u, controller().getSelectionOffsets().end());
 
   frame().editor().insertLineBreak();
   EXPECT_STREQ("he\nllo", div->innerText().utf8().data());
   EXPECT_EQ(3u, controller().getSelectionOffsets().start());
   EXPECT_EQ(3u, controller().getSelectionOffsets().end());
 }
 
 TEST_F(InputMethodControllerTest, CompositionInputEventIsComposing) {
   document().settings()->setScriptEnabled(true);
-  Element* editable = insertHTMLElement(
-      "<div id='sample' contentEditable='true'></div>", "sample");
+  Element* editable =
+      insertHTMLElement("<div id='sample' contenteditable></div>", "sample");
   Element* script = document().createElement("script");
   script->setInnerHTML(
       "document.getElementById('sample').addEventListener('beforeinput', "
-      "function(event) {"
+      "event => {"
       "    document.title = `beforeinput.isComposing:${event.isComposing};`;"
       "});"
       "document.getElementById('sample').addEventListener('input', "
-      "function(event) {"
+      "event => {"
       "    document.title += `input.isComposing:${event.isComposing};`;"
       "});");
-  document().body()->appendChild(script, ASSERT_NO_EXCEPTION);

[yosin_UTC9, 2016/11/17 05:38:06]

http://crrev.com/2506903005 is being committed. Please rebase once it is
committed.

+  document().body()->appendChild(script);
   document().view()->updateAllLifecyclePhases();
 
   // Simulate composition in the |contentEditable|.
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
   editable->focus();
 
   document().setTitle(emptyString());
   controller().setComposition("foo", underlines, 0, 3);
   EXPECT_STREQ("beforeinput.isComposing:true;input.isComposing:true;",
                document().title().utf8().data());
 
   document().setTitle(emptyString());
   controller().finishComposingText(InputMethodController::KeepSelection);
   // Last pair of InputEvent should also be inside composition scope.
   EXPECT_STREQ("beforeinput.isComposing:true;input.isComposing:true;",
                document().title().utf8().data());
 }
 
-TEST_F(InputMethodControllerTest, CompositionInputEventData) {
-  document().settings()->setScriptEnabled(true);
-  Element* editable = insertHTMLElement(
-      "<div id='sample' contentEditable='true'></div>", "sample");
-  Element* script = document().createElement("script");
-  script->setInnerHTML(
-      "document.getElementById('sample').addEventListener('beforeinput', "
-      "function(event) {"
-      "    document.title = `beforeinput.data:${event.data};`;"
-      "});"
-      "document.getElementById('sample').addEventListener('input', "
-      "function(event) {"
-      "    document.title += `input.data:${event.data};`;"
-      "});");
-  document().body()->appendChild(script, ASSERT_NO_EXCEPTION);
-  document().view()->updateAllLifecyclePhases();
+TEST_F(InputMethodControllerTest, CompositionInputEventForReplace) {
+  createHTMLWithCompositionInputEventListeners();
 
   // Simulate composition in the |contentEditable|.
   Vector<CompositionUnderline> underlines;
   underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
-  editable->focus();
 
   document().setTitle(emptyString());
-  controller().setComposition("n", underlines, 0, 1);
+  controller().setComposition("hell", underlines, 4, 4);
+  EXPECT_STREQ("beforeinput.data:hell;input.data:hell;",
+               document().title().utf8().data());
+
+  // Replace the existing composition.
+  // TODO(yabinh): should be "beforeinput.data:hello;input.data:hello;".
+  document().setTitle(emptyString());
+  controller().setComposition("hello", underlines, 0, 0);
+  EXPECT_STREQ("beforeinput.data:o;input.data:o;",
+               document().title().utf8().data());
+}
+
+TEST_F(InputMethodControllerTest, CompositionInputEventForConfirm) {
+  createHTMLWithCompositionInputEventListeners();
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  document().setTitle(emptyString());
+  controller().setComposition("hello", underlines, 5, 5);
+  EXPECT_STREQ("beforeinput.data:hello;input.data:hello;",
+               document().title().utf8().data());
+
+  // Confirm the ongoing composition.
+  document().setTitle(emptyString());
+  controller().finishComposingText(InputMethodController::KeepSelection);
+  EXPECT_STREQ(
+      "beforeinput.data:hello;input.data:hello;compositionend.data:hello;",
+      document().title().utf8().data());
+}
+
+TEST_F(InputMethodControllerTest, CompositionInputEventForDelete) {
+  createHTMLWithCompositionInputEventListeners();
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  document().setTitle(emptyString());
+  controller().setComposition("hello", underlines, 5, 5);
+  EXPECT_STREQ("beforeinput.data:hello;input.data:hello;",
+               document().title().utf8().data());
+
+  // Delete the existing composition.
+  document().setTitle(emptyString());
+  controller().setComposition("", underlines, 0, 0);
+  EXPECT_STREQ("beforeinput.data:;compositionend.data:;",
+               document().title().utf8().data());
+}
+
+TEST_F(InputMethodControllerTest, CompositionInputEventForInsert) {
+  createHTMLWithCompositionInputEventListeners();
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  // Insert new text without previous composition.
+  document().setTitle(emptyString());
+  document().updateStyleAndLayout();
+  controller().commitText("hello", 0);
+  EXPECT_STREQ("beforeinput.data:hello;input.data:hello;",
+               document().title().utf8().data());
+
+  document().setTitle(emptyString());
+  controller().setComposition("n", underlines, 1, 1);
   EXPECT_STREQ("beforeinput.data:n;input.data:n;",
                document().title().utf8().data());
 
+  // Insert new text with previous composition.
   document().setTitle(emptyString());
-  controller().setComposition("ni", underlines, 0, 1);
-  EXPECT_STREQ("beforeinput.data:i;input.data:i;",
-               document().title().utf8().data());
+  document().updateStyleAndLayout();
+  controller().commitText("hello", 1);
+  EXPECT_STREQ(
+      "beforeinput.data:hello;input.data:hello;compositionend.data:hello;",
+      document().title().utf8().data());
+}
 
-  document().setTitle(emptyString());
-  controller().finishComposingText(InputMethodController::KeepSelection);
-  EXPECT_STREQ("beforeinput.data:ni;input.data:ni;",
-               document().title().utf8().data());
+TEST_F(InputMethodControllerTest, CompositionEndEventForConfirm) {
+  createHTMLWithCompositionEndEventListener(CaretSelection);
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  controller().setComposition("hello", underlines, 1, 1);
+  document().updateStyleAndLayout();
+  EXPECT_EQ(1u, controller().getSelectionOffsets().start());
+  EXPECT_EQ(1u, controller().getSelectionOffsets().end());
+
+  // Confirm the ongoing composition. Note that it moves the caret to the end of
+  // text [5,5] before firing 'compositonend' event.
+  controller().finishComposingText(InputMethodController::DoNotKeepSelection);
+  document().updateStyleAndLayout();
+  EXPECT_EQ(3u, controller().getSelectionOffsets().start());
+  EXPECT_EQ(3u, controller().getSelectionOffsets().end());
+}
+
+TEST_F(InputMethodControllerTest, CompositionEndEventForInsert) {
+  createHTMLWithCompositionEndEventListener(CaretSelection);
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  controller().setComposition("n", underlines, 1, 1);
+
+  // Insert new text with previous composition. Note that it moves the caret to
+  // [4,4] before firing 'compositonend' event.
+  document().updateStyleAndLayout();
+  controller().commitText("hello", -1);
+  document().updateStyleAndLayout();
+  EXPECT_EQ(3u, controller().getSelectionOffsets().start());
+  EXPECT_EQ(3u, controller().getSelectionOffsets().end());
+}
+
+TEST_F(InputMethodControllerTest, CompositionEndEventWithRangeSelection) {
+  createHTMLWithCompositionEndEventListener(RangeSelection);
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  controller().setComposition("hello", underlines, 1, 1);
+  document().updateStyleAndLayout();
+  EXPECT_EQ(1u, controller().getSelectionOffsets().start());
+  EXPECT_EQ(1u, controller().getSelectionOffsets().end());
+
+  // Confirm the ongoing composition. Note that it moves the caret to the end of
+  // text [5,5] before firing 'compositonend' event.
+  controller().finishComposingText(InputMethodController::DoNotKeepSelection);
+  document().updateStyleAndLayout();
+  EXPECT_EQ(2u, controller().getSelectionOffsets().start());
+  EXPECT_EQ(4u, controller().getSelectionOffsets().end());
+}
+
+TEST_F(InputMethodControllerTest, CompositionEndEventWithNoSelection) {
+  createHTMLWithCompositionEndEventListener(NoSelection);
+
+  // Simulate composition in the |contentEditable|.
+  Vector<CompositionUnderline> underlines;
+  underlines.append(CompositionUnderline(0, 5, Color(255, 0, 0), false, 0));
+
+  controller().setComposition("hello", underlines, 1, 1);
+  document().updateStyleAndLayout();
+  EXPECT_EQ(1u, controller().getSelectionOffsets().start());
+  EXPECT_EQ(1u, controller().getSelectionOffsets().end());
+
+  // Confirm the ongoing composition. Note that it moves the caret to the end of
+  // text [5,5] before firing 'compositonend' event.
+  controller().finishComposingText(InputMethodController::DoNotKeepSelection);
+  document().updateStyleAndLayout();
+  EXPECT_TRUE(controller().getSelectionOffsets().isNull());
 }
 
 }  // namespace blink