viewport-offset-manual.html (5580B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Offset</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 html { 15 width: 100%; 16 height: 100%; 17 } 18 #fullscreenBox { 19 position: fixed; 20 left: 0; 21 top: 0; 22 width: 100%; 23 height: 100%; 24 visibility: hidden; 25 } 26 </style> 27 </head> 28 <body> 29 <h1>Viewport: Offset</h1> 30 <h4> 31 Test Description: Tests the offset scrolling properties on an 32 unscrollable page. 33 </h4> 34 <h2 style="color: red">THIS IS A MANUAL TEST</h2> 35 <p id="skip"> 36 <button id="skipbtn" onclick="skipManualTest();">Skip Test</button> 37 </p> 38 <h4>Instruction</h4> 39 <p id="instruction"></p> 40 <button id="continue">Start Test</button> 41 <div id="log"></div> 42 <div id="fullscreenBox"> 43 <!-- Invisible but needed to get maximum scrollable extents in the 44 presence of a collapsible URL bar. --> 45 </div> 46 </body> 47 <script> 48 var continueBtn = document.getElementById("continue"); 49 50 function continueTest() { 51 nextStep(function(instructionText) { 52 var instruction = document.getElementById("instruction"); 53 continueBtn.innerText = "Continue"; 54 instruction.innerText = instructionText; 55 }); 56 } 57 58 continueBtn.addEventListener('click', continueTest); 59 60 // Prevent scrolling (though there should be no overflow) so that all 61 // scrolling must happen as panning the visual viewport within the 62 // layout viewport. 63 document.documentElement.style.overflow = "hidden"; 64 65 addManualTestStep( 66 function() {}, 67 null, 68 '1. Ensure the browser is at the default pinch and browser zoom ' + 69 'levels (100%). Most browsers: ctrl+0'); 70 71 var scale = 3.0; 72 var xTarget = 2 * window.innerWidth / scale; 73 var yTarget = 2 * window.innerHeight / scale; 74 addManualTestStep( 75 showPinchWidget.bind(null, scale, xTarget, yTarget, continueTest), 76 null, 77 '2.Follow instructions on pinch zoom dialog.'); 78 79 addManualTestStep( 80 function() { 81 var actualScale = window.visualViewport.scale; 82 var actualOffsetLeft = window.visualViewport.offsetLeft; 83 var actualOffsetTop = window.visualViewport.offsetTop; 84 85 // This needs to happen before assertions in case they fail. A 86 // failed assertion stops running this function. 87 window.scrollTo(0, 0); 88 89 // Ensure we zoomed in to about what we expect. 90 assert_approx_equals(actualScale, scale, 0.2, 91 "window.visualViewport.scale reflects pinch-zoom level"); 92 assert_approx_equals(actualOffsetLeft, xTarget, 5, 93 "offsetLeft value is correct."); 94 assert_approx_equals(actualOffsetTop, yTarget, 5, 95 "offsetTop value is correct."); 96 }, 97 'With ~300% pinch-zoom', 98 '3. Pinch-zoom back out to the minimum scale'); 99 100 addManualTestStep( 101 showPinchWidget.bind(null, 2, 0, 0, continueTest), 102 null, 103 '4.Follow instructions on pinch zoom dialog.'); 104 105 addManualTestStep( 106 function() { 107 document.documentElement.style.overflow = ""; 108 continueBtn.style.position = "absolute"; 109 continueBtn.style.left = "150%"; 110 continueBtn.style.top = "150%"; 111 112 assert_approx_equals(window.visualViewport.scale, 2, 0.2, 113 "window.visualViewport.scale reflects pinch-zoom level"); 114 }, 115 'Tester pinch zoomed in correctly', 116 '5. Scroll fully to the bottom right. Click the continue button ' + 117 'there.'); 118 119 addManualTestStep( 120 function() { 121 var fullscreenBox = document.getElementById('fullscreenBox'); 122 var expectedLeft = fullscreenBox.clientWidth / 2; 123 var expectedTop = fullscreenBox.clientHeight / 2; 124 var viewOffsetLeft = window.visualViewport.offsetLeft; 125 var viewOffsetTop = window.visualViewport.offsetTop; 126 127 // This needs to happen before assertions in case they fail. A 128 // failed assertion stops running this function. 129 continueBtn.style.position = ""; 130 continueBtn.style.left = ""; 131 continueBtn.style.top = ""; 132 133 window.scrollTo(0, 0); 134 135 assert_approx_equals(viewOffsetLeft, expectedLeft, 10, 136 "OffsetLeft is correct"); 137 assert_approx_equals(viewOffsetTop, expectedTop, 10, 138 "OffsetTop"); 139 }, 140 'OffsetLeft and OffsetTop correct when there\'s some layout ' + 141 'viewport scrolling as well.', 142 '6. Pinch-zoom out fully'); 143 144 addManualTestStep( 145 function() { 146 continueBtn.remove(); 147 }, 148 null, 149 'Test Complete'); 150 </script> 151 </html>