Title: [245953] trunk
Revision
245953
Author
rn...@webkit.org
Date
2019-05-31 00:25:43 -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 (245952 => 245953)


--- trunk/LayoutTests/ChangeLog	2019-05-31 06:45:57 UTC (rev 245952)
+++ trunk/LayoutTests/ChangeLog	2019-05-31 07:25:43 UTC (rev 245953)
@@ -1,3 +1,19 @@
+2019-05-30  Ryosuke Niwa  <rn...@webkit.org>
+
+        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-30  Jer Noble  <jer.no...@apple.com>
 
         Video playback in Safari should continue when CarPlay is plugged in

Added: trunk/LayoutTests/fast/scrolling/ios/body-overflow-hidden-height-100-percent-keyboard-expected.txt (0 => 245953)


--- 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 07:25:43 UTC (rev 245953)
@@ -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 => 245953)


--- 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 07:25:43 UTC (rev 245953)
@@ -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 => 245953)


--- 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 07:25:43 UTC (rev 245953)
@@ -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 => 245953)


--- 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 07:25:43 UTC (rev 245953)
@@ -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 => 245953)


--- 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 07:25:43 UTC (rev 245953)
@@ -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 => 245953)


--- 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 07:25:43 UTC (rev 245953)
@@ -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 (245952 => 245953)


--- trunk/Source/WebKit/ChangeLog	2019-05-31 06:45:57 UTC (rev 245952)
+++ trunk/Source/WebKit/ChangeLog	2019-05-31 07:25:43 UTC (rev 245953)
@@ -1,3 +1,19 @@
+2019-05-30  Ryosuke Niwa  <rn...@webkit.org>
+
+        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-30  Youenn Fablet  <you...@apple.com>
 
         Add an option to mute audio capture automatically when page is not visible

Modified: trunk/Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm (245952 => 245953)


--- trunk/Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm	2019-05-31 06:45:57 UTC (rev 245952)
+++ trunk/Source/WebKit/UIProcess/API/Cocoa/WKWebView.mm	2019-05-31 07:25:43 UTC (rev 245953)
@@ -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());
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to