viewport-dimensions-custom-scrollbars-manual.html

<!doctype html>

<html>

    <head>

        <title>Viewport: Dimensions with custom scrollbars</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>

        <script>

           setup({explicit_done: true, explicit_timeout: true});

        </script>

        <style>

          #spacer {

            width: 10000px;

            height: 10000px;

            position: absolute;

            visibility: hidden;

          ::-webkit-scrollbar {

            width: 20px;

            height: 25px;

          ::-webkit-scrollbar-track {

                background-color: #b46868;

          ::-webkit-scrollbar-thumb {

                background-color: rgba(0, 0, 0, 0.2);

        </style>

    </head>

    <body>

    <h1>Viewport: Dimensions with custom scrollbars</h1>

    <h4>

        Test Description: Tests the viewport dimensions correctly account for

        custom scrollbars

    </h4>

    <h2 style="color: red">THIS IS A MANUAL TEST</h2>

    <p id="skip">

        <button id="skipbtn" onclick="skipManualTest();">Skip</button>

<p>

            Skip this test if your browser doesn't support custom scrollbars or

            browser-zoom (Ctrl+/-).

        </p>

    </p>

    <p id="instruction"></p>

    <button id="continue">Start Test</button>

    <div id="log"></div>

    <div id="spacer"></div>

    </body>

    <script>

        var continueBtn = document.getElementById("continue");

        function continueTest() {

          nextStep(function(instructionText) {

            var instruction = document.getElementById("instruction");

            continueBtn.innerText = "Continue";

            instruction.innerText = instructionText;

});

        continueBtn.addEventListener('click', continueTest);

        var originalWidth = 0;

        var originalHeight = 0;

        var originalInnerWidth = 0;

        var originalInnerHeight = 0;

        addManualTestStep(

            function() {},

            null,

            '1. Ensure the browser is at the default pinch and browser zoom ' +

            'levels (100%). Most browsers: ctrl+0');

        addManualTestStep(

            function() {

                originalWidth = window.visualViewport.width;

                originalHeight = window.visualViewport.height;

                // Remember the inner dimensions here for the next test to

                // address an edge case where originalInnerWidth is an odd

                // number of pixels. The test expects that at 2x browser-zoom,

                // visualViewport.width = innerWidth - customScrollbarThickness

                // The equality only holds if originalInnerWidth / innerWidth is

                // exactly 2, which is not the case in the aforementioned

                // scenario because innerWidth always has to be an integer

                // number of CSS pixels. Ditto for the height computation.

                originalInnerWidth = window.innerWidth;

                originalInnerHeight = window.innerHeight;

                assert_equals(

                    window.visualViewport.width,

                    window.innerWidth - 20,

                    "Custom scrollbar width subtracted from viewport.");

                assert_equals(

                    window.visualViewport.height,

                    window.innerHeight - 25,

                    "Custom scrollbar height subtracted from viewport.");

},

            'No zoom or scale applied',

            '2. Browser-zoom into 200% (ctrl +)');

        addManualTestStep(

            function() {

                // Ensure we zoomed in to about what we expect.

                assert_approx_equals(

                    originalInnerWidth / window.innerWidth,

                    2.0,

                    0.1,

                    "Browser zoom to correct level");

                // The custom scrollbars are also 2x larger on the screen, so

                // the viewport is smaller than half of the original size.

                assert_equals(

                    window.visualViewport.width,

                    originalInnerWidth / 2 - 20,

                    "Custom scrollbar width subtracted from viewport.");

                assert_equals(

                    window.visualViewport.height,

                    originalInnerHeight / 2 - 25,

                    "Custom scrollbar height subtracted from viewport.");

},

            'With 200% browser zoom',

            '3. Reset browser zoom (ctrl+0).');

        addManualTestStep(

            showPinchWidget.bind(null, 2.0, 0, 0, continueTest),

            null,

            'Pinch-zoom dialog in progress');

        addManualTestStep(

            function() {

                assert_approx_equals(

                    window.visualViewport.scale, 2, 0.2, "Pinch zoom to correct scale");

                // Scrollbars do not grow with pinch-zoom so they take up fewer

                // CSS pixels as you zoom in.

                assert_approx_equals(

                    window.visualViewport.width,

                    originalWidth / window.visualViewport.scale,

1,

                    "Custom scrollbar width subtracted from viewport.");

                assert_approx_equals(

                    window.visualViewport.height,

                    originalHeight / window.visualViewport.scale,

1,

                    "Custom scrollbar width subtracted from viewport.");

},

            'With ~200% pinch zoom',

            '4. Pinch-zoom out.');

        addManualTestStep(

            function() { continueBtn.remove(); },

            null,

            'Test Complete');

    </script>

</html>