| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/ui-helper.js"></script> |
| </head> |
| |
| <div>To manually test, press and hold down 'a' and select one of the accented characters."</div> |
| <div>You should observe a pair of beforeinput/input events for both 'a' and the replacement accented character."</div> |
| <div>Importantly, the inputType of these four events should be 'insertReplacementText'."</div> |
| <div>Then insert a single emoji character. You should observe beforeinput/input events for the inserted emoji."</div> |
| <div>Importantly, the inputType of these two events should be 'insertText'."</div> |
| |
| <input id="editable" onbeforeinput=logInputEvent(event) oninput=logInputEvent(event)></input> |
| <div id="output"></div> |
| <script type="text/javascript"> |
| let write = s => output.innerHTML += s + "<br>"; |
| editable.focus(); |
| if (window.testRunner && window.eventSender && testRunner.runUIScript) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| runTest(); |
| } |
| |
| function logInputEvent(event) |
| { |
| write(`(${event.target.id}): type=${event.type}, inputType=${event.inputType}, data=${event.data}, dataTransfer=${event.dataTransfer}`); |
| } |
| |
| async function runTest() { |
| write("(1) Typing 'a'..."); |
| eventSender.keyDown("a"); |
| write(`The value of the input is now: ${editable.value}`); |
| write("(2) Replacing 'a' with 'b'..."); |
| await UIHelper.replaceTextAtRange("b", 0, 1); |
| write(`The value of the input is now: ${editable.value}`); |
| write("(3) Inserting 'c' after 'b'..."); |
| await UIHelper.replaceTextAtRange("c", 1, 0); |
| write(`The value of the input is now: ${editable.value}`); |
| write("(4) Selecting all and replacing with 'd'..."); |
| document.execCommand("SelectAll") |
| await UIHelper.replaceTextAtRange("d", 0, 2); |
| write(`The value of the input is now: ${editable.value}`); |
| |
| testRunner.notifyDone(); |
| } |
| </script> |
| </html> |
