| <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] --> |
| <html> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <head> |
| <script src="../../../resources/js-test-pre.js"></script> |
| <style> |
| body { |
| margin: 0; |
| } |
| |
| input { |
| width: 100%; |
| height: 50px; |
| position: absolute; |
| left: 0; |
| top: 0; |
| } |
| |
| div { |
| background-image: linear-gradient(0deg, blue, red); |
| height: 4000px; |
| } |
| </style> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| function tapInInputScript(tapX, tapY) |
| { |
| return ` |
| var caretPositions = []; |
| |
| function pressArrow() { |
| uiController.typeCharacterUsingHardwareKeyboard("leftArrow", function() { |
| uiController.doAfterNextStablePresentationUpdate(function() { |
| var selectionRectLeft = uiController.textSelectionCaretRect.left; |
| var caretPositionsLength = caretPositions.length; |
| if (caretPositionsLength == 0 || caretPositions[caretPositionsLength - 1] != selectionRectLeft) { |
| caretPositions.push(selectionRectLeft); |
| pressArrow(); |
| } else |
| uiController.uiScriptComplete(JSON.stringify(caretPositions)); |
| }); |
| }); |
| }; |
| |
| (function() { |
| uiController.didShowKeyboardCallback = function() { |
| uiController.doAfterNextStablePresentationUpdate(function() { |
| pressArrow(); |
| }); |
| }; |
| uiController.singleTapAtPoint(${tapX}, ${tapY}, function() { }); |
| })()`; |
| } |
| |
| var pixelWidth; |
| var currentWidth; |
| function run() |
| { |
| if (!window.testRunner || !testRunner.runUIScript) { |
| description("To manually test, place the caret in the field above and use the arrow keys to make sure the carets don't appear in the middle of characters."); |
| return; |
| } |
| |
| testRunner.runUIScript(tapInInputScript(window.innerWidth * 2 / 3, 30), caretPositions => { |
| caretPositions = JSON.parse(caretPositions); |
| pixelWidth = -1; |
| for (var i = 0; i < caretPositions.length - 1; ++i) { |
| currentWidth = caretPositions[i] - caretPositions[i + 1]; |
| if (pixelWidth == -1) |
| pixelWidth = currentWidth; |
| else |
| shouldBeCloseTo("currentWidth", pixelWidth, 1); |
| } |
| finishJSTest(); |
| }); |
| } |
| </script> |
| </head> |
| <body onload=run()> |
| <input value="👫👫🏻👫🏿👬👬🏻👬🏿👭👭🏻👭🏿👪👪🏻👪🏿"></input> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| |
| </html> |
