[Extra zoom mode] fast/visual-viewport/extrazoom/layout-viewport-after-scrolling...
[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             await UIHelper.ensureVisibleContentRectUpdate();
40
41             topRectBeforeScrolling = document.getElementById("top").getBoundingClientRect();
42             bottomRectBeforeScrolling = document.getElementById("bottom").getBoundingClientRect();
43             layoutViewportBeforeScrolling = internals.layoutViewportRect();
44
45             const verticalScrollAmount = 2500;
46             scrollBy(0, verticalScrollAmount);
47
48             topRectAfterScrolling = document.getElementById("top").getBoundingClientRect();
49             bottomRectAfterScrolling = document.getElementById("bottom").getBoundingClientRect();
50             layoutViewportAfterScrolling = internals.layoutViewportRect();
51
52             document.body.style.height = "100px";
53             await UIHelper.ensureVisibleContentRectUpdate();
54
55             topRectAfterShorteningBody = document.getElementById("top").getBoundingClientRect();
56             bottomRectAfterShorteningBody = document.getElementById("bottom").getBoundingClientRect();
57             layoutViewportAfterShorteningBody = internals.layoutViewportRect();
58
59             finalDocumentHeight = Math.round(innerHeight * 1.5);
60             document.body.style.height = `${finalDocumentHeight}px`;
61             await UIHelper.ensureVisibleContentRectUpdate();
62
63             topRectAfterExtendingBody = document.getElementById("top").getBoundingClientRect();
64             bottomRectAfterExtendingBody = document.getElementById("bottom").getBoundingClientRect();
65             layoutViewportAfterExtendingBody = internals.layoutViewportRect();
66
67             debug("\nBefore scrolling.")
68             shouldBe("topRectBeforeScrolling.top", "0");
69             shouldBe("topRectBeforeScrolling.left", "0");
70             shouldBe("topRectBeforeScrolling.width", "innerWidth");
71             shouldBe("topRectBeforeScrolling.height", "50");
72             shouldBeGreaterThanOrEqual("bottomRectBeforeScrolling.top", "innerHeight");
73             shouldBe("bottomRectBeforeScrolling.left", "0");
74             shouldBe("bottomRectBeforeScrolling.width", "innerWidth");
75             shouldBe("bottomRectBeforeScrolling.height", "50");
76             shouldBe("layoutViewportBeforeScrolling.top", "0");
77             shouldBe("layoutViewportBeforeScrolling.left", "0");
78             shouldBe("layoutViewportBeforeScrolling.width", "innerWidth");
79             shouldBeGreaterThanOrEqual("layoutViewportBeforeScrolling.height", "innerHeight");
80
81             debug(`\nAfter scrolling ${verticalScrollAmount}px down.`);
82             shouldBeGreaterThanOrEqual("0", "topRectAfterScrolling.bottom");
83             shouldBe("topRectAfterScrolling.left", "0");
84             shouldBe("topRectAfterScrolling.width", "innerWidth");
85             shouldBe("topRectAfterScrolling.height", "50");
86             shouldBe("bottomRectAfterScrolling.bottom", "innerHeight");
87             shouldBe("bottomRectAfterScrolling.left", "0");
88             shouldBe("bottomRectAfterScrolling.width", "innerWidth");
89             shouldBe("bottomRectAfterScrolling.height", "50");
90             shouldBe("layoutViewportAfterScrolling.bottom", `${verticalScrollAmount} + innerHeight`);
91             shouldBe("layoutViewportAfterScrolling.left", "0");
92             shouldBe("layoutViewportAfterScrolling.width", "innerWidth");
93             shouldBeGreaterThanOrEqual("layoutViewportAfterScrolling.height", "innerHeight");
94
95             debug("\nAfter shortening document height to 100px.");
96             shouldBe("topRectAfterShorteningBody.top", "0");
97             shouldBe("topRectAfterShorteningBody.left", "0");
98             shouldBe("topRectAfterShorteningBody.width", "innerWidth");
99             shouldBe("topRectAfterShorteningBody.height", "50");
100             shouldBe("bottomRectAfterShorteningBody.bottom", "innerHeight");
101             shouldBe("bottomRectAfterShorteningBody.left", "0");
102             shouldBe("bottomRectAfterShorteningBody.width", "innerWidth");
103             shouldBe("bottomRectAfterShorteningBody.height", "50");
104             shouldBe("layoutViewportAfterShorteningBody.top", "0");
105             shouldBe("layoutViewportAfterShorteningBody.left", "0");
106             shouldBe("layoutViewportAfterShorteningBody.width", "innerWidth");
107             shouldBe("layoutViewportAfterShorteningBody.height", "innerHeight");
108
109             debug("\nAfter extending document height to 1.5x innerHeight.")
110             shouldBe("topRectAfterExtendingBody.top", "0");
111             shouldBe("topRectAfterExtendingBody.left", "0");
112             shouldBe("topRectAfterExtendingBody.width", "innerWidth");
113             shouldBe("topRectAfterExtendingBody.height", "50");
114             shouldBeGreaterThanOrEqual("bottomRectAfterExtendingBody.top", "innerHeight");
115             shouldBe("bottomRectAfterExtendingBody.left", "0");
116             shouldBe("bottomRectAfterExtendingBody.width", "innerWidth");
117             shouldBe("bottomRectAfterExtendingBody.height", "50");
118             shouldBe("layoutViewportAfterExtendingBody.top", "0");
119             shouldBe("layoutViewportAfterExtendingBody.left", "0");
120             shouldBe("layoutViewportAfterExtendingBody.width", "innerWidth");
121             shouldBeGreaterThanOrEqual("layoutViewportAfterExtendingBody.height", "innerHeight");
122
123             // The layout viewport should not be expanded past document bounds. Before scrolling, the document height
124             // was much taller than the window height, but afterwards, the document height is short enough that we
125             // should clamp the extended layout viewport to its bounds.
126             shouldBeTrue("layoutViewportAfterExtendingBody.height < layoutViewportBeforeScrolling.height");
127             shouldBe("finalDocumentHeight", "layoutViewportAfterExtendingBody.height");
128
129             finishJSTest();
130         }
131     </script>
132 </head>
133 <body onload="runTest()">
134     <div class="fixed" id="top"></div>
135     <div class="fixed" id="bottom"></div>
136 </body>
137 </html>