Skip to content
This repository was archived by the owner on Jun 24, 2022. It is now read-only.

Commit 27f7f6d

Browse files
author
[email protected]
committed
[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): git-svn-id: http://svn.webkit.org/repository/webkit/trunk@245561 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent de11e41 commit 27f7f6d

File tree

6 files changed

+133
-5
lines changed

6 files changed

+133
-5
lines changed

‎LayoutTests/ChangeLog

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,22 @@
1+
2019-05-20 Wenson Hsieh <[email protected]>
2+
3+
[iOS] Layout viewport size on google.com increases after rotating to landscape and back
4+
https://bugs.webkit.org/show_bug.cgi?id=198062
5+
<rdar://problem/50547895>
6+
7+
Reviewed by Maciej Stachowiak.
8+
9+
Add a UIHelper method to simulate device rotation to a given orientation, and use it in a new layout test that
10+
simulates rotation to and from landscape orientation, and verifies that the initial scale did not change from
11+
its expected value of 1.
12+
13+
* fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt: Added.
14+
* fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html: Added.
15+
* resources/ui-helper.js:
16+
(window.UIHelper.rotateDevice.return.new.Promise.):
17+
(window.UIHelper.rotateDevice):
18+
(window.UIHelper):
19+
120
2019-05-20 Chris Dumez <[email protected]>
221

322
Fix security check in ScriptController::canAccessFromCurrentOrigin()

‎LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation-expected.txt

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
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.
2+
3+
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
4+
5+
6+
7+
Before rotation
8+
PASS visualViewport.scale is 1
9+
10+
After the first rotation
11+
PASS visualViewport.scale is 1
12+
13+
After the second rotation
14+
PASS visualViewport.scale is 1
15+
PASS successfullyParsed is true
16+
17+
TEST COMPLETE
18+

‎LayoutTests/fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html> <!-- webkit-test-runner [ shouldIgnoreMetaViewport=true useFlexibleViewport=true ] -->
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<script src="../../../../resources/ui-helper.js"></script>
6+
<script src="../../../../resources/js-test.js"></script>
7+
<style>
8+
body, html {
9+
width: 100%;
10+
height: 100%;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
.bar {
16+
width: 0;
17+
height: 100px;
18+
background: linear-gradient(to right, red 0%, green 50%, blue 100%);
19+
}
20+
</style>
21+
</head>
22+
<body>
23+
<div class="bar"></div>
24+
<p id="description"></p>
25+
<p id="console"></p>
26+
<script>
27+
jsTestIsAsync = true;
28+
bar = document.querySelector(".bar");
29+
bar.style.width = `${innerWidth}px`;
30+
31+
addEventListener("resize", () => bar.style.width = `${innerWidth}px`);
32+
addEventListener("load", async () => {
33+
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.");
34+
35+
debug("\nBefore rotation");
36+
shouldBe("visualViewport.scale", "1");
37+
38+
await UIHelper.rotateDevice("landscape-right", true);
39+
await UIHelper.ensurePresentationUpdate();
40+
debug("\nAfter the first rotation");
41+
shouldBe("visualViewport.scale", "1");
42+
43+
await UIHelper.rotateDevice("portrait", true);
44+
await UIHelper.ensurePresentationUpdate();
45+
debug("\nAfter the second rotation");
46+
shouldBe("visualViewport.scale", "1");
47+
48+
finishJSTest();
49+
});
50+
</script>
51+
</body>
52+
</html>

‎LayoutTests/resources/ui-helper.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -906,4 +906,18 @@ window.UIHelper = class UIHelper {
906906
functionToCall.apply(this, theArguments);
907907
});
908908
}
909+
910+
static rotateDevice(orientationName, animatedResize = false)
911+
{
912+
if (!this.isWebKit2() || !this.isIOS())
913+
return Promise.resolve();
914+
915+
return new Promise(resolve => {
916+
testRunner.runUIScript(`(() => {
917+
uiController.${animatedResize ? "simulateRotationLikeSafari" : "simulateRotation"}("${orientationName}", function() {
918+
uiController.doAfterVisibleContentRectUpdate(() => uiController.uiScriptComplete());
919+
});
920+
})()`, resolve);
921+
});
922+
}
909923
}

‎Source/WebKit/ChangeLog

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1+
2019-05-20 Wenson Hsieh <[email protected]>
2+
3+
[iOS] Layout viewport size on google.com increases after rotating to landscape and back
4+
https://bugs.webkit.org/show_bug.cgi?id=198062
5+
<rdar://problem/50547895>
6+
7+
Reviewed by Maciej Stachowiak.
8+
9+
During an animated resize (e.g. when rotating the device on iOS), we currently immediately trigger the new
10+
shrink-to-fit content size heuristic in the middle of dynamicViewportSizeUpdate, after the new view layout size
11+
has been applied to the viewport configuration but before we've issued a resize event to the page.
12+
13+
Thus, on pages that use listen to the resize event and adjust their content accordingly to fit within the new
14+
layout width, we prematurely declare that the page has horizontally overflowed, and try to lay out at a larger
15+
width and scale down. This causes the page to unnecessarily shrink after rotating to landscale orientation and
16+
back.
17+
18+
To fix this, we simply move the call to shrink-to-fit-content to the end of the dynamic viewport size update,
19+
such that the page has had a chance to adjust to the new layout size.
20+
21+
Test: fast/events/ios/rotation/do-not-shrink-to-fit-content-after-rotation.html
22+
23+
* WebProcess/WebPage/ios/WebPageIOS.mm:
24+
(WebKit::WebPage::dynamicViewportSizeUpdate):
25+
126
2019-05-20 Ross Kirsling <[email protected]>
227

328
Make lossy LayoutUnit constructors explicit

‎Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3002,11 +3002,6 @@ static inline bool areEssentiallyEqualAsFloat(float a, float b)
30023002
if (viewportChanged)
30033003
viewportConfigurationChanged();
30043004

3005-
#if ENABLE(VIEWPORT_RESIZING)
3006-
if (immediatelyShrinkToFitContent())
3007-
viewportConfigurationChanged();
3008-
#endif
3009-
30103005
IntSize newLayoutSize = m_viewportConfiguration.layoutSize();
30113006

30123007
if (setFixedLayoutSize(newLayoutSize))
@@ -3138,6 +3133,11 @@ static inline bool areEssentiallyEqualAsFloat(float a, float b)
31383133
setDeviceOrientation(deviceOrientation);
31393134
frameView.setScrollOffset(roundedUnobscuredContentRectPosition);
31403135

3136+
#if ENABLE(VIEWPORT_RESIZING)
3137+
if (immediatelyShrinkToFitContent())
3138+
viewportConfigurationChanged();
3139+
#endif
3140+
31413141
m_drawingArea->scheduleCompositingLayerFlush();
31423142

31433143
m_pendingDynamicViewportSizeUpdateID = dynamicViewportSizeUpdateID;

0 commit comments

Comments
 (0)