third_party/blink/web_tests/external/wpt/visual-viewport/viewport-scroll-event-manual.html - chromium/src - Git at Google

 <!doctype html>
 <html>
     <head>
         <title>Viewport: Scroll Event</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, minimum-scale=1">
         <script src="/resources/testharness.js"></script>
         <script src="/resources/testharnessreport.js"></script>
         <script src="viewport_support.js"></script>
         <script>
            setup({explicit_timeout: true, explicit_done: true})
         </script>
         <style>
           html {
             width: 100%;
             height: 100%;
           }
         </style>
     </head>
     <body>
     <h1>Viewport: Scroll Event</h1>
     <h4>
         Test Description: This test checks that a scroll event is fired against
         the window.visualViewport object when the viewport is scrolled.
     </h4>
     <h2 style="color: red">THIS IS A MANUAL TEST</h2>
     <p id="skip">
         <button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
     </p>
     <h4>Instruction</h4>
     <p id="instruction"></p>
     <button id="continue">Start Test</button>
     <div id="log"></div>
     </body>
     <script>
         var continueBtn = document.getElementById("continue");

         function continueTest() {
           nextStep(function(instructionText) {
             var instruction = document.getElementById("instruction");
             continueBtn.innerText = "Continue";
             instruction.innerText = instructionText;
           });
         }

         continueBtn.addEventListener('click', continueTest);

         var didGetScrollEvent = false;
         var cancelable = undefined;
         var bubbles = undefined;

         function resetValues() {
             didGetScrollEvent = false;
             cancelable = undefined;
             bubbles = undefined;
         }

         addManualTestStep(
             function() {
                 window.visualViewport.addEventListener('scroll', function(e) {
                     didGetScrollEvent = true;
                     cancelable = e.cancelable;
                     bubbles = e.bubbles;
                 });
                 document.documentElement.style.overflow = "hidden";
             },
             null,
             '1. Pinch-zoom a little near the "Continue" button but don\'t ' +
             'perform any scrolling.');

         addManualTestStep(
             function() {
                 requestAnimationFrame(continueTest);
                 assert_true(didGetScrollEvent, "Got event");
                 assert_false(cancelable, "Event is not cancelable");
                 assert_false(bubbles, "Event does not bubble");
              },
             'Got scroll event while pinch-zooming',
             '');

         addManualTestStep(
             resetValues,
             null,
             '2. Scroll in any direction.');

         addManualTestStep(
             function() {
                 requestAnimationFrame(continueTest);
                 assert_true(didGetScrollEvent, "Got event");
                 assert_false(cancelable, "Event is not cancelable");
                 assert_false(bubbles, "Event does not bubble");
             },
             'Panning viewport fires a scroll event',
             '');

         addManualTestStep(
             function() {
                 continueBtn.style.position = "absolute";
                 continueBtn.style.right = "10px";
                 continueBtn.style.bottom = "10px";
             },
             null,
             '3. Scroll fully to the bottom right and click the continue ' +
             'button.');

         var offsetLeft;
         var offsetTop;
         addManualTestStep(
             function() {
                 resetValues();
                 document.documentElement.style.overflow = "";
                 document.body.style.width = "500%";
                 document.body.style.height = "500%";
                 continueBtn.style.position = "";
                 continueBtn.style.left = "";
                 continueBtn.style.top = "";

                 offsetLeft = window.visualViewport.offsetLeft;
                 offsetTop = window.visualViewport.offsetTop;

                 // The visual viewport should be fully scrolled so even if
                 // scrollTo does normally "push" the layout viewport with the
                 // visual, there should be no change to either offsetValue
                 window.scrollTo(10000, 10000);

                 requestAnimationFrame(continueTest);
                 assert_equals(window.visualViewport.offsetLeft, offsetLeft,
                     "OffsetLeft Unchanged");
                 assert_equals(window.visualViewport.offsetTop, offsetTop,
                     "OffsetTop Unchanged");
                 assert_false(didGetScrollEvent,
                     "Should not get view scroll event");
             },
             'scrollTo down and right on a fully scrolled visual viewport ' +
             'shouldn\'t change offsets',
             '');

         addManualTestStep(
             function() {
                 requestAnimationFrame(continueTest);
                 assert_false(didGetScrollEvent,
                     "Should not get view scroll event");
                 resetValues();
             },
             'scrollTo without changing offsets shouldn\'t fire scroll event ' +
             'on view',
             '');

         addManualTestStep(
             function() {
               requestAnimationFrame(continueTest);
               resetValues();
               window.scrollTo(0, 0);
             },
             null,
             '');

         addManualTestStep(
             function() {
                 // How scrollTo behaves in this case isn't fully spec'd but
                 // make sure it's at least rational if it does change the
                 // offset values.
                 var scrollChangedOffset =
                   offsetLeft != window.visualViewport.offsetLeft ||
                   offsetTop != window.visualViewport.offsetTop;

                 document.body.style.width = "";
                 document.body.style.height = "";

                 assert_equals(didGetScrollEvent, scrollChangedOffset,
                     'If the scrollTo changed offsets it must have fired a ' +
                     'scroll event');
             },
             'scrollTo must fire scroll event if it changes visualViewport.offsetLeft|Top',
             '6. Pinch-zoom out fully');

         addManualTestStep(
             function() { continueBtn.remove(); },
             null,
             'Test Complete');
     </script>
 </html>
	<!doctype html>
	<html>
	<head>
	<title>Viewport: Scroll Event</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="viewport_support.js"></script>
	<script>
	setup({explicit_timeout: true, explicit_done: true})
	</script>
	<style>
	html {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	<body>
	<h1>Viewport: Scroll Event</h1>
	<h4>
	Test Description: This test checks that a scroll event is fired against
	the window.visualViewport object when the viewport is scrolled.
	</h4>
	<h2 style="color: red">THIS IS A MANUAL TEST</h2>
	<p id="skip">
	<button id="skipbtn" onclick="skipManualTest();">Skip Test</button>
	</p>
	<h4>Instruction</h4>
	<p id="instruction"></p>
	<button id="continue">Start Test</button>
	<div id="log"></div>
	</body>
	<script>
	var continueBtn = document.getElementById("continue");

	function continueTest() {
	nextStep(function(instructionText) {
	var instruction = document.getElementById("instruction");
	continueBtn.innerText = "Continue";
	instruction.innerText = instructionText;
	});
	}

	continueBtn.addEventListener('click', continueTest);

	var didGetScrollEvent = false;
	var cancelable = undefined;
	var bubbles = undefined;

	function resetValues() {
	didGetScrollEvent = false;
	cancelable = undefined;
	bubbles = undefined;
	}

	addManualTestStep(
	function() {
	window.visualViewport.addEventListener('scroll', function(e) {
	didGetScrollEvent = true;
	cancelable = e.cancelable;
	bubbles = e.bubbles;
	});
	document.documentElement.style.overflow = "hidden";
	},
	null,
	'1. Pinch-zoom a little near the "Continue" button but don\'t ' +
	'perform any scrolling.');

	addManualTestStep(
	function() {
	requestAnimationFrame(continueTest);
	assert_true(didGetScrollEvent, "Got event");
	assert_false(cancelable, "Event is not cancelable");
	assert_false(bubbles, "Event does not bubble");
	},
	'Got scroll event while pinch-zooming',
	'');

	addManualTestStep(
	resetValues,
	null,
	'2. Scroll in any direction.');

	addManualTestStep(
	function() {
	requestAnimationFrame(continueTest);
	assert_true(didGetScrollEvent, "Got event");
	assert_false(cancelable, "Event is not cancelable");
	assert_false(bubbles, "Event does not bubble");
	},
	'Panning viewport fires a scroll event',
	'');

	addManualTestStep(
	function() {
	continueBtn.style.position = "absolute";
	continueBtn.style.right = "10px";
	continueBtn.style.bottom = "10px";
	},
	null,
	'3. Scroll fully to the bottom right and click the continue ' +
	'button.');

	var offsetLeft;
	var offsetTop;
	addManualTestStep(
	function() {
	resetValues();
	document.documentElement.style.overflow = "";
	document.body.style.width = "500%";
	document.body.style.height = "500%";
	continueBtn.style.position = "";
	continueBtn.style.left = "";
	continueBtn.style.top = "";

	offsetLeft = window.visualViewport.offsetLeft;
	offsetTop = window.visualViewport.offsetTop;

	// The visual viewport should be fully scrolled so even if
	// scrollTo does normally "push" the layout viewport with the
	// visual, there should be no change to either offsetValue
	window.scrollTo(10000, 10000);

	requestAnimationFrame(continueTest);
	assert_equals(window.visualViewport.offsetLeft, offsetLeft,
	"OffsetLeft Unchanged");
	assert_equals(window.visualViewport.offsetTop, offsetTop,
	"OffsetTop Unchanged");
	assert_false(didGetScrollEvent,
	"Should not get view scroll event");
	},
	'scrollTo down and right on a fully scrolled visual viewport ' +
	'shouldn\'t change offsets',
	'');

	addManualTestStep(
	function() {
	requestAnimationFrame(continueTest);
	assert_false(didGetScrollEvent,
	"Should not get view scroll event");
	resetValues();
	},
	'scrollTo without changing offsets shouldn\'t fire scroll event ' +
	'on view',
	'');

	addManualTestStep(
	function() {
	requestAnimationFrame(continueTest);
	resetValues();
	window.scrollTo(0, 0);
	},
	null,
	'');

	addManualTestStep(
	function() {
	// How scrollTo behaves in this case isn't fully spec'd but
	// make sure it's at least rational if it does change the
	// offset values.
	var scrollChangedOffset =
	offsetLeft != window.visualViewport.offsetLeft \|\|
	offsetTop != window.visualViewport.offsetTop;

	document.body.style.width = "";
	document.body.style.height = "";

	assert_equals(didGetScrollEvent, scrollChangedOffset,
	'If the scrollTo changed offsets it must have fired a ' +
	'scroll event');
	},
	'scrollTo must fire scroll event if it changes visualViewport.offsetLeft\|Top',
	'6. Pinch-zoom out fully');

	addManualTestStep(
	function() { continueBtn.remove(); },
	null,
	'Test Complete');
	</script>
	</html>