| <!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: fixed; |
| left: 0; |
| top: 0; |
| z-index: 1; |
| } |
| |
| #content { |
| background-image: linear-gradient(blue, red); |
| width: 100vw; |
| height: 4000px; |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| |
| #bottom { |
| width: 100%; |
| height: 50px; |
| position: fixed; |
| left: 0; |
| bottom: 0; |
| z-index: 1; |
| background-color: blue; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| function tapInInputScript(tapX, tapY) |
| { |
| return `(function() { |
| uiController.didShowKeyboardCallback = function() { |
| uiController.doAfterNextStablePresentationUpdate(function() { |
| uiController.uiScriptComplete(JSON.stringify(uiController.inputViewBounds)); |
| }); |
| }; |
| uiController.singleTapAtPoint(${tapX}, ${tapY}, function() { }); |
| })()`; |
| } |
| |
| function simulateScrollingScript(offsetTop) |
| { |
| return `(function() { |
| uiController.stableStateOverride = false; |
| uiController.immediateScrollToOffset(0, ${offsetTop}); |
| uiController.stableStateOverride = true; |
| uiController.doAfterNextStablePresentationUpdate(function() { |
| uiController.uiScriptComplete(); |
| }); |
| })()`; |
| } |
| |
| function getInputViewBoundScript() |
| { |
| return `(function() { |
| uiController.uiScriptComplete(JSON.stringify(uiController.inputViewBounds)); |
| })();`; |
| } |
| |
| function toString(rect) |
| { |
| return `[${rect.left} ${rect.top} ; ${rect.width} ${rect.height}]`; |
| } |
| |
| function run() |
| { |
| if (!window.testRunner || !testRunner.runUIScript) { |
| description("To manually test, tap this input field and scroll up. The text caret should not end up outside of the input."); |
| return; |
| } |
| |
| window.initialLayoutViewport = internals.layoutViewportRect(); |
| testRunner.runUIScript(tapInInputScript(window.innerWidth / 2, 30), inputViewBounds => { |
| inputViewBounds = JSON.parse(inputViewBounds); |
| const maxScrollTopWithKeyboard = document.scrollingElement.scrollHeight - window.innerHeight + inputViewBounds.height; |
| window.layoutViewportAfterShowingKeyboard = internals.layoutViewportRect(); |
| testRunner.runUIScript(simulateScrollingScript(maxScrollTopWithKeyboard), () => { |
| window.layoutViewportAfterScrollingPastEnd = internals.layoutViewportRect(); |
| testRunner.runUIScript(simulateScrollingScript(maxScrollTopWithKeyboard + 25), () => { |
| window.layoutViewportAfterScrollingToEnd = internals.layoutViewportRect(); |
| debug(`The initial layout viewport is: ${toString(initialLayoutViewport)}`); |
| debug(`The layout viewport after showing the keyboard is: ${toString(layoutViewportAfterShowingKeyboard)}`); |
| debug(`The layout viewport after scrolling to the end is: ${toString(layoutViewportAfterScrollingPastEnd)}`); |
| debug(`The layout viewport after scrolling past the end is: ${toString(layoutViewportAfterScrollingToEnd)}`); |
| shouldBe("initialLayoutViewport.height", "layoutViewportAfterShowingKeyboard.height"); |
| shouldBe("layoutViewportAfterScrollingPastEnd.top", "layoutViewportAfterScrollingToEnd.top"); |
| testRunner.notifyDone(); |
| }); |
| }); |
| }); |
| } |
| </script> |
| </head> |
| <body onload=run()> |
| <input></input> |
| <div id="content"></div> |
| <div id="bottom"></div> |
| <script src="../../../resources/js-test-post.js"></script> |
| </body> |
| |
| </html> |
