file_viewport_metrics_on_landscape_content.html (2200B)
1 <!DOCTYPE HTML> 2 <html> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, minimum-scale=0.5"> 5 <style> 6 html { 7 scrollbar-width: none; /* avoid scrollbar width is included in some metrics */ 8 } 9 html, body { 10 margin: 0; 11 width: 100%; 12 height: 100%; 13 overflow: none; 14 } 15 #twice-width { 16 width: 200%; 17 height: 100%; 18 position: absolute; 19 } 20 </style> 21 <div id="twice-width"></div> 22 <script> 23 24 const is = opener.is.bind(opener); 25 const todo_is = opener.todo_is.bind(opener); 26 const add_task = opener.add_task.bind(opener); 27 const original_finish = opener.SimpleTest.finish; 28 const SimpleTest = opener.SimpleTest; 29 30 SimpleTest.finish = function finish() { 31 self.close(); 32 original_finish(); 33 } 34 35 add_task(async () => { 36 // Explicitly set to 0.5x so that this test doesn't need to reply on our 37 // auto initial-scale calculation. 38 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(0.5); 39 is(window.visualViewport.scale, 0.5, "The content should be scaled by 0.5x"); 40 41 // Now the visual viewport size is same as the layout viewport. 42 const layoutViewportHeight = window.visualViewport.height; 43 44 is(window.innerHeight, layoutViewportHeight, 45 "window.innerHeight should reflect the layout viewport"); 46 is(document.documentElement.scrollHeight, layoutViewportHeight, 47 "The root element's scrollHeight should be the layout viewport height"); 48 is(document.documentElement.getBoundingClientRect().height, 49 layoutViewportHeight / 2, 50 "The content height should be half of the layout viewport height"); 51 52 // Set scale to 1.0x so that the visual viport size becomes 0.5x of the layout 53 // viewport. 54 SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(1); 55 is(window.visualViewport.scale, 1, "The content should be scaled by 1.0x"); 56 is(window.visualViewport.height, layoutViewportHeight / 2, 57 "Now the visual viewport height should be changed to half of the layout " + 58 "viewport height"); 59 is(window.innerHeight, layoutViewportHeight, 60 "window.innerHeight shouldn't be changed"); 61 is(document.documentElement.scrollHeight, layoutViewportHeight, 62 "The root element's scrollHeight shouldn't be changed"); 63 }); 64 </script> 65 </html>