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