viewport-unscaled-size.html (2307B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Size unscaled</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, minimum-scale=1"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="viewport_support.js"></script> 10 <style> 11 html { 12 width: 100%; 13 height: 100%; 14 } 15 </style> 16 </head> 17 <body> 18 <h1>Viewport: Size unscaled</h1> 19 <h4>Test Description: This test checks that window.visualViewport returns correct sizes without any pinch-zoom page scale applied.</h4> 20 <div id="complete-notice"> 21 <p>window.visualViewport width and height is (<span id="view-size-log"></span>).</p> 22 <p>window.visualViewport width and height when scrollbars are present is (<span id="view-size-scrollbar-log"></span>).</p> 23 </div> 24 <div id="log"></div> 25 </body> 26 <script> 27 var scrollbarThickness = calculateScrollbarThickness(); 28 29 test(function() { 30 assert_equals(window.visualViewport.width, document.documentElement.clientWidth); 31 }, "visualViewport.width should match documentElement.clientWidth when unzoomed."); 32 test(function() { 33 assert_equals(window.visualViewport.height, document.documentElement.clientHeight); 34 }, "visualViewport.height should match documentElement.clientHeight when unzoomed."); 35 36 document.getElementById("view-size-log").innerText = window.visualViewport.width + ", " + window.visualViewport.height; 37 38 // Add overflow so scrollbars appear. 39 document.body.style.width = "2000px"; 40 document.body.style.height = "2000px"; 41 42 test(function() { 43 assert_equals(window.visualViewport.width, document.documentElement.clientWidth); 44 }, "visualViewport.width should exclude scrollbar."); 45 test(function() { 46 assert_equals(window.visualViewport.height, document.documentElement.clientHeight); 47 }, "visualViewport.height should exclude scrollbar."); 48 49 document.getElementById("view-size-scrollbar-log").innerText = window.visualViewport.width + ", " + window.visualViewport.height; 50 </script> 51 </html>