LayoutTests/platform/mac-wk2/tiled-drawing/scrolling/scroll-snap/scroll-snap-iframe.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: 2px;
  11             }
  12             .verticalGallery {
  13                 width: 300px;
  14                 height: 300px;
  15                 display: inline-block;
  16                 overflow-x: hidden;
  17                 overflow-y: auto;
  18                 margin: 2px;
  19             }
  20         </style>
  21         <script src="../../../../../resources/js-test-pre.js"></script>
  22         <script>
  23         var iframeScrollPositionBeforeGlide;
  24         var divScrollPositionBeforeSnap;
  25
  26         function locationInWindowCoordinates(element)
  27         {
  28             var position = {};
  29             position.x = element.offsetLeft;
  30             position.y = element.offsetTop;
  31
  32             while (element.offsetParent) {
  33                 position.x = position.x + element.offsetParent.offsetLeft;
  34                 position.y = position.y + element.offsetParent.offsetTop;
  35                 if (element == document.getElementsByTagName("body")[0])
  36                     break;
  37
  38                 element = element.offsetParent;
  39             }
  40
  41             return position;
  42         }
  43
  44         function finishTest()
  45         {
  46             finishJSTest();
  47             testRunner.notifyDone();
  48         }
  49
  50         function checkForScrollSnap(targetLabel)
  51         {
  52             var iframeTarget = document.getElementById(targetLabel);
  53
  54             var actualPosition = iframeTarget.scrollTop;
  55             if (targetLabel == 'horizontalTarget')
  56                 actualPosition = iframeTarget.scrollLeft;
  57
  58             // The div should have snapped back to the previous position
  59             if (actualPosition != divScrollPositionBeforeSnap)
  60                 testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
  61             else
  62                 testPassed("div honored snap points.");
  63
  64             if (targetLabel == 'horizontalTarget')
  65                 setTimeout(scrollGlideTest('verticalTarget'), 0);
  66             else
  67                 finishTest();
  68         }
  69
  70         function scrollSnapTest(targetLabel)
  71         {
  72             debug("Testing scroll-snap snap for " + targetLabel + ":");
  73             var iframeTarget = document.getElementById(targetLabel);
  74
  75             var dx = 0;
  76             var dy = 0;
  77             if (targetLabel == 'horizontalTarget') {
  78                 divScrollPositionBeforeSnap = iframeTarget.scrollLeft;
  79                 dx = -1;
  80             } else {
  81                 divScrollPositionBeforeSnap = iframeTarget.scrollTop;
  82                 dy = -1;
  83             }
  84
  85             var windowPosition = locationInWindowCoordinates(iframeTarget);
  86
  87             var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
  88             var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
  89             eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
  90             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
  91             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
  92             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
  93             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
  94             eventSender.callAfterScrollingCompletes(function() { return checkForScrollSnap(targetLabel); });
  95         }
  96
  97         function checkForScrollGlide(targetLabel)
  98         {
  99             var iframeTarget = document.getElementById(targetLabel);
 100             var iframeBody = window.frames[targetLabel].document.body;
 101
 102             var actualPosition = iframeBody.scrollTop;
 103             var expectedPosition = iframeTarget.clientHeight;
 104             if (targetLabel == 'horizontalTarget') {
 105                 actualPosition = iframeBody.scrollLeft;
 106                 expectedPosition = iframeTarget.clientWidth;
 107             }
 108
 109             // The div should have scrolled (glided) to the next snap point.
 110             if (actualPosition == expectedPosition)
 111                 testPassed("div scrolled to next window.");
 112             else
 113                 testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
 114
 115             setTimeout(scrollSnapTest(targetLabel), 0);
 116         }
 117
 118         function scrollGlideTest(targetLabel)
 119         {
 120             debug("Testing scroll-snap glide for " + targetLabel + ":");
 121             var iframeTarget = document.getElementById(targetLabel);
 122             var iframeBody = window.frames[targetLabel].document.body;
 123
 124             var dx = 0;
 125             var dy = 0;
 126             if (targetLabel == 'horizontalTarget') {
 127                 iframeScrollPositionBeforeGlide = iframeBody.scrollLeft;
 128                 dx = -1;
 129             } else {
 130                 iframeScrollPositionBeforeGlide = iframeBody.scrollTop;
 131                 dy = -1;
 132             }
 133
 134             var windowPosition = locationInWindowCoordinates(iframeTarget);
 135
 136             var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
 137             var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
 138             eventSender.mouseMoveTo(startPosX, startPosY);
 139             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none', false);
 140             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
 141             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
 142             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none', false);
 143             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none', false);
 144             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin', false);
 145             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
 146             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
 147             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
 148             eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue', false);
 149             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end', false);
 150             eventSender.callAfterScrollingCompletes(function() { return checkForScrollGlide(targetLabel); });
 151         }
 152
 153         function onLoad()
 154         {
 155             if (window.eventSender) {
 156                 window.jsTestIsAsync = true;
 157                 testRunner.dumpAsText();
 158                 testRunner.waitUntilDone();
 159
 160                 eventSender.monitorWheelEvents();
 161                 setTimeout(scrollGlideTest('horizontalTarget'), 0);
 162             }
 163         }
 164         </script>
 165     </head>
 166     <body onload="onLoad();">
 167         <div style="position: relative; width: 300px;">
 168             <div>Tests that the scroll-snap feature works properly in iframes.</div>
 169             <iframe id="horizontalTarget" class="horizontalGallery" src="resources/horizontal-mainframe.html" style="height: 300px; width: 300px"></iframe>
 170             <iframe id="verticalTarget" class="verticalGallery" src="resources/vertical-mainframe.html"  style="height: 300px; width: 300px"></iframe>
 171             <div id="console"></div>
 172         </div>
 173         <script src="../../../../../resources/js-test-post.js"></script>
 174     </body>
 175 </html>