viewport-read-size-causes-layout.html (1352B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width, minimum-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 6 <style> 7 html { 8 height: 100%; 9 } 10 </style> 11 12 <h4>This test checks that requesting the viewport size causes any pending layout to occur.</h4> 13 <script> 14 async_test(function(t) { 15 window.onload = t.step_func(function() { 16 assert_equals(window.visualViewport.width, document.documentElement.clientWidth, 17 "window.visualViewport.width should match the window width."); 18 assert_equals(visualViewport.height, document.documentElement.clientHeight, 19 "window.visualViewport.height should match the window height."); 20 21 // Add overflow so scrollbars appear. 22 document.body.style.width = "2000px"; 23 document.body.style.height = "2000px"; 24 25 var viewportWidth = window.visualViewport.width; 26 var viewportHeight = window.visualViewport.height; 27 28 assert_equals(viewportWidth, document.documentElement.clientWidth, 29 "Reading viewport width should cause a layout and exclude the new scrollbar."); 30 assert_equals(viewportHeight, document.documentElement.clientHeight, 31 "Reading viewport height should cause a layout and exclude the new scrollbar."); 32 t.done(); 33 }); 34 }); 35 </script>