tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

viewport-scrollbars-cause-resize.html (2569B)

      1 <!doctype html>
      2 <html>
      3    <head>
      4        <title>Viewport: Scrollbars Cause Resize</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    </head>
     11    <body>
     12    <h1>Viewport: Scrollbars Cause Resize</h1>
     13    <h4>
     14        Test Description: This test checks that the appearance of classic
     15        scrollbars will cause a resize event to be fired at window.visualViewport.
     16    </h4>
     17    <script>
     18      setup({ explicit_done: true });
     19 
     20      function runTest() {
     21        var scrollbarThickness = calculateScrollbarThickness();
     22 
     23        document.documentElement.style.overflow = "hidden";
     24        var initialWidth = visualViewport.width;
     25        var initialHeight = visualViewport.height;
     26 
     27        test(function() {
     28              assert_equals(window.visualViewport.width, window.innerWidth);
     29              assert_equals(window.visualViewport.height, window.innerHeight);
     30            }, "view size initially matches window size");
     31 
     32 
     33        var t = async_test(
     34            "Resize event was fired at window.visualViewport if, and only if, " +
     35            "scrollbars are classic (i.e. affect flow)");
     36        var viewResized = false;
     37        window.visualViewport.addEventListener('resize', function() {
     38            viewResized = true;
     39        });
     40 
     41        requestAnimationFrame(t.step_func_done(function() {
     42            assert_equals(viewResized, scrollbarThickness > 0);
     43        }));
     44 
     45        document.documentElement.style.overflow = "";
     46        document.body.style.width = "10000px";
     47        document.body.style.height = "10000px";
     48 
     49        var expectedWidth = initialWidth - scrollbarThickness;
     50        var expectedHeight = initialHeight - scrollbarThickness;
     51 
     52        test(function() {
     53              assert_equals(window.visualViewport.width, expectedWidth);
     54              assert_equals(window.visualViewport.height, expectedHeight);
     55            }, "view size reflects appearance of classic scrollbars");
     56 
     57 
     58        document.body.style.width = "";
     59        document.body.style.height = "";
     60      }
     61 
     62      // Run the test after load to make sure any resize from a previous test
     63      // or from the load doesn't interfere.
     64      window.onload = requestAnimationFrame(function() {
     65        try {
     66          runTest();
     67        } finally {
     68          done();
     69        }
     70      });
     71    </script>
     72    <div id="log"></div>
     73    </body>
     74 </html>