[Extra zoom mode] fast/visual-viewport/extrazoom/layout-viewport-after-scrolling...
[WebKit-https.git] / LayoutTests / fast / css / extrazoom / viewport-units-shrink-to-fit.html
1 <!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
2 <html>
3 <meta name="viewport" content="width=device-width, initial-scale=1">
4 <head>
5     <style>
6         html, body {
7             width: 100%;
8             height: 100%;
9             margin: 0;
10         }
11
12         #large, #medium {
13             position: absolute;
14             top: 0;
15             left: 0;
16         }
17     </style>
18     <script src="../../../resources/ui-helper.js"></script>
19     <script src="../../../resources/js-test.js"></script>
20     <script>
21         jsTestIsAsync = true;
22
23         async function runTest() {
24             largeElementRectBeforeRemoval = large.getBoundingClientRect();
25             mediumElementRectBeforeRemoval = medium.getBoundingClientRect();
26             innerWidthBeforeRemoval = innerWidth;
27             innerHeightBeforeRemoval = innerHeight;
28
29             large.remove();
30
31             mediumElementRectAfterRemoval = medium.getBoundingClientRect();
32             innerWidthAfterRemoval = innerWidth;
33             innerHeightAfterRemoval = innerHeight;
34
35             shouldBe("innerWidthBeforeRemoval", "512");
36             shouldBe("Math.round(largeElementRectBeforeRemoval.width)", "512");
37             shouldBe("Math.round(largeElementRectBeforeRemoval.height)", "innerHeightBeforeRemoval");
38             shouldBe("Math.round(mediumElementRectBeforeRemoval.width)", "320");
39             debug("\nAfter removing large container:\n");
40             shouldBe("innerWidthAfterRemoval", "320");
41             shouldBe("Math.round(mediumElementRectAfterRemoval.width)", "320");
42             shouldBe("Math.round(mediumElementRectAfterRemoval.height)", "innerHeightAfterRemoval");
43
44             finishJSTest();
45         }
46     </script>
47 </head>
48
49 <body onload="runTest()">
50     <div id="large" style="width: 160vw; height: 160vh; background-color: blue;"></div>
51     <div id="medium" style="width: 100vw; height: 100vh; background-color: green;"></div>
52 </body>
53 </html>