<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1553852
-->
<head>
  <title>Test for Bug 1429982</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank"
  href="https://bugzilla.mozilla.org/show_bug.cgi?id=1553852">Mozilla Bug 1553852</a>
<p id="display"></p>
<div id="content">
  <div id="host"></div>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">

/** Test for Bug 1553852 **/
SimpleTest.waitForExplicitFinish()
SimpleTest.waitForFocus(function() {
  let div = document.createElement('div');
  div.setAttribute('contenteditable', 'true');

  let shadow = document.getElementById('host').attachShadow({mode: 'open'});
  shadow.appendChild(div);
  div.focus();

  let testString = '\uD842\uDFB7\u91CE\u5BB6';
  synthesizeCompositionChange(
    { "composition":
      { "string": testString,
        "clauses":
        [
          { "length": testString.length, "attr": COMPOSITION_ATTR_RAW_CLAUSE },
        ],
      },
      "caret": { "start": testString.length, "length": 0 },
    });
  is(div.innerText, testString,
     "The value of contenteditable div should be " + testString +
     " during composition");

  synthesizeComposition({ type: "compositioncommitasis" });
    is(div.innerText, testString,
       "The value of contenteditable div should be " + testString +
       " after compositionend");

  SimpleTest.finish();
});

</script>
</pre>
</body>
</html>

