1 files changed, 146 insertions, 0 deletions
diff --git a/testing/web-platform/tests/visual-viewport/viewport-dimensions-scrollbars-manual.html b/testing/web-platform/tests/visual-viewport/viewport-dimensions-scrollbars-manual.html
new file mode 100644
index 0000000000..493de254dc
--- /dev/null
+++ b/testing/web-platform/tests/visual-viewport/viewport-dimensions-scrollbars-manual.html
@@ -0,0 +1,146 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Viewport: Dimensions with 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;
+          }
+        </style>
+    </head>
+    <body>
+    <h1>Viewport: Dimensions with scrollbars</h1>
+    <h4>
+        Test Description: Tests the viewport dimensions correctly account for
+        scrollbars
+    </h4>
+    <h2 style="color: red">THIS IS A MANUAL TEST</h2>
+    <p id="skip">
+        <button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
+        <p>
+            If your browser doesn't support browser-zoom (Ctrl+/-, e.g. Mobile
+            Browsers) please skip.
+        </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");
+        var scrollbarThickness = calculateScrollbarThickness();
+
+        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 originalVisualViewportWidthExpectation = 0;
+        var originalVisualViewportHeightExpectation = 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;
+                originalInnerWidth = window.innerWidth;
+                // Remember the visualViewport size 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 - scrollbarThickness / 2.0
+                // 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.
+                originalVisualViewportWidthExpectation =
+                    window.innerWidth - scrollbarThickness;
+                originalVisualViewportHeightExpectation =
+                    window.innerHeight - scrollbarThickness;
+
+                assert_equals(
+                    window.visualViewport.width,
+                    originalVisualViewportWidthExpectation,
+                    "Scrollbar width subtracted from viewport.");
+                assert_equals(
+                    window.visualViewport.height,
+                    originalVisualViewportHeightExpectation,
+                    "Scrollbar height subtracted from viewport.");
+            },
+            'No zoom or scale applied',
+            '2. Browser-zoom into 200% (ctrl +)');
+
+        addManualTestStep(
+            function() {
+                assert_approx_equals(
+                    originalInnerWidth / window.innerWidth,
+                    2.0,
+                    0.1,
+                    "Browser zoom to correct level");
+
+                // Scrollbars on the window don't grow with browser-zoom so
+                // they'll be fewer CSS pixels as the user zooms in.
+                assert_equals(
+                    window.visualViewport.width,
+                    originalVisualViewportWidthExpectation / 2,
+                    "Scrollbar width subtracted from viewport.");
+                assert_equals(
+                    window.visualViewport.height,
+                    originalVisualViewportHeightExpectation / 2,
+                    "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");
+
+                assert_approx_equals(window.visualViewport.width,
+                              originalWidth / window.visualViewport.scale,
+                              1,
+                              "Scrollbar width subtracted from viewport.");
+                assert_approx_equals(window.visualViewport.height,
+                              originalHeight / window.visualViewport.scale,
+                              1,
+                              "Scrollbar width subtracted from viewport.");
+            },
+            'With ~200% pinch zoom',
+            '4. Pinch-zoom out.');
+
+        addManualTestStep(
+            function() { continueBtn.remove(); },
+            null,
+            'Test Complete');
+    </script>
+</html>