| <!doctype html> |
| <html> |
| <head> |
| <title>Viewport: Scrollbars Cause Resize</title> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="viewport_support.js"></script> |
| </head> |
| <body> |
| <h1>Viewport: Scrollbars Cause Resize</h1> |
| <h4> |
| Test Description: This test checks that the appearance of classic |
| scrollbars will cause a resize event to be fired at window.visualViewport. |
| </h4> |
| <script> |
| function runTest() { |
| var scrollbarThickness = calculateScrollbarThickness(); |
| |
| document.documentElement.style.overflow = "hidden"; |
| var initialWidth = visualViewport.width; |
| var initialHeight = visualViewport.height; |
| |
| test(function() { |
| assert_equals(window.visualViewport.width, window.innerWidth); |
| assert_equals(window.visualViewport.height, window.innerHeight); |
| }, "view size initially matches window size"); |
| |
| |
| var t = async_test( |
| "Resize event was fired at window.visualViewport if, and only if, " + |
| "scrollbars are classic (i.e. affect flow)"); |
| var viewResized = false; |
| window.visualViewport.addEventListener('resize', function() { |
| viewResized = true; |
| }); |
| |
| requestAnimationFrame(t.step_func_done(function() { |
| assert_equals(viewResized, scrollbarThickness > 0); |
| })); |
| |
| document.documentElement.style.overflow = ""; |
| document.body.style.width = "10000px"; |
| document.body.style.height = "10000px"; |
| |
| var expectedWidth = initialWidth - scrollbarThickness; |
| var expectedHeight = initialHeight - scrollbarThickness; |
| |
| test(function() { |
| assert_equals(window.visualViewport.width, expectedWidth); |
| assert_equals(window.visualViewport.height, expectedHeight); |
| }, "view size reflects appearance of classic scrollbars"); |
| |
| |
| document.body.style.width = ""; |
| document.body.style.height = ""; |
| } |
| |
| // Run the test after load to make sure any resize from a previous test |
| // doesn't interfere. |
| window.onload = runTest; |
| </script> |
| <div id="log"></div> |
| </body> |
| </html> |