viewport-unscaled-size-iframe.html (2742B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Size in iframe - no page scale</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="viewport_support.js"></script> 10 <style> 11 iframe { 12 width: 200px; 13 height: 300px; 14 border: 0; 15 } 16 </style> 17 </head> 18 <body> 19 <h1>Viewport: Size in iframe - no page scale</h1> 20 <h4>Test Description: This test checks that window.visualViewport returns correct sizes without any pinch-zoom page scale applied but with scrollbars.</h4> 21 <iframe></iframe> 22 <div id="complete-notice"> 23 <p>frames[0].window.visualViewport width and height is (<span id="size-log"></span>).</p> 24 <p>frames[0].window.visualViewport width and height when scrollbars are present is (<span id="size-scrollbars-log"></span>).</p> 25 </div> 26 <div id="log"></div> 27 </body> 28 <script> 29 setup({ explicit_done: true }); 30 31 function runTest() { 32 var scrollbarThickness = calculateScrollbarThickness(); 33 34 test(function() { 35 assert_equals(frames[0].window.visualViewport.width, 200); 36 }, "window.visualViewport.width of iframe viewport should match iframe width."); 37 test(function() { 38 assert_equals(frames[0].window.visualViewport.height, 300); 39 }, "window.visualViewport.height of iframe viewport should match iframe height."); 40 41 document.getElementById("size-log").innerText = frames[0].window.visualViewport.width + ", " + frames[0].window.visualViewport.height; 42 43 // Add overflow so scrollbars appear. 44 window.frames[0].window.document.body.style.width = "2000px"; 45 window.frames[0].window.document.body.style.height = "2000px"; 46 47 test(function() { 48 assert_equals(frames[0].window.visualViewport.width, 200 - scrollbarThickness); 49 }, "window.visualViewport.width of iframe viewport should not include scrollbar."); 50 test(function() { 51 assert_equals(frames[0].window.visualViewport.height, 300 - scrollbarThickness); 52 }, "window.visualViewport.height of iframe viewport should not include scrollbar."); 53 54 document.getElementById("size-scrollbars-log").innerText = frames[0].window.visualViewport.width + ", " + frames[0].window.visualViewport.height; 55 } 56 57 window.onload = function() { 58 try { 59 runTest(); 60 } finally { 61 done(); 62 } 63 } 64 </script> 65 </html>