viewport-scroll-event-manual.html (6478B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Scroll Event</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_timeout: true, explicit_done: true}) 12 </script> 13 <style> 14 html { 15 width: 100%; 16 height: 100%; 17 } 18 </style> 19 </head> 20 <body> 21 <h1>Viewport: Scroll Event</h1> 22 <h4> 23 Test Description: This test checks that a scroll event is fired against 24 the window.visualViewport object when the viewport is scrolled. 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 <h4>Instruction</h4> 31 <p id="instruction"></p> 32 <button id="continue">Start Test</button> 33 <div id="log"></div> 34 </body> 35 <script> 36 var continueBtn = document.getElementById("continue"); 37 38 function continueTest() { 39 nextStep(function(instructionText) { 40 var instruction = document.getElementById("instruction"); 41 continueBtn.innerText = "Continue"; 42 instruction.innerText = instructionText; 43 }); 44 } 45 46 continueBtn.addEventListener('click', continueTest); 47 48 var didGetScrollEvent = false; 49 var cancelable = undefined; 50 var bubbles = undefined; 51 52 function resetValues() { 53 didGetScrollEvent = false; 54 cancelable = undefined; 55 bubbles = undefined; 56 } 57 58 addManualTestStep( 59 function() { 60 window.visualViewport.addEventListener('scroll', function(e) { 61 didGetScrollEvent = true; 62 cancelable = e.cancelable; 63 bubbles = e.bubbles; 64 }); 65 document.documentElement.style.overflow = "hidden"; 66 }, 67 null, 68 '1. Pinch-zoom a little near the "Continue" button but don\'t ' + 69 'perform any scrolling.'); 70 71 addManualTestStep( 72 function() { 73 requestAnimationFrame(continueTest); 74 assert_true(didGetScrollEvent, "Got event"); 75 assert_false(cancelable, "Event is not cancelable"); 76 assert_false(bubbles, "Event does not bubble"); 77 }, 78 'Got scroll event while pinch-zooming', 79 ''); 80 81 addManualTestStep( 82 resetValues, 83 null, 84 '2. Scroll in any direction.'); 85 86 addManualTestStep( 87 function() { 88 requestAnimationFrame(continueTest); 89 assert_true(didGetScrollEvent, "Got event"); 90 assert_false(cancelable, "Event is not cancelable"); 91 assert_false(bubbles, "Event does not bubble"); 92 }, 93 'Panning viewport fires a scroll event', 94 ''); 95 96 addManualTestStep( 97 function() { 98 continueBtn.style.position = "absolute"; 99 continueBtn.style.right = "10px"; 100 continueBtn.style.bottom = "10px"; 101 }, 102 null, 103 '3. Scroll fully to the bottom right and click the continue ' + 104 'button.'); 105 106 var offsetLeft; 107 var offsetTop; 108 addManualTestStep( 109 function() { 110 resetValues(); 111 document.documentElement.style.overflow = ""; 112 document.body.style.width = "500%"; 113 document.body.style.height = "500%"; 114 continueBtn.style.position = ""; 115 continueBtn.style.left = ""; 116 continueBtn.style.top = ""; 117 118 offsetLeft = window.visualViewport.offsetLeft; 119 offsetTop = window.visualViewport.offsetTop; 120 121 // The visual viewport should be fully scrolled so even if 122 // scrollTo does normally "push" the layout viewport with the 123 // visual, there should be no change to either offsetValue 124 window.scrollTo(10000, 10000); 125 126 requestAnimationFrame(continueTest); 127 assert_equals(window.visualViewport.offsetLeft, offsetLeft, 128 "OffsetLeft Unchanged"); 129 assert_equals(window.visualViewport.offsetTop, offsetTop, 130 "OffsetTop Unchanged"); 131 assert_false(didGetScrollEvent, 132 "Should not get view scroll event"); 133 }, 134 'scrollTo down and right on a fully scrolled visual viewport ' + 135 'shouldn\'t change offsets', 136 ''); 137 138 addManualTestStep( 139 function() { 140 requestAnimationFrame(continueTest); 141 assert_false(didGetScrollEvent, 142 "Should not get view scroll event"); 143 resetValues(); 144 }, 145 'scrollTo without changing offsets shouldn\'t fire scroll event ' + 146 'on view', 147 ''); 148 149 addManualTestStep( 150 function() { 151 requestAnimationFrame(continueTest); 152 resetValues(); 153 window.scrollTo(0, 0); 154 }, 155 null, 156 ''); 157 158 addManualTestStep( 159 function() { 160 // How scrollTo behaves in this case isn't fully spec'd but 161 // make sure it's at least rational if it does change the 162 // offset values. 163 var scrollChangedOffset = 164 offsetLeft != window.visualViewport.offsetLeft || 165 offsetTop != window.visualViewport.offsetTop; 166 167 document.body.style.width = ""; 168 document.body.style.height = ""; 169 170 assert_equals(didGetScrollEvent, scrollChangedOffset, 171 'If the scrollTo changed offsets it must have fired a ' + 172 'scroll event'); 173 }, 174 'scrollTo must fire scroll event if it changes visualViewport.offsetLeft|Top', 175 '6. Pinch-zoom out fully'); 176 177 addManualTestStep( 178 function() { continueBtn.remove(); }, 179 null, 180 'Test Complete'); 181 </script> 182 </html>