- Revision
- 245989
- Author
- [email protected]
- Date
- 2019-05-31 15:12:19 -0700 (Fri, 31 May 2019)
Log Message
iOS: Main frame should be scrollable when pinch zoomed or software keyboard is up
https://bugs.webkit.org/show_bug.cgi?id=198244
Reviewed by Simon Fraser.
Source/WebKit:
This is a follow up to r245006. Even when overflow: hidden is specified on the document body,
we still need to make it scrollable when the page is pinch zoomed or there is a content inset
e.g. for software keyboard. Otherwise, the user won't be able to get to the content that is
outside the visual viewport when pinch zoomed or the parts of the page that is not outside
the visual viewport due to the scrolling caused by the software keyboard being brought up.
* UIProcess/API/Cocoa/WKWebView.mm:
(-[WKWebView _didCommitLayerTree:]):
LayoutTests:
Added regression tests.
* fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard-expected.txt: Added.
* fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard.html: Added.
* fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1-expected.txt: Added.
* fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1.html: Added.
* fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2-expected.txt: Added.
* fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (245988 => 245989)
--- trunk/LayoutTests/ChangeLog 2019-05-31 22:02:14 UTC (rev 245988)
+++ trunk/LayoutTests/ChangeLog 2019-05-31 22:12:19 UTC (rev 245989)
@@ -1,3 +1,19 @@
+2019-05-31 Ryosuke Niwa <[email protected]>
+
+ iOS: Main frame should be scrollable when pinch zoomed or software keyboard is up
+ https://bugs.webkit.org/show_bug.cgi?id=198244
+
+ Reviewed by Simon Fraser.
+
+ Added regression tests.
+
+ * fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard-expected.txt: Added.
+ * fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard.html: Added.
+ * fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1-expected.txt: Added.
+ * fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1.html: Added.
+ * fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2-expected.txt: Added.
+ * fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2.html: Added.
+
2019-05-31 Commit Queue <[email protected]>
Unreviewed, rolling out r245953.
Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard-expected.txt (0 => 245989)
--- trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard-expected.txt 2019-05-31 22:12:19 UTC (rev 245989)
@@ -0,0 +1,4 @@
+This document shouldn't be scrollable normally but should be scrollable when the software keyboard is shown.
+To manually test, tap on the text field below to bring up the docked software keyboard.
+The document should become scrollable.
+PASS - the document did scroll
Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard.html (0 => 245989)
--- trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard.html (rev 0)
+++ trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard.html 2019-05-31 22:12:19 UTC (rev 245989)
@@ -0,0 +1,50 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true internal:AsyncOverflowScrollingEnabled=true internal:AsyncFrameScrollingEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+<script src=""
+<script src=""
+<style>
+html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
+body { overflow: hidden; }
+#content { width: 100%; height: 100%; box-sizing: border-box; padding: 20px; background: #ccc; }
+</style>
+<script>
+if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.dumpAsText();
+}
+
+async function runTest() {
+ if (!window.testRunner)
+ return;
+
+ await UIHelper.setHardwareKeyboardAttached(false);
+
+ // FIXME: <rdar://problem/51289800> Scrolling down by touch gestures does not work immediately after software keyboard is brought up for the first time
+ await UIHelper.activateElementAndWaitForInputSession(document.querySelector('input'));
+ document.activeElement.blur();
+ await UIHelper.waitForKeyboardToHide();
+
+ await UIHelper.activateElementAndWaitForInputSession(document.querySelector('input'));
+
+ const result = document.getElementById('result');
+ const y = result.getBoundingClientRect().top + 10;
+
+ await touchAndDragFromPointToPoint(200, y + 100, 200, y + 10);
+ await liftUpAtPoint(200, y + 10);
+ await UIHelper.delayFor(100);
+
+ result.textContent = document.documentElement.scrollTop >= 50 ? 'PASS - the document did scroll' : 'FAIL - the document did not scroll';
+
+ testRunner.notifyDone();
+}
+
+</script>
+<body _onload_="runTest()"><div id="content">
+This document shouldn't be scrollable normally but should be scrollable when the software keyboard is shown.<br>
+To manually test, tap on the text field below to bring up the docked software keyboard.<br>
+The document should become scrollable.<br>
+<div id="result"><input placeholder="Click here"></div>
+</div></body>
+</html>
Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1-expected.txt (0 => 245989)
--- trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1-expected.txt 2019-05-31 22:12:19 UTC (rev 245989)
@@ -0,0 +1,5 @@
+This document shouldn't be scrollable normally but should be scrollable when pinch zoomed.
+To manually test, pinch zoom on the page. The document should become scrollable.
+PASS - the document did scroll with zooming
+PASS - the document scrolled back to the top
+
Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1.html (0 => 245989)
--- trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1.html (rev 0)
+++ trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-1.html 2019-05-31 22:12:19 UTC (rev 245989)
@@ -0,0 +1,48 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true internal:AsyncOverflowScrollingEnabled=true internal:AsyncFrameScrollingEnabled=true ] -->
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src=""
+<script src=""
+<style>
+html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
+body { overflow: hidden; }
+#content { width: 100%; height: 100%; box-sizing: border-box; padding: 20px; background: #ccc; }
+</style>
+<script>
+if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.dumpAsText();
+}
+
+async function runTest() {
+ if (!window.testRunner)
+ return;
+
+ let result = '';
+ const log = (text) => result += text + '\n';
+
+ await UIHelper.zoomToScale(1.5);
+
+ log(visualViewport.pageTop > 50 ? 'PASS - the document did scroll with zooming' : `FAIL - the document did not scroll with zooming: ${visualViewport.pageTop}`);
+
+ await touchAndDragFromPointToPoint(200, 100, 200, 200);
+ await liftUpAtPoint(200, 200);
+ await UIHelper.delayFor(200);
+
+ log(visualViewport.pageTop <= 0 ? 'PASS - the document scrolled back to the top' : `FAIL - the document did not scroll back to the top: ${visualViewport.pageTop}`);
+
+ document.getElementById('log').textContent = result;
+
+ testRunner.notifyDone();
+}
+
+</script>
+<body _onload_="runTest()">
+<div id="content">
+This document shouldn't be scrollable normally but should be scrollable when pinch zoomed.<br>
+To manually test, pinch zoom on the page. The document should become scrollable.
+</div>
+<pre id="log"></pre>
+</body>
+</html>
Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2-expected.txt (0 => 245989)
--- trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2-expected.txt 2019-05-31 22:12:19 UTC (rev 245989)
@@ -0,0 +1,5 @@
+This document shouldn't be scrollable normally but should be scrollable when pinch zoomed.
+To manually test, pinch zoom on the page. The document should become scrollable.
+PASS - the document did scroll with zooming
+PASS - the document scrolled back to the top
+
Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2.html (0 => 245989)
--- trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2.html (rev 0)
+++ trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-zoomed-2.html 2019-05-31 22:12:19 UTC (rev 245989)
@@ -0,0 +1,53 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true internal:AsyncOverflowScrollingEnabled=true internal:AsyncFrameScrollingEnabled=true ] -->
+<html>
+<head>
+<script src=""
+<script src=""
+<style>
+html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
+body { overflow: hidden; }
+#content { width: 100%; height: 100%; box-sizing: border-box; padding: 20px; background: #ccc; }
+</style>
+<script>
+if (window.testRunner) {
+ testRunner.waitUntilDone();
+ testRunner.dumpAsText();
+}
+
+async function runTest() {
+ if (!window.testRunner)
+ return;
+
+ let result = '';
+ const log = (text) => result += text + '\n';
+
+ const initialScale = await UIHelper.zoomScale();
+ await UIHelper.zoomToScale(initialScale * 1.5);
+ const finalScale = await UIHelper.zoomScale();
+
+ log(visualViewport.pageTop > 100 ? 'PASS - the document did scroll with zooming' : `FAIL - the document did not scroll with zooming: ${visualViewport.pageTop}`);
+
+ const x = visualViewport.pageLeft;
+ const y = visualViewport.pageTop;
+
+ await touchAndDragFromPointToPoint(x + 100, y + 100, x + 100, y + 200);
+ await liftUpAtPoint(x + 100, y + 200);
+ await UIHelper.delayFor(200);
+
+ const expectedY = y - 80 * finalScale;
+ log(visualViewport.pageTop < expectedY ? 'PASS - the document scrolled back to the top' : `FAIL - the document did not scroll back to the top: expected ${visualViewport.pageTop} < ${expectedY}`);
+
+ document.getElementById('log').textContent = result;
+
+ testRunner.notifyDone();
+}
+
+</script>
+<body _onload_="runTest()">
+<div id="content">
+This document shouldn't be scrollable normally but should be scrollable when pinch zoomed.<br>
+To manually test, pinch zoom on the page. The document should become scrollable.
+</div>
+<pre id="log"></pre>
+</body>
+</html>
Modified: trunk/Source/WebKit/ChangeLog (245988 => 245989)
--- trunk/Source/WebKit/ChangeLog 2019-05-31 22:02:14 UTC (rev 245988)
+++ trunk/Source/WebKit/ChangeLog 2019-05-31 22:12:19 UTC (rev 245989)
@@ -1,3 +1,19 @@
+2019-05-31 Ryosuke Niwa <[email protected]>
+
+ iOS: Main frame should be scrollable when pinch zoomed or software keyboard is up
+ https://bugs.webkit.org/show_bug.cgi?id=198244
+
+ Reviewed by Simon Fraser.
+
+ This is a follow up to r245006. Even when overflow: hidden is specified on the document body,
+ we still need to make it scrollable when the page is pinch zoomed or there is a content inset
+ e.g. for software keyboard. Otherwise, the user won't be able to get to the content that is
+ outside the visual viewport when pinch zoomed or the parts of the page that is not outside
+ the visual viewport due to the scrolling caused by the software keyboard being brought up.
+
+ * UIProcess/API/Cocoa/WKWebView.mm:
+ (-[WKWebView _didCommitLayerTree:]):
+
2019-05-31 Geoffrey Garen <[email protected]>
Some WeakPtr typedef cleanup
Modified: trunk/Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm (245988 => 245989)
--- trunk/Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm 2019-05-31 22:02:14 UTC (rev 245988)
+++ trunk/Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm 2019-05-31 22:12:19 UTC (rev 245989)
@@ -1988,7 +1988,9 @@
[_scrollView setMaximumZoomScale:layerTreeTransaction.maximumScaleFactor()];
[_scrollView setZoomEnabled:layerTreeTransaction.allowsUserScaling()];
#if ENABLE(ASYNC_SCROLLING)
- [_scrollView setScrollEnabled:_page->scrollingCoordinatorProxy()->hasScrollableMainFrame()];
+ bool hasDockedInputView = !CGRectIsEmpty(_inputViewBounds);
+ bool isZoomed = layerTreeTransaction.pageScaleFactor() > layerTreeTransaction.initialScaleFactor();
+ [_scrollView setScrollEnabled:_page->scrollingCoordinatorProxy()->hasScrollableMainFrame() || hasDockedInputView || isZoomed];
#endif
if (!layerTreeTransaction.scaleWasSetByUIProcess() && ![_scrollView isZooming] && ![_scrollView isZoomBouncing] && ![_scrollView _isAnimatingZoom] && [_scrollView zoomScale] != layerTreeTransaction.pageScaleFactor()) {
LOG_WITH_STREAM(VisibleRects, stream << " updating scroll view with pageScaleFactor " << layerTreeTransaction.pageScaleFactor());
