viewport-dimensions-scrollbars-manual.html (5793B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Dimensions with scrollbars</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 <script> 11 setup({explicit_done: true, explicit_timeout: true}); 12 </script> 13 <style> 14 #spacer { 15 width: 10000px; 16 height: 10000px; 17 position: absolute; 18 visibility: hidden; 19 } 20 </style> 21 </head> 22 <body> 23 <h1>Viewport: Dimensions with scrollbars</h1> 24 <h4> 25 Test Description: Tests the viewport dimensions correctly account for 26 scrollbars 27 </h4> 28 <h2 style="color: red">THIS IS A MANUAL TEST</h2> 29 <p id="skip"> 30 <button id="skipbtn" onclick="skipManualTest();">Skip Test</button> 31 <p> 32 If your browser doesn't support browser-zoom (Ctrl+/-, e.g. Mobile 33 Browsers) please skip. 34 </p> 35 </p> 36 <p id="instruction"></p> 37 <button id="continue">Start Test</button> 38 <div id="log"></div> 39 <div id="spacer"></div> 40 </body> 41 <script> 42 var continueBtn = document.getElementById("continue"); 43 var scrollbarThickness = calculateScrollbarThickness(); 44 45 function continueTest() { 46 nextStep(function(instructionText) { 47 var instruction = document.getElementById("instruction"); 48 continueBtn.innerText = "Continue"; 49 instruction.innerText = instructionText; 50 }); 51 } 52 53 continueBtn.addEventListener('click', continueTest); 54 55 var originalWidth = 0; 56 var originalHeight = 0; 57 var originalInnerWidth = 0; 58 var originalVisualViewportWidthExpectation = 0; 59 var originalVisualViewportHeightExpectation = 0; 60 61 addManualTestStep( 62 function() {}, 63 null, 64 '1. Ensure the browser is at the default pinch and browser zoom ' + 65 'levels (100%). Most browsers: ctrl+0'); 66 67 addManualTestStep( 68 function() { 69 originalWidth = window.visualViewport.width; 70 originalHeight = window.visualViewport.height; 71 originalInnerWidth = window.innerWidth; 72 // Remember the visualViewport size here for the next test to 73 // address an edge case where originalInnerWidth is an odd 74 // number of pixels. The test expects that at 2x browser-zoom, 75 // visualViewport.width = innerWidth - scrollbarThickness / 2.0 76 // The equality only holds if originalInnerWidth / innerWidth is 77 // exactly 2, which is not the case in the aforementioned 78 // scenario because innerWidth always has to be an integer 79 // number of CSS pixels. Ditto for the height computation. 80 originalVisualViewportWidthExpectation = 81 window.innerWidth - scrollbarThickness; 82 originalVisualViewportHeightExpectation = 83 window.innerHeight - scrollbarThickness; 84 85 assert_equals( 86 window.visualViewport.width, 87 originalVisualViewportWidthExpectation, 88 "Scrollbar width subtracted from viewport."); 89 assert_equals( 90 window.visualViewport.height, 91 originalVisualViewportHeightExpectation, 92 "Scrollbar height subtracted from viewport."); 93 }, 94 'No zoom or scale applied', 95 '2. Browser-zoom into 200% (ctrl +)'); 96 97 addManualTestStep( 98 function() { 99 assert_approx_equals( 100 originalInnerWidth / window.innerWidth, 101 2.0, 102 0.1, 103 "Browser zoom to correct level"); 104 105 // Scrollbars on the window don't grow with browser-zoom so 106 // they'll be fewer CSS pixels as the user zooms in. 107 assert_equals( 108 window.visualViewport.width, 109 originalVisualViewportWidthExpectation / 2, 110 "Scrollbar width subtracted from viewport."); 111 assert_equals( 112 window.visualViewport.height, 113 originalVisualViewportHeightExpectation / 2, 114 "Scrollbar height subtracted from viewport."); 115 }, 116 'With 200% browser zoom', 117 '3. Reset browser zoom (ctrl+0).'); 118 119 addManualTestStep( 120 showPinchWidget.bind(null, 2.0, 0, 0, continueTest), 121 null, 122 'Pinch-zoom dialog in progress'); 123 124 addManualTestStep( 125 function() { 126 assert_approx_equals( 127 window.visualViewport.scale, 2, 0.2, "Pinch zoom to correct scale"); 128 129 assert_approx_equals(window.visualViewport.width, 130 originalWidth / window.visualViewport.scale, 131 1, 132 "Scrollbar width subtracted from viewport."); 133 assert_approx_equals(window.visualViewport.height, 134 originalHeight / window.visualViewport.scale, 135 1, 136 "Scrollbar width subtracted from viewport."); 137 }, 138 'With ~200% pinch zoom', 139 '4. Pinch-zoom out.'); 140 141 addManualTestStep( 142 function() { continueBtn.remove(); }, 143 null, 144 'Test Complete'); 145 </script> 146 </html>