LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-mandatory-2d-overflow.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
     <head>
         <style>
             #grid-container {
                 width: 415px;
                 height: 415px;
                 overflow: scroll;
                 white-space: nowrap;
                 -webkit-overflow-scrolling: touch;
                 scroll-snap-type: both mandatory;
                 line-height: 0px;
             }

             .cell {
                 width: 400px;
                 height: 400px;
                 display: inline-block;
                 scroll-snap-align: start;
                 background-color: red;
                 margin: 0;
                 padding: 0;
                 position: relative;
             }

             #green {
                 background-color: green;
             }

             #snap-from > p {
                 position: absolute;
                 top: 0px;
                 left: 10px;
                 margin-top: 0px;
             }
         </style>
         <script src="../../../resources/js-test.js"></script>
         <script>
         window.jsTestIsAsync = true;

         var divTarget;
         var divScrollPositionBeforeGlide;
         var divScrollPositionBeforeSnap;
         var divScrollPositionBeforeSingleAxisGlide;

         function checkForSingleAxisGlide() {
             if (divTarget.scrollTop == divScrollPositionBeforeSingleAxisGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeSingleAxisGlide.x)
                 testPassed("div successfully snapped after dragging along one axis and then scrolling in the other.");
             else
                 testFailed("div did not honor 2D snap points. (single axis scroll followed by flick on other axis)");
             finishJSTest();
         }

         function scrollAndGlideInSingleAxisTest() {
             divScrollPositionBeforeSingleAxisGlide = {
                 x: divTarget.scrollLeft,
                 y: divTarget.scrollTop
             };

             eventSender.monitorWheelEvents();
             eventSender.mouseMoveTo(100, 100);
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "begin");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
             eventSender.callAfterScrollingCompletes(checkForSingleAxisGlide);
         }

         function checkForScrollSnap() {
             if (divTarget.scrollTop == divScrollPositionBeforeSnap.y && divTarget.scrollLeft == divScrollPositionBeforeSnap.x)
                 testPassed("div successfully snapped diagonally.");
             else
                 testFailed("div did not honor 2D snap points. (diagonal snap)");
             setTimeout(scrollAndGlideInSingleAxisTest, 0);
         }

         function scrollSnapTest() {
             divScrollPositionBeforeSnap = {
                 x: divTarget.scrollLeft,
                 y: divTarget.scrollTop
             };

             eventSender.monitorWheelEvents();
             eventSender.mouseMoveTo(100, 100);
             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "began", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
             eventSender.callAfterScrollingCompletes(checkForScrollSnap);
         }

         function checkForScrollGlide() {
             // The div should have scrolled (glided) to the next snap point.
             if (divTarget.scrollTop == divScrollPositionBeforeGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeGlide.x + 400)
                 testPassed("div successfully scrolled diagonally.");
             else
                 testFailed("div did not honor 2D snap points. (diagonal glide)");
             setTimeout(scrollSnapTest, 0);
         }

         function scrollGlideTest() {
             divTarget = document.getElementById("grid-container");
             divScrollPositionBeforeGlide = {
                 x: divTarget.scrollLeft,
                 y: divTarget.scrollTop
             };

             eventSender.monitorWheelEvents();
             eventSender.mouseMoveTo(100, 100);
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "began", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "begin");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue");
             eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
             eventSender.callAfterScrollingCompletes(checkForScrollGlide);
         }

         function onLoad() {
             if (window.eventSender) {
                 internals.setPlatformMomentumScrollingPredictionEnabled(false);
                 setTimeout(scrollGlideTest, 0);
             } else {
                 var messageLocation = document.getElementById("snap-from");
                 var message = document.createElement("p");
                 message.innerHTML = "<p>This test is better run under DumpRenderTree." +
                 "</p><p>To manually test it, place the mouse pointer inside the" +
                 "</p><p>red box and perform a small swipe to the lower right" +
                 "</p><p>with some momentum. The grid should scroll to show a" +
                 "</p><p>green cell. Then scroll a bit to the upper left and" +
                 "</p><p>release without momentum. It should snap back to show" +
                 "</p><p>the green cell. Finally, drag slightly to the right and" +
                 "</p><p>then directly down. It should snap to reveal another" +
                 "</p><p>green cell directly below the previous one.</p>"
                 messageLocation.appendChild(message);
             }
         }
         </script>
     </head>
     <body onload="onLoad();">
         <div id="grid-container">
             <div class="cell" id="snap-from"></div><div class="cell"></div><div class="cell"></div><br/>
             <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div><br/>
             <div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div>
         </div>
     </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	#grid-container {
	width: 415px;
	height: 415px;
	overflow: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: both mandatory;
	line-height: 0px;
	}

	.cell {
	width: 400px;
	height: 400px;
	display: inline-block;
	scroll-snap-align: start;
	background-color: red;
	margin: 0;
	padding: 0;
	position: relative;
	}

	#green {
	background-color: green;
	}

	#snap-from > p {
	position: absolute;
	top: 0px;
	left: 10px;
	margin-top: 0px;
	}
	</style>
	<script src="../../../resources/js-test.js"></script>
	<script>
	window.jsTestIsAsync = true;

	var divTarget;
	var divScrollPositionBeforeGlide;
	var divScrollPositionBeforeSnap;
	var divScrollPositionBeforeSingleAxisGlide;

	function checkForSingleAxisGlide() {
	if (divTarget.scrollTop == divScrollPositionBeforeSingleAxisGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeSingleAxisGlide.x)
	testPassed("div successfully snapped after dragging along one axis and then scrolling in the other.");
	else
	testFailed("div did not honor 2D snap points. (single axis scroll followed by flick on other axis)");
	finishJSTest();
	}

	function scrollAndGlideInSingleAxisTest() {
	divScrollPositionBeforeSingleAxisGlide = {
	x: divTarget.scrollLeft,
	y: divTarget.scrollTop
	};

	eventSender.monitorWheelEvents();
	eventSender.mouseMoveTo(100, 100);
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "began", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, 0, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "begin");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, "none", "continue");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
	eventSender.callAfterScrollingCompletes(checkForSingleAxisGlide);
	}

	function checkForScrollSnap() {
	if (divTarget.scrollTop == divScrollPositionBeforeSnap.y && divTarget.scrollLeft == divScrollPositionBeforeSnap.x)
	testPassed("div successfully snapped diagonally.");
	else
	testFailed("div did not honor 2D snap points. (diagonal snap)");
	setTimeout(scrollAndGlideInSingleAxisTest, 0);
	}

	function scrollSnapTest() {
	divScrollPositionBeforeSnap = {
	x: divTarget.scrollLeft,
	y: divTarget.scrollTop
	};

	eventSender.monitorWheelEvents();
	eventSender.mouseMoveTo(100, 100);
	eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "began", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(1, 1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
	eventSender.callAfterScrollingCompletes(checkForScrollSnap);
	}

	function checkForScrollGlide() {
	// The div should have scrolled (glided) to the next snap point.
	if (divTarget.scrollTop == divScrollPositionBeforeGlide.y + 400 && divTarget.scrollLeft == divScrollPositionBeforeGlide.x + 400)
	testPassed("div successfully scrolled diagonally.");
	else
	testFailed("div did not honor 2D snap points. (diagonal glide)");
	setTimeout(scrollSnapTest, 0);
	}

	function scrollGlideTest() {
	divTarget = document.getElementById("grid-container");
	divScrollPositionBeforeGlide = {
	x: divTarget.scrollLeft,
	y: divTarget.scrollTop
	};

	eventSender.monitorWheelEvents();
	eventSender.mouseMoveTo(100, 100);
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "began", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "changed", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "ended", "none");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "begin");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(-1, -1, "none", "continue");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, "none", "end");
	eventSender.callAfterScrollingCompletes(checkForScrollGlide);
	}

	function onLoad() {
	if (window.eventSender) {
	internals.setPlatformMomentumScrollingPredictionEnabled(false);
	setTimeout(scrollGlideTest, 0);
	} else {
	var messageLocation = document.getElementById("snap-from");
	var message = document.createElement("p");
	message.innerHTML = "<p>This test is better run under DumpRenderTree." +
	"</p><p>To manually test it, place the mouse pointer inside the" +
	"</p><p>red box and perform a small swipe to the lower right" +
	"</p><p>with some momentum. The grid should scroll to show a" +
	"</p><p>green cell. Then scroll a bit to the upper left and" +
	"</p><p>release without momentum. It should snap back to show" +
	"</p><p>the green cell. Finally, drag slightly to the right and" +
	"</p><p>then directly down. It should snap to reveal another" +
	"</p><p>green cell directly below the previous one.</p>"
	messageLocation.appendChild(message);
	}
	}
	</script>
	</head>
	<body onload="onLoad();">
	<div id="grid-container">
	<div class="cell" id="snap-from"></div><div class="cell"></div><div class="cell"></div><br/>
	<div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div><br/>
	<div class="cell"></div><div class="cell" id="green"></div><div class="cell"></div>
	</div>
	</body>
	</html>