viewport-page-manual.html (3778B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Page</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 </style> 19 </head> 20 <body> 21 <h1>Viewport: Page</h1> 22 <h4> 23 Test Description: Tests the page scrolling properties. 24 </h4> 25 <h2 style="color: red">THIS IS A MANUAL TEST</h2> 26 <p id="skip"> 27 <button id="skipbtn" onclick="skipManualTest();">Skip Test</button> 28 </p> 29 <h4>Instruction</h4> 30 <p id="instruction"></p> 31 <button id="continue">Start Test</button> 32 <div id="log"></div> 33 </body> 34 <script> 35 var continueBtn = document.getElementById("continue"); 36 var icbWidth = 0; 37 var icbHeight = 0; 38 39 function continueTest() { 40 nextStep(function(instructionText) { 41 var instruction = document.getElementById("instruction"); 42 continueBtn.innerText = "Continue"; 43 instruction.innerText = instructionText; 44 }); 45 } 46 47 continueBtn.addEventListener('click', continueTest); 48 49 addManualTestStep( 50 function() {}, 51 null, 52 '1. Ensure the browser is at the default pinch and browser zoom ' + 53 'levels (100%). Most browsers: ctrl+0'); 54 55 addManualTestStep( 56 showPinchWidget.bind(null, 1.5, 0, 0, continueTest), 57 null, 58 '2.Follow instructions on pinch zoom dialog.'); 59 60 addManualTestStep( 61 function() { 62 continueBtn.style.position = "absolute"; 63 continueBtn.style.left = "400%"; 64 continueBtn.style.top = "400%"; 65 66 assert_approx_equals(window.visualViewport.scale, 1.5, 0.2, 67 "window.visualViewport.scale reflects pinch-zoom level"); 68 }, 69 'Tester pinch zoomed in correctly', 70 '3. Scroll fully to the bottom right. Click the continue button there.'); 71 72 addManualTestStep( 73 function() { 74 var expectedLeft = 75 document.documentElement.clientWidth * 4 + 76 continueBtn.clientWidth - 77 window.visualViewport.width; 78 var expectedTop = 79 document.documentElement.clientHeight * 4 + 80 continueBtn.clientHeight - 81 window.visualViewport.height; 82 var viewPageLeft = window.visualViewport.pageLeft; 83 var viewPageTop = window.visualViewport.pageTop; 84 85 // This needs to happen before assertions in case they fail. A 86 // failed assertion stops running this function. 87 continueBtn.style.position = ""; 88 continueBtn.style.left = ""; 89 continueBtn.style.top = ""; 90 91 window.scrollTo(0, 0); 92 93 assert_approx_equals(viewPageLeft, expectedLeft, 10, 94 "window.visualViewport.scale reflects pinch-zoom level"); 95 assert_approx_equals(viewPageTop, expectedTop, 10, 96 "window.visualViewport.scale reflects pinch-zoom level"); 97 }, 98 'PageLeft and PageTop correct when scrolled', 99 '4. Pinch-zoom out fully'); 100 101 addManualTestStep( 102 function() { 103 continueBtn.remove(); 104 }, 105 null, 106 'Test Complete'); 107 </script> 108 </html>