LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-borders.html

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <style>
   5             .horizontalGallery {
   6                 width: 300px;
   7                 height: 300px;
   8                 overflow-y: hidden;
   9                 overflow-x: auto;
  10                 border-top: 20px solid black;
  11                 border-bottom: 10px solid black;
  12                 border-left: 15px solid black;
  13                 border-right: 9px solid black;
  14                 margin-bottom: 2px;
  15                 -webkit-overflow-scrolling: touch;
  16                 -webkit-scroll-snap-points-x: repeat(100%);
  17                 -webkit-scroll-snap-type: mandatory;
  18             }
  19             .horizontalGalleryDrawer {
  20                 width: 1800px;
  21                 height: 300px;
  22             }
  23             .verticalGallery {
  24                 width: 300px;
  25                 height: 300px;
  26                 display: inline-block;
  27                 overflow-x: hidden;
  28                 overflow-y: auto;
  29                 border-top: 20px solid black;
  30                 border-bottom: 10px solid black;
  31                 border-left: 15px solid black;
  32                 border-right: 9px solid black;
  33                 margin-top: 2px;
  34                 -webkit-overflow-scrolling: touch;
  35                 -webkit-scroll-snap-points-y: repeat(100%);
  36                 -webkit-scroll-snap-type: mandatory;
  37             }
  38             .verticalGalleryDrawer {
  39                 width: 300px;
  40                 height: 1800px;
  41             }
  42             .colorBox {
  43                 height: 300px;
  44                 width: 300px;
  45                 float: left;
  46             }
  47             #itemH0, #itemV0 { background-color: red; }
  48             #itemH1, #itemV1 { background-color: green; }
  49             #itemH2, #itemV2 { background-color: blue; }
  50             #itemH3, #itemV3 { background-color: aqua; }
  51             #itemH4, #itemV4 { background-color: yellow; }
  52             #itemH5, #itemV5 { background-color: fuchsia; }
  53         </style>
  54         <script src="../../../resources/js-test.js"></script>
  55         <script>
  56         window.jsTestIsAsync = true;
  57
  58         var divScrollPositionBeforeGlide;
  59         var divScrollPositionBeforeSnap;
  60
  61         function locationInWindowCoordinates(element)
  62         {
  63             var position = {};
  64             position.x = element.offsetLeft;
  65             position.y = element.offsetTop;
  66
  67             while (element.offsetParent) {
  68                 position.x = position.x + element.offsetParent.offsetLeft;
  69                 position.y = position.y + element.offsetParent.offsetTop;
  70                 if (element == document.getElementsByTagName("body")[0])
  71                     break;
  72
  73                 element = element.offsetParent;
  74             }
  75
  76             return position;
  77         }
  78
  79         function checkForScrollSnap(targetLabel)
  80         {
  81             var divTarget = document.getElementById(targetLabel);
  82
  83             var actualPosition = divTarget.scrollTop;
  84             if (targetLabel == 'horizontalTarget')
  85                 actualPosition = divTarget.scrollLeft;
  86
  87             // The div should have snapped back to the previous position
  88             if (actualPosition != divScrollPositionBeforeSnap)
  89                 testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
  90             else
  91                 testPassed("div honored snap points.");
  92
  93             if (targetLabel == 'horizontalTarget')
  94                 setTimeout(function() { scrollGlideTest('verticalTarget') }, 0);
  95             else
  96                 finishJSTest();
  97         }
  98
  99         function scrollSnapTest(targetLabel)
 100         {
 101             debug("Testing scroll-snap snap for " + targetLabel + ":");
 102             var divTarget = document.getElementById(targetLabel);
 103
 104             var dx = 0;
 105             var dy = 0;
 106             if (targetLabel == 'horizontalTarget') {
 107                 divScrollPositionBeforeSnap = divTarget.scrollLeft;
 108                 dx = -1;
 109             } else {
 110                 divScrollPositionBeforeSnap = divTarget.scrollTop;
 111                 dy = -1;
 112             }
 113
 114             var windowPosition = locationInWindowCoordinates(divTarget);
 115
 116             var startPosX = windowPosition.x + 0.5 * divTarget.clientWidth;
 117             var startPosY = windowPosition.y + 0.5 * divTarget.clientHeight;
 118             eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
 119             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
 120             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
 121             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
 122             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
 123             eventSender.callAfterScrollingCompletes(function() { return checkForScrollSnap(targetLabel); });
 124         }
 125
 126         function checkForScrollGlide(targetLabel)
 127         {
 128             var divTarget = document.getElementById(targetLabel);
 129
 130             var actualPosition = divTarget.scrollTop;
 131             var expectedPosition = divTarget.clientHeight;
 132             if (targetLabel == 'horizontalTarget') {
 133                 actualPosition = divTarget.scrollLeft;
 134                 expectedPosition = divTarget.clientWidth;
 135             }
 136
 137             // The div should have scrolled (glided) to the next snap point.
 138             if (actualPosition == expectedPosition)
 139                 testPassed("div scrolled to next window.");
 140             else
 141                 testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
 142
 143             setTimeout(function() { scrollSnapTest(targetLabel) }, 0);
 144         }
 145
 146         function scrollGlideTest(targetLabel)
 147         {
 148             debug("Testing scroll-snap glide for " + targetLabel + ":");
 149             var divTarget = document.getElementById(targetLabel);
 150
 151             var dx = 0;
 152             var dy = 0;
 153             if (targetLabel == 'horizontalTarget') {
 154                 divScrollPositionBeforeGlide = divTarget.scrollLeft;
 155                 dx = -1;
 156             } else {
 157                 divScrollPositionBeforeGlide = divTarget.scrollTop;
 158                 dy = -1;
 159             }
 160
 161             var windowPosition = locationInWindowCoordinates(divTarget);
 162
 163             var startPosX = windowPosition.x + divTarget.clientWidth - 10;
 164             var startPosY = windowPosition.y + 50;
 165             eventSender.mouseMoveTo(startPosX, startPosY);
 166             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
 167             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
 168             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
 169             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
 170             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
 171             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin');
 172             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue');
 173             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
 174             eventSender.callAfterScrollingCompletes(function() { return checkForScrollGlide(targetLabel); });
 175         }
 176
 177         function onLoad()
 178         {
 179             if (window.eventSender) {
 180                 eventSender.monitorWheelEvents();
 181                 setTimeout(function() { scrollGlideTest('horizontalTarget') }, 0);
 182             } else {
 183                 var messageLocationH = document.getElementById('itemH0');
 184                 var message = document.createElement('div');
 185                 message.innerHTML = "<p>This test is better run under DumpRenderTree.<br/>To manually test it, place the mouse pointer<br/>"
 186                     + "inside the red region at the top of the page,<br/>and then use the mouse wheel or a two-finger<br/>swipe to make a"
 187                     + "small swipe gesture with<br/>some momentum.<br/><br/>"
 188                     + "The region should scroll to show a green region.<br/><br/>"
 189                     + "Next, perform a small scroll gesture that does<br/>not involve momentum. You should begin to<br/>see one of the colors "
 190                     + "to the side of the current<br/>green box. When you release the wheel, the<br/>region should scroll back to a single color.";
 191                 messageLocationH.appendChild(message);
 192
 193                 var messageLocationV = document.getElementById('itemV0');
 194                 var message = document.createElement('div');
 195                 message.innerHTML = "<p>You should also be able to repeat these tests steps for this vertical region.<br/>"
 196                 messageLocationV.appendChild(message);
 197             }
 198         }
 199         </script>
 200     </head>
 201     <body onload="onLoad();">
 202         <div style="position: relative; width: 300px">
 203             <div>Tests that the scroll-snap feature works properly in overflow regions.</div>
 204             <div class="horizontalGallery" id="horizontalTarget">
 205                 <div class="horizontalGalleryDrawer">
 206                     <div id="itemH0" class="colorBox"></div>
 207                     <div id="itemH1" class="colorBox"></div>
 208                     <div id="itemH2" class="colorBox"></div>
 209                     <div id="itemH3" class="colorBox"></div>
 210                     <div id="itemH4" class="colorBox"></div>
 211                     <div id="itemH5" class="colorBox"></div>
 212                 </div>
 213             </div>
 214             <div class="verticalGallery" id="verticalTarget">
 215                 <div class="verticalGalleryDrawer">
 216                     <div id="itemV0" class="colorBox"></div>
 217                     <div id="itemV1" class="colorBox"></div>
 218                     <div id="itemV2" class="colorBox"></div>
 219                     <div id="itemV3" class="colorBox"></div>
 220                     <div id="itemV4" class="colorBox"></div>
 221                     <div id="itemV5" class="colorBox"></div>
 222                 </div>
 223             </div>
 224             <div id="console"></div>
 225         </div>
 226     </body>
 227 </html>