| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../../../resources/js-test.js"></script> |
| <script src="../../../../resources/ui-helper.js"></script> |
| </head> |
| <body> |
| <div id="test-container"></div> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| let textAreaCaretRect; |
| let textFieldCaretRect; |
| |
| function createTextControlWithPlaceholder(tagName) |
| { |
| let element = document.createElement(tagName); |
| element.placeholder = "placeholder"; |
| return element; |
| } |
| |
| function computeCaretRectForElement(element) |
| { |
| return new Promise((resolved) => { |
| async function handleFocus() { |
| let caretRect = await UIHelper.getUICaretRect(); |
| await UIHelper.deactivateFormControl(element); |
| resolved(caretRect); |
| } |
| element.addEventListener("focus", handleFocus, { once: true }); |
| UIHelper.activateFormControl(element); |
| }); |
| } |
| |
| async function runTest() |
| { |
| if (!window.testRunner) { |
| testFailed("Must be run in WebKitTestRunner."); |
| finishJSTest(); |
| return; |
| } |
| |
| let testContainer = document.getElementById("test-container"); |
| |
| // 1. Compute caret rect in empty textarea. |
| let textArea = createTextControlWithPlaceholder("textarea"); |
| testContainer.appendChild(textArea); |
| textAreaCaretRect = await computeCaretRectForElement(textArea); |
| testContainer.removeChild(textArea); |
| |
| // 2. Compute caret rect in empty text field. |
| let textField = createTextControlWithPlaceholder("input"); |
| testContainer.appendChild(textField); |
| textFieldCaretRect = await computeCaretRectForElement(textField); |
| testContainer.removeChild(textField); |
| |
| // 3. Compare |
| shouldBe("textAreaCaretRect.left", "textFieldCaretRect.left"); |
| |
| // 4. Clean up and finish test. |
| document.body.removeChild(testContainer); |
| finishJSTest(); |
| } |
| |
| description("Tests that the x-coordinate of the caret in an empty textarea is identical to the x-coordinate of the caret in an empty text field."); |
| runTest(); |
| </script> |
| </body> |
| </html> |
