| <!DOCTYPE html> |
| <html> |
| <body> |
| <p>To manually test, start editing a composition in the input field and focus the contenteditable without committing |
| the composition. A compositionend event should be logged, with the event target being the input field. Next, insert |
| a pending composition in the contenteditable and focus the input. A compositionend should be logged, with the event |
| target being the contenteditable. Then insert a pending composition in the input field and focus the document. A |
| compositionend event should be logged with the target being the input field. Lastly, insert a pending composition in |
| the rich contenteditable and click and drag to select all the text in the contenteditable. A compositionend event |
| should be fired on the contenteditable.</p> |
| <input id="plain"></input> |
| <div id="rich" contenteditable style="border: 1px dashed"></div> |
| <div id="output"></div> |
| <script type="text/javascript"> |
| let write = s => output.innerHTML += `${s}<br>`; |
| plain.addEventListener("compositionend", logCompositionEnd); |
| rich.addEventListener("compositionend", logCompositionEnd); |
| plain.focus(); |
| |
| if (window.testRunner && window.textInputController) { |
| testRunner.dumpAsText(); |
| |
| write(""); |
| write("1. Editing the plain input field"); |
| textInputController.setMarkedText("a", 1, 0); |
| write(" Focusing the rich contenteditable"); |
| rich.focus(); |
| |
| write(""); |
| write("2. Editing the rich contenteditable"); |
| textInputController.setMarkedText("b", 1, 0); |
| write(" Focusing the plain input field"); |
| plain.focus(); |
| |
| write(""); |
| write("3. Editing the plain input field again"); |
| textInputController.setMarkedText("c", 1, 0); |
| write(" Blurring the plain input field"); |
| plain.blur(); |
| |
| write(""); |
| write("4. Editing the rich contenteditable again"); |
| rich.focus(); |
| textInputController.setMarkedText("d", 1, 0); |
| textInputController.setMarkedText("de", 2, 0); |
| textInputController.setMarkedText("def", 3, 0); |
| write(" Changing selection within the rich contenteditable"); |
| document.execCommand("SelectAll"); |
| } |
| |
| function logCompositionEnd(event) |
| { |
| write(`PASS: Dispatched compositionend on <${event.target.tagName} id="${event.target.id}">`); |
| } |
| </script> |
| </body> |
| </html> |
