30da9816ac4b8c4f5469b8bc818b00cf7b87b6b7
[WebKit-https.git] / LayoutTests / fast / visual-viewport / extrazoom / layout-viewport-after-scrolling-and-resizing.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
2 <html>
3 <meta name="viewport" content="width=device-width">
4 <head>
5     <script src="../../../resources/js-test.js"></script>
6     <script src="../../../resources/ui-helper.js"></script>
7     <style>
8         body, html {
9             margin: 0;
10             width: 100%;
11         }
12
13         body {
14             height: 5000px;
15         }
16
17         .fixed {
18             width: 100%;
19             height: 50px;
20             background-color: green;
21             position: fixed;
22             left: 0;
23         }
24
25         #top {
26             top: 0;
27             background-color: green;
28         }
29
30         #bottom {
31             bottom: 0;
32             background-color: blue;
33         }
34     </style>
35     <script>
36         async function runTest() {
37             jsTestIsAsync = true;
38
39             // FIXME: This works around innerWidth and innerHeight being incorrect (i.e. unadjusted for shrink-to-fit
40             // behavior) in the load event listener of the body. See: https://bugs.webkit.org/show_bug.cgi?id=184788.
41             await UIHelper.ensurePresentationUpdate();
42
43             topRectBeforeScrolling = document.getElementById("top").getBoundingClientRect();
44             bottomRectBeforeScrolling = document.getElementById("bottom").getBoundingClientRect();
45             layoutViewportBeforeScrolling = internals.layoutViewportRect();
46
47             const verticalScrollAmount = 2500;
48             scrollBy(0, verticalScrollAmount);
49
50             topRectAfterScrolling = document.getElementById("top").getBoundingClientRect();
51             bottomRectAfterScrolling = document.getElementById("bottom").getBoundingClientRect();
52             layoutViewportAfterScrolling = internals.layoutViewportRect();
53
54             document.body.style.height = "100px";
55             await UIHelper.ensurePresentationUpdate();
56
57             topRectAfterShorteningBody = document.getElementById("top").getBoundingClientRect();
58             bottomRectAfterShorteningBody = document.getElementById("bottom").getBoundingClientRect();
59             layoutViewportAfterShorteningBody = internals.layoutViewportRect();
60
61             finalDocumentHeight = Math.round(innerHeight * 1.5);
62             document.body.style.height = `${finalDocumentHeight}px`;
63             await UIHelper.ensurePresentationUpdate();
64
65             topRectAfterExtendingBody = document.getElementById("top").getBoundingClientRect();
66             bottomRectAfterExtendingBody = document.getElementById("bottom").getBoundingClientRect();
67             layoutViewportAfterExtendingBody = internals.layoutViewportRect();
68
69             debug("\nBefore scrolling.")
70             shouldBe("topRectBeforeScrolling.top", "0");
71             shouldBe("topRectBeforeScrolling.left", "0");
72             shouldBe("topRectBeforeScrolling.width", "innerWidth");
73             shouldBe("topRectBeforeScrolling.height", "50");
74             shouldBeGreaterThanOrEqual("bottomRectBeforeScrolling.top", "innerHeight");
75             shouldBe("bottomRectBeforeScrolling.left", "0");
76             shouldBe("bottomRectBeforeScrolling.width", "innerWidth");
77             shouldBe("bottomRectBeforeScrolling.height", "50");
78             shouldBe("layoutViewportBeforeScrolling.top", "0");
79             shouldBe("layoutViewportBeforeScrolling.left", "0");
80             shouldBe("layoutViewportBeforeScrolling.width", "innerWidth");
81             shouldBeGreaterThanOrEqual("layoutViewportBeforeScrolling.height", "innerHeight");
82
83             debug(`\nAfter scrolling ${verticalScrollAmount}px down.`);
84             shouldBeGreaterThanOrEqual("0", "topRectAfterScrolling.bottom");
85             shouldBe("topRectAfterScrolling.left", "0");
86             shouldBe("topRectAfterScrolling.width", "innerWidth");
87             shouldBe("topRectAfterScrolling.height", "50");
88             shouldBe("bottomRectAfterScrolling.bottom", "innerHeight");
89             shouldBe("bottomRectAfterScrolling.left", "0");
90             shouldBe("bottomRectAfterScrolling.width", "innerWidth");
91             shouldBe("bottomRectAfterScrolling.height", "50");
92             shouldBe("layoutViewportAfterScrolling.bottom", `${verticalScrollAmount} + innerHeight`);
93             shouldBe("layoutViewportAfterScrolling.left", "0");
94             shouldBe("layoutViewportAfterScrolling.width", "innerWidth");
95             shouldBeGreaterThanOrEqual("layoutViewportAfterScrolling.height", "innerHeight");
96
97             debug("\nAfter shortening document height to 100px.");
98             shouldBe("topRectAfterShorteningBody.top", "0");
99             shouldBe("topRectAfterShorteningBody.left", "0");
100             shouldBe("topRectAfterShorteningBody.width", "innerWidth");
101             shouldBe("topRectAfterShorteningBody.height", "50");
102             shouldBe("bottomRectAfterShorteningBody.bottom", "innerHeight");
103             shouldBe("bottomRectAfterShorteningBody.left", "0");
104             shouldBe("bottomRectAfterShorteningBody.width", "innerWidth");
105             shouldBe("bottomRectAfterShorteningBody.height", "50");
106             shouldBe("layoutViewportAfterShorteningBody.top", "0");
107             shouldBe("layoutViewportAfterShorteningBody.left", "0");
108             shouldBe("layoutViewportAfterShorteningBody.width", "innerWidth");
109             shouldBe("layoutViewportAfterShorteningBody.height", "innerHeight");
110
111             debug("\nAfter extending document height to 1.5x innerHeight.")
112             shouldBe("topRectAfterExtendingBody.top", "0");
113             shouldBe("topRectAfterExtendingBody.left", "0");
114             shouldBe("topRectAfterExtendingBody.width", "innerWidth");
115             shouldBe("topRectAfterExtendingBody.height", "50");
116             shouldBeGreaterThanOrEqual("bottomRectAfterExtendingBody.top", "innerHeight");
117             shouldBe("bottomRectAfterExtendingBody.left", "0");
118             shouldBe("bottomRectAfterExtendingBody.width", "innerWidth");
119             shouldBe("bottomRectAfterExtendingBody.height", "50");
120             shouldBe("layoutViewportAfterExtendingBody.top", "0");
121             shouldBe("layoutViewportAfterExtendingBody.left", "0");
122             shouldBe("layoutViewportAfterExtendingBody.width", "innerWidth");
123             shouldBeGreaterThanOrEqual("layoutViewportAfterExtendingBody.height", "innerHeight");
124
125             // The layout viewport should not be expanded past document bounds. Before scrolling, the document height
126             // was much taller than the window height, but afterwards, the document height is short enough that we
127             // should clamp the extended layout viewport to its bounds.
128             shouldBeTrue("layoutViewportAfterExtendingBody.height < layoutViewportBeforeScrolling.height");
129             shouldBe("finalDocumentHeight", "layoutViewportAfterExtendingBody.height");
130
131             finishJSTest();
132         }
133     </script>
134 </head>
135 <body onload="runTest()">
136     <div class="fixed" id="top"></div>
137     <div class="fixed" id="bottom"></div>
138 </body>
139 </html>