LayoutTests/tiled-drawing/scrolling/scroll-snap/scroll-snap-async-iframe.html - WebKit - Git at Google

 <!DOCTYPE html> <!-- webkit-test-runner [ AsyncFrameScrollingEnabled=true ] -->
 <!DOCTYPE html>
 <html>
 <head>
     <style>
         iframe {
             display: block;
             width: 400px;
             height: 250px;
             margin: 5px;
         }

         /* It's important for the test that the main frame does not become scrollable */
         #console {
             height: 1em;
             overflow: hidden;
         }
     </style>
     <script src="../../../resources/js-test-pre.js"></script>
     <script src="../../../resources/ui-helper.js"></script>

     <script>
     window.jsTestIsAsync = true;

     var iframeScrollPositionBeforeGlide;
     var divScrollPositionBeforeSnap;

     function locationInWindowCoordinates(element)
     {
         var position = {};
         position.x = element.offsetLeft;
         position.y = element.offsetTop;

         while (element.offsetParent) {
             position.x = position.x + element.offsetParent.offsetLeft;
             position.y = position.y + element.offsetParent.offsetTop;
             if (element == document.getElementsByTagName("body")[0])
                 break;

             element = element.offsetParent;
         }

         return position;
     }

     function checkForScrollSnap(targetLabel)
     {
         var iframeTarget = document.getElementById(targetLabel);

         var actualPosition = iframeTarget.scrollTop;
         if (targetLabel == 'horizontalTarget')
             actualPosition = iframeTarget.scrollLeft;

         // The div should have snapped back to the previous position
         if (actualPosition != divScrollPositionBeforeSnap)
             testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
         else
             testPassed("div honored snap points.");
     }

     async function scrollSnapTest(targetLabel)
     {
         debug("Testing scroll-snap snap for " + targetLabel + ":");
         var iframeTarget = document.getElementById(targetLabel);

         var dx = 0;
         var dy = 0;
         if (targetLabel == 'horizontalTarget') {
             divScrollPositionBeforeSnap = iframeTarget.scrollLeft;
             dx = -1;
         } else {
             divScrollPositionBeforeSnap = iframeTarget.scrollTop;
             dy = -1;
         }

         var windowPosition = locationInWindowCoordinates(iframeTarget);

         var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
         var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
         eventSender.monitorWheelEvents();
         eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');

         await UIHelper.waitForScrollCompletion();
         checkForScrollSnap(targetLabel);
     }

     function checkForScrollGlide(targetLabel)
     {
         var iframeTarget = document.getElementById(targetLabel);
         var iframeScrollingElement = window.frames[targetLabel].contentDocument.scrollingElement;

         var actualPosition = iframeScrollingElement.scrollTop;
         var expectedPosition = iframeTarget.clientHeight;
         if (targetLabel == 'horizontalTarget') {
             actualPosition = iframeScrollingElement.scrollLeft;
             expectedPosition = iframeTarget.clientWidth;
         }

         // The div should have scrolled (glided) to the next snap point.
         if (actualPosition == expectedPosition)
             testPassed("div scrolled to next window.");
         else
             testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
     }

     async function scrollGlideTest(targetLabel)
     {
         debug("Testing scroll-snap glide for " + targetLabel + ":");
         var iframeTarget = document.getElementById(targetLabel);
         var iframeScrollingElement = window.frames[targetLabel].contentDocument.scrollingElement;

         var dx = 0;
         var dy = 0;
         if (targetLabel == 'horizontalTarget') {
             iframeScrollPositionBeforeGlide = iframeScrollingElement.scrollLeft;
             dx = -1;
         } else {
             iframeScrollPositionBeforeGlide = iframeScrollingElement.scrollTop;
             dy = -1;
         }

         if (!eventSender)
             return;

         var windowPosition = locationInWindowCoordinates(iframeTarget);

         var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
         var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
         eventSender.monitorWheelEvents();
         eventSender.mouseMoveTo(startPosX, startPosY);
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue');
         eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');

         await UIHelper.waitForScrollCompletion();
         checkForScrollGlide(targetLabel);
     }

     async function runTests()
     {
         await scrollGlideTest('horizontalTarget');
         await scrollSnapTest('horizontalTarget');

         await scrollGlideTest('verticalTarget');
         await scrollSnapTest('verticalTarget');

         finishJSTest();
     }

     window.addEventListener('load', () => {
         if (window.internals)
             internals.setPlatformMomentumScrollingPredictionEnabled(false);
         setTimeout(runTests, 0);
     }, false);
     </script>
 </head>
 <body>
     <div>Tests that the scroll-snap feature works properly in iframes.</div>
     <iframe id="horizontalTarget" class="horizontalGallery" src="resources/horizontal-mainframe.html"></iframe>
     <iframe id="verticalTarget" class="verticalGallery" src="resources/vertical-mainframe.html"></iframe>
     <div id="console"></div>
 <script src="../../../resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE html> <!-- webkit-test-runner [ AsyncFrameScrollingEnabled=true ] -->
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	iframe {
	display: block;
	width: 400px;
	height: 250px;
	margin: 5px;
	}

	/* It's important for the test that the main frame does not become scrollable */
	#console {
	height: 1em;
	overflow: hidden;
	}
	</style>
	<script src="../../../resources/js-test-pre.js"></script>
	<script src="../../../resources/ui-helper.js"></script>

	<script>
	window.jsTestIsAsync = true;

	var iframeScrollPositionBeforeGlide;
	var divScrollPositionBeforeSnap;

	function locationInWindowCoordinates(element)
	{
	var position = {};
	position.x = element.offsetLeft;
	position.y = element.offsetTop;

	while (element.offsetParent) {
	position.x = position.x + element.offsetParent.offsetLeft;
	position.y = position.y + element.offsetParent.offsetTop;
	if (element == document.getElementsByTagName("body")[0])
	break;

	element = element.offsetParent;
	}

	return position;
	}

	function checkForScrollSnap(targetLabel)
	{
	var iframeTarget = document.getElementById(targetLabel);

	var actualPosition = iframeTarget.scrollTop;
	if (targetLabel == 'horizontalTarget')
	actualPosition = iframeTarget.scrollLeft;

	// The div should have snapped back to the previous position
	if (actualPosition != divScrollPositionBeforeSnap)
	testFailed("div did not snap back to proper location for " + targetLabel +". Expected " + divScrollPositionBeforeSnap + ", but got " + actualPosition);
	else
	testPassed("div honored snap points.");
	}

	async function scrollSnapTest(targetLabel)
	{
	debug("Testing scroll-snap snap for " + targetLabel + ":");
	var iframeTarget = document.getElementById(targetLabel);

	var dx = 0;
	var dy = 0;
	if (targetLabel == 'horizontalTarget') {
	divScrollPositionBeforeSnap = iframeTarget.scrollLeft;
	dx = -1;
	} else {
	divScrollPositionBeforeSnap = iframeTarget.scrollTop;
	dy = -1;
	}

	var windowPosition = locationInWindowCoordinates(iframeTarget);

	var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
	var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
	eventSender.monitorWheelEvents();
	eventSender.mouseMoveTo(startPosX, startPosY); // Make sure we are just outside the iFrame
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');

	await UIHelper.waitForScrollCompletion();
	checkForScrollSnap(targetLabel);
	}

	function checkForScrollGlide(targetLabel)
	{
	var iframeTarget = document.getElementById(targetLabel);
	var iframeScrollingElement = window.frames[targetLabel].contentDocument.scrollingElement;

	var actualPosition = iframeScrollingElement.scrollTop;
	var expectedPosition = iframeTarget.clientHeight;
	if (targetLabel == 'horizontalTarget') {
	actualPosition = iframeScrollingElement.scrollLeft;
	expectedPosition = iframeTarget.clientWidth;
	}

	// The div should have scrolled (glided) to the next snap point.
	if (actualPosition == expectedPosition)
	testPassed("div scrolled to next window.");
	else
	testFailed("div did not honor snap points. Expected " + expectedPosition + ", but got " + actualPosition);
	}

	async function scrollGlideTest(targetLabel)
	{
	debug("Testing scroll-snap glide for " + targetLabel + ":");
	var iframeTarget = document.getElementById(targetLabel);
	var iframeScrollingElement = window.frames[targetLabel].contentDocument.scrollingElement;

	var dx = 0;
	var dy = 0;
	if (targetLabel == 'horizontalTarget') {
	iframeScrollPositionBeforeGlide = iframeScrollingElement.scrollLeft;
	dx = -1;
	} else {
	iframeScrollPositionBeforeGlide = iframeScrollingElement.scrollTop;
	dy = -1;
	}

	if (!eventSender)
	return;

	var windowPosition = locationInWindowCoordinates(iframeTarget);

	var startPosX = windowPosition.x + 0.5 * iframeTarget.clientWidth;
	var startPosY = windowPosition.y + 0.5 * iframeTarget.clientHeight;
	eventSender.monitorWheelEvents();
	eventSender.mouseMoveTo(startPosX, startPosY);
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'began', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'changed', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'ended', 'none');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'begin');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(dx, dy, 'none', 'continue');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');

	await UIHelper.waitForScrollCompletion();
	checkForScrollGlide(targetLabel);
	}

	async function runTests()
	{
	await scrollGlideTest('horizontalTarget');
	await scrollSnapTest('horizontalTarget');

	await scrollGlideTest('verticalTarget');
	await scrollSnapTest('verticalTarget');

	finishJSTest();
	}

	window.addEventListener('load', () => {
	if (window.internals)
	internals.setPlatformMomentumScrollingPredictionEnabled(false);
	setTimeout(runTests, 0);
	}, false);
	</script>
	</head>
	<body>
	<div>Tests that the scroll-snap feature works properly in iframes.</div>
	<iframe id="horizontalTarget" class="horizontalGallery" src="resources/horizontal-mainframe.html"></iframe>
	<iframe id="verticalTarget" class="verticalGallery" src="resources/vertical-mainframe.html"></iframe>
	<div id="console"></div>
	<script src="../../../resources/js-test-post.js"></script>
	</body>
	</html>