testing/web-platform/tests/visual-viewport/viewport-scroll-event-manual.html

   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>