viewport-read-size-in-iframe-causes-layout.html (1544B)
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 <style> 6 iframe { 7 width: 200px; 8 height: 300px; 9 } 10 </style> 11 12 <h4>This test checks that requesting the viewport size in an iframe causes any pending layout to occur.</h4> 13 <iframe srcdoc="<!DOCTYPE html><style>html{height:100%}</style>"></iframe> 14 <script> 15 async_test(function(t) { 16 window.onload = t.step_func(function() { 17 assert_equals(frames[0].window.visualViewport.width, 200, 18 "Reading width of iframe viewport should match iframe width."); 19 assert_equals(frames[0].window.visualViewport.height, 300, 20 "Reading height of iframe viewport should match iframe height."); 21 22 // Add overflow so scrollbars appear. 23 window.frames[0].window.document.body.style.width = "2000px"; 24 window.frames[0].window.document.body.style.height = "2000px"; 25 26 var viewportWidth = frames[0].window.visualViewport.width; 27 var viewportHeight = frames[0].window.visualViewport.height; 28 29 assert_equals(viewportWidth, frames[0].window.document.documentElement.clientWidth, 30 "Reading width of iframe viewport should cause a layout and exclude the new scrollbar."); 31 assert_equals(viewportHeight, frames[0].window.document.documentElement.clientHeight, 32 "Reading height of iframe viewport should cause a layout and exclude the new scrollbar."); 33 t.done(); 34 }); 35 }); 36 </script>