<!DOCTYPE html>
<style>
    body {
        height: 2000px;
        width: 2000px;
    }
    ::-webkit-scrollbar {
        width: 20px;
        height: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: #b46868;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
    }
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    var pageZoomFactor = 1.25;
    var pageScaleFactor = 2;
    var scrollbarThicknessInCSSPixels;

    function viewport() {
        return window.visualViewport;
    }

    var test = async_test('Verify viewport dimensions exclude custom scrollbars.');

    var doAfterZooming = test.step_func(function() {
        window.scrollTo(0, 0);
        scrollbarThicknessInCSSPixels /= pageScaleFactor;

        assert_equals(
            viewport().width,
            800 / pageScaleFactor - scrollbarThicknessInCSSPixels,
            "Width with page scale");
        assert_equals(
            viewport().height, 600 / pageScaleFactor - scrollbarThicknessInCSSPixels,
            "Height with page scale");

        window.internals.setPageZoomFactor(pageZoomFactor);

        // Verify scrollbar exclusion with page zoom. Custom scrollbars are
        // scaled with page zoom, so their size in CSS pixels remains unchanged.
        assert_equals(
            viewport().width,
            800 / pageZoomFactor / pageScaleFactor - scrollbarThicknessInCSSPixels,
            "Width with page scale and page zoom");
        assert_equals(
            viewport().height,
            600 / pageZoomFactor / pageScaleFactor - scrollbarThicknessInCSSPixels,
            "Height with page scale and page zoom");
        test.done();
    });

    function getUIScript() {
        return `(function() {
            uiController.zoomToScale(${pageScaleFactor}, function() {
                uiController.uiScriptComplete(uiController.zoomScale);
            });
        })();`;
    }

    window.onload = function() {
        scrollbarThicknessInCSSPixels = window.innerWidth - document.documentElement.clientWidth;
        testRunner.runUIScript(getUIScript(), function(zoomScale) {
            doAfterZooming();
        });
    };
</script>