Content - d0158c6f6259dd4181c0e8d921ebe3ecc9fa9d73 - cb0ed16/visual-viewport/viewport-scrollbars-cause-resize.html

visit type:

Tip revision: 4f4d4245a44a8fd575c71492b9bc943ab5463a8d authored by Anne van Kesteren on 28 May 2018, 14:47:32 UTC
HTML: remove autofocused element before its task runs

Tip revision: 4f4d424

viewport-scrollbars-cause-resize.html

<!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>

Browse the archive

https://github.com/web-platform-tests/wpt