ce3c5f052b8cf0054ed6dd83d8698614d89c3c0a
[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             await UIHelper.ensurePresentationUpdate();
25
26             largeElementRectBeforeRemoval = large.getBoundingClientRect();
27             mediumElementRectBeforeRemoval = medium.getBoundingClientRect();
28             innerWidthBeforeRemoval = innerWidth;
29             innerHeightBeforeRemoval = innerHeight;
30
31             large.remove();
32             await UIHelper.ensurePresentationUpdate();
33
34             mediumElementRectAfterRemoval = medium.getBoundingClientRect();
35             innerWidthAfterRemoval = innerWidth;
36             innerHeightAfterRemoval = innerHeight;
37
38             shouldBe("innerWidthBeforeRemoval", "512");
39             shouldBe("Math.round(largeElementRectBeforeRemoval.width)", "512");
40             shouldBe("Math.round(largeElementRectBeforeRemoval.height)", "innerHeightBeforeRemoval");
41             shouldBe("Math.round(mediumElementRectBeforeRemoval.width)", "320");
42             debug("\nAfter removing large container:\n");
43             shouldBe("innerWidthAfterRemoval", "320");
44             shouldBe("Math.round(mediumElementRectAfterRemoval.width)", "320");
45             shouldBe("Math.round(mediumElementRectAfterRemoval.height)", "innerHeightAfterRemoval");
46
47             finishJSTest();
48         }
49     </script>
50 </head>
51
52 <body onload="runTest()">
53     <div id="large" style="width: 160vw; height: 160vh; background-color: blue;"></div>
54     <div id="medium" style="width: 100vw; height: 100vh; background-color: green;"></div>
55 </body>
56 </html>