- Revision
- 245561
- Author
- [email protected]
- Date
- 2019-05-20 22:01:54 -0700 (Mon, 20 May 2019)
Log Message
[iOS] Layout viewport size on google.com increases after rotating to landscape and back
https://bugs.webkit.org/show_bug.cgi?id=198062
<rdar://problem/50547895>
Reviewed by Maciej Stachowiak.
Source/WebKit:
During an animated resize (e.g. when rotating the device on iOS), we currently immediately trigger the new
shrink-to-fit content size heuristic in the middle of dynamicViewportSizeUpdate, after the new view layout size
has been applied to the viewport configuration but before we've issued a resize event to the page.
Thus, on pages that use listen to the resize event and adjust their content accordingly to fit within the new
layout width, we prematurely declare that the page has horizontally overflowed, and try to lay out at a larger
width and scale down. This causes the page to unnecessarily shrink after rotating to landscale orientation and
back.
To fix this, we simply move the call to shrink-to-fit-content to the end of the dynamic viewport size update,
such that the page has had a chance to adjust to the new layout size.
Test: fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html
* WebProcess/WebPage/ios/WebPageIOS.mm:
(WebKit::WebPage::dynamicViewportSizeUpdate):
LayoutTests:
Add a UIHelper method to simulate device rotation to a given orientation, and use it in a new layout test that
simulates rotation to and from landscape orientation, and verifies that the initial scale did not change from
its expected value of 1.
* fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt: Added.
* fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html: Added.
* resources/ui-helper.js:
(window.UIHelper.rotateDevice.return.new.Promise.):
(window.UIHelper.rotateDevice):
(window.UIHelper):
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (245560 => 245561)
--- trunk/LayoutTests/ChangeLog 2019-05-21 03:40:12 UTC (rev 245560)
+++ trunk/LayoutTests/ChangeLog 2019-05-21 05:01:54 UTC (rev 245561)
@@ -1,3 +1,22 @@
+2019-05-20 Wenson Hsieh <[email protected]>
+
+ [iOS] Layout viewport size on google.com increases after rotating to landscape and back
+ https://bugs.webkit.org/show_bug.cgi?id=198062
+ <rdar://problem/50547895>
+
+ Reviewed by Maciej Stachowiak.
+
+ Add a UIHelper method to simulate device rotation to a given orientation, and use it in a new layout test that
+ simulates rotation to and from landscape orientation, and verifies that the initial scale did not change from
+ its expected value of 1.
+
+ * fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt: Added.
+ * fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html: Added.
+ * resources/ui-helper.js:
+ (window.UIHelper.rotateDevice.return.new.Promise.):
+ (window.UIHelper.rotateDevice):
+ (window.UIHelper):
+
2019-05-20 Chris Dumez <[email protected]>
Fix security check in ScriptController::canAccessFromCurrentOrigin()
Added: trunk/LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt (0 => 245561)
--- trunk/LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt 2019-05-21 05:01:54 UTC (rev 245561)
@@ -0,0 +1,18 @@
+This test verifies that rotating to landscape and back with shouldIgnoreMetaViewport enabled does not cause the initial scale to deviate from its original value. To test manually, load the test page on an appropriately configured device and rotate to landscape and back. The initial scale after rotation should be the same as it was prior to rotation.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+
+Before rotation
+PASS visualViewport.scale is 1
+
+After the first rotation
+PASS visualViewport.scale is 1
+
+After the second rotation
+PASS visualViewport.scale is 1
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html (0 => 245561)
--- trunk/LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html (rev 0)
+++ trunk/LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html 2019-05-21 05:01:54 UTC (rev 245561)
@@ -0,0 +1,52 @@
+<!DOCTYPE html> <!-- webkit-test-runner [ shouldIgnoreMetaViewport=true useFlexibleViewport=true ] -->
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <script src=""
+ <script src=""
+ <style>
+ body, html {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ }
+
+ .bar {
+ width: 0;
+ height: 100px;
+ background: linear-gradient(to right, red 0%, green 50%, blue 100%);
+ }
+ </style>
+</head>
+<body>
+ <div class="bar"></div>
+ <p id="description"></p>
+ <p id="console"></p>
+ <script>
+ jsTestIsAsync = true;
+ bar = document.querySelector(".bar");
+ bar.style.width = `${innerWidth}px`;
+
+ addEventListener("resize", () => bar.style.width = `${innerWidth}px`);
+ addEventListener("load", async () => {
+ description("This test verifies that rotating to landscape and back with shouldIgnoreMetaViewport enabled does not cause the initial scale to deviate from its original value. To test manually, load the test page on an appropriately configured device and rotate to landscape and back. The initial scale after rotation should be the same as it was prior to rotation.");
+
+ debug("\nBefore rotation");
+ shouldBe("visualViewport.scale", "1");
+
+ await UIHelper.rotateDevice("landscape-right", true);
+ await UIHelper.ensurePresentationUpdate();
+ debug("\nAfter the first rotation");
+ shouldBe("visualViewport.scale", "1");
+
+ await UIHelper.rotateDevice("portrait", true);
+ await UIHelper.ensurePresentationUpdate();
+ debug("\nAfter the second rotation");
+ shouldBe("visualViewport.scale", "1");
+
+ finishJSTest();
+ });
+ </script>
+</body>
+</html>
Modified: trunk/LayoutTests/resources/ui-helper.js (245560 => 245561)
--- trunk/LayoutTests/resources/ui-helper.js 2019-05-21 03:40:12 UTC (rev 245560)
+++ trunk/LayoutTests/resources/ui-helper.js 2019-05-21 05:01:54 UTC (rev 245561)
@@ -906,4 +906,18 @@
functionToCall.apply(this, theArguments);
});
}
+
+ static rotateDevice(orientationName, animatedResize = false)
+ {
+ if (!this.isWebKit2() || !this.isIOS())
+ return Promise.resolve();
+
+ return new Promise(resolve => {
+ testRunner.runUIScript(`(() => {
+ uiController.${animatedResize ? "simulateRotationLikeSafari" : "simulateRotation"}("${orientationName}", function() {
+ uiController.doAfterVisibleContentRectUpdate(() => uiController.uiScriptComplete());
+ });
+ })()`, resolve);
+ });
+ }
}
Modified: trunk/Source/WebKit/ChangeLog (245560 => 245561)
--- trunk/Source/WebKit/ChangeLog 2019-05-21 03:40:12 UTC (rev 245560)
+++ trunk/Source/WebKit/ChangeLog 2019-05-21 05:01:54 UTC (rev 245561)
@@ -1,3 +1,28 @@
+2019-05-20 Wenson Hsieh <[email protected]>
+
+ [iOS] Layout viewport size on google.com increases after rotating to landscape and back
+ https://bugs.webkit.org/show_bug.cgi?id=198062
+ <rdar://problem/50547895>
+
+ Reviewed by Maciej Stachowiak.
+
+ During an animated resize (e.g. when rotating the device on iOS), we currently immediately trigger the new
+ shrink-to-fit content size heuristic in the middle of dynamicViewportSizeUpdate, after the new view layout size
+ has been applied to the viewport configuration but before we've issued a resize event to the page.
+
+ Thus, on pages that use listen to the resize event and adjust their content accordingly to fit within the new
+ layout width, we prematurely declare that the page has horizontally overflowed, and try to lay out at a larger
+ width and scale down. This causes the page to unnecessarily shrink after rotating to landscale orientation and
+ back.
+
+ To fix this, we simply move the call to shrink-to-fit-content to the end of the dynamic viewport size update,
+ such that the page has had a chance to adjust to the new layout size.
+
+ Test: fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html
+
+ * WebProcess/WebPage/ios/WebPageIOS.mm:
+ (WebKit::WebPage::dynamicViewportSizeUpdate):
+
2019-05-20 Ross Kirsling <[email protected]>
Make lossy LayoutUnit constructors explicit
Modified: trunk/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm (245560 => 245561)
--- trunk/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm 2019-05-21 03:40:12 UTC (rev 245560)
+++ trunk/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm 2019-05-21 05:01:54 UTC (rev 245561)
@@ -3002,11 +3002,6 @@
if (viewportChanged)
viewportConfigurationChanged();
-#if ENABLE(VIEWPORT_RESIZING)
- if (immediatelyShrinkToFitContent())
- viewportConfigurationChanged();
-#endif
-
IntSize newLayoutSize = m_viewportConfiguration.layoutSize();
if (setFixedLayoutSize(newLayoutSize))
@@ -3138,6 +3133,11 @@
setDeviceOrientation(deviceOrientation);
frameView.setScrollOffset(roundedUnobscuredContentRectPosition);
+#if ENABLE(VIEWPORT_RESIZING)
+ if (immediatelyShrinkToFitContent())
+ viewportConfigurationChanged();
+#endif
+
m_drawingArea->scheduleCompositingLayerFlush();
m_pendingDynamicViewportSizeUpdateID = dynamicViewportSizeUpdateID;
