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