viewport-url-bar-changes-height-manual.html (2957B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: URL bar changes height</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width"> 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_timeout: true}); 12 </script> 13 <style> 14 body { 15 margin-bottom: 1000px; 16 } 17 </style> 18 </head> 19 <body> 20 <h1>Viewport: URL bar changes height</h1> 21 <h4> 22 Test Description: This test checks that hiding the URL bar correctly 23 affects the visualViewport height. Skip if the UA doesn't have a URL bar 24 that hides/shows with scrolling. 25 </h4> 26 <h2 style="color: red">THIS IS A MANUAL TEST</h2> 27 <p id="skip"> 28 <button id="skipbtn" onclick="skipManualTest();">Skip Test</button> 29 </p> 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 37 function continueTest() { 38 nextStep(function(instructionText) { 39 var instruction = document.getElementById("instruction"); 40 continueBtn.innerText = "Continue"; 41 instruction.innerText = instructionText; 42 }); 43 } 44 45 continueBtn.addEventListener('click', continueTest); 46 47 var heights = [ window.visualViewport.height ]; 48 49 addManualTestStep( 50 function() { 51 window.visualViewport.addEventListener('resize', function(e) { 52 heights.push( window.visualViewport.height ); 53 }); 54 }, 55 null, 56 '1. Scroll down (slowly, e.g. over ~1 sec) so the URL bar hides.'); 57 58 addManualTestStep( 59 function() { 60 continueBtn.remove(); 61 assert_greater_than( 62 heights.length, 2, 'URL bar caused multiple resize events'); 63 64 var smallest = heights[0]; 65 var largest = heights[0]; 66 for (var height in heights) { 67 if (height < smallest) 68 smallest = height; 69 if (height > largest) 70 largest = height; 71 } 72 73 var hasIntermediate = false; 74 for (var height in heights) { 75 if (height != smallest && height != largest) { 76 hasIntermediate = true; 77 break; 78 } 79 } 80 assert_true( 81 hasIntermediate, 82 'Resize fired for intermediate viewport height values'); 83 }, 84 'URL bar updates height continually', 85 'Test Complete'); 86 </script> 87 </html>