viewport-resize-event-manual.html (2948B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Window Resize Fires Event</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, explicit_done: true}) 12 </script> 13 </head> 14 <body> 15 <h1>Viewport: Window Resize Fires Event</h1> 16 <h4> 17 Test Description: This test checks that a resize event is fired against 18 the window.visualViewport object when the browser window is resized. 19 </h4> 20 <h2 style="color: red">THIS IS A MANUAL TEST</h2> 21 <p id="skip"> 22 <button id="skipbtn" onclick="skipManualTest();">Skip Test</button> 23 </p> 24 <p id="instruction"></p> 25 <button id="continue">Start Test</button> 26 <div id="log"></div> 27 </body> 28 <script> 29 var continueBtn = document.getElementById("continue"); 30 31 function continueTest() { 32 nextStep(function(instructionText) { 33 var instruction = document.getElementById("instruction"); 34 continueBtn.innerText = "Continue"; 35 instruction.innerText = instructionText; 36 }); 37 } 38 39 continueBtn.addEventListener('click', continueTest); 40 41 var didResizeView; 42 var cancelable; 43 var bubbles; 44 45 function resetValues() { 46 didResizeView = false; 47 cancelable = undefined; 48 bubbles = undefined; 49 } 50 51 addManualTestStep( 52 function() { 53 resetValues(); 54 window.visualViewport.addEventListener('resize', function(e) { 55 didResizeView = true; 56 cancelable = e.cancelable; 57 bubbles = e.bubbles; 58 }); 59 }, 60 null, 61 '1. Resize the browser window (if on mobile, rotate the device)'); 62 63 64 addManualTestStep( 65 function() { 66 assert_true(didResizeView); 67 assert_false(cancelable); 68 assert_false(bubbles); 69 }, 70 'Resize event fired at window.visualViewport after window resized', 71 '2. Unrotate the device or reset window size if needed.'); 72 73 addManualTestStep( 74 resetValues, 75 null, 76 '3. Pinch-zoom anywhere on the page by any amount.'); 77 78 addManualTestStep( 79 function() { 80 assert_true(didResizeView); 81 assert_false(cancelable); 82 assert_false(bubbles); 83 }, 84 'Pinch-zooming fires a resize event', 85 '4. Pinch-zoom back out'); 86 87 addManualTestStep( 88 function() { continueBtn.remove(); }, 89 null, 90 'Test Complete'); 91 </script> 92 </html>