LayoutTests/tiled-drawing/scrolling/fast-scroll-select-latched-mainframe.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .scrollable_region {
     width: 680px;
 }

 .table td, .table th {
     padding: 2px;
 }

 .table th {
     height: 20px;
     text-align: left;
     font-weight: strong;
 }

 .table tr:nth-child(odd) {
     background: #f3f3f3;
 }

 .scrollable_select option:nth-child(odd) {
     background: #f3f3f3;
 }

 </style>
 <script src="../../resources/js-test-pre.js"></script>
 <script src="../../resources/ui-helper.js"></script>
 <script>
 function onLoad() {
     window.addEventListener("scroll", onPageScroll);
     setupTopLevel();
 }
 </script>
 </head>
 <body onload="onLoad();">
 <script>

 var selectTarget;
 var pageScrollPositionBefore;
 var selectScrollPositionBefore;
 var continueCount = 5;

 function onPageScroll()
 {
     if (document.scrollingElement.scrollTop >= 70)
         checkForScroll();
 }

 let didCheckForScroll = false;
 function checkForScroll()
 {
     if (didCheckForScroll)
         return;
     didCheckForScroll = true;

     // The select should not have scrolled at all.
     var pageScrollPositionAfter = document.scrollingElement.scrollTop;
     var selectScrollPositionAfter = selectTarget.scrollTop;

     if (selectScrollPositionBefore != selectScrollPositionAfter)
         testFailed("Select consumed wheel events.");
     else
         testPassed("Select did not receive wheel events.");

     if (window.internals) {
         document.getElementById('layers').innerText = internals.layerTreeAsText(document,
             internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS | internals.LAYER_TREE_INCLUDES_TILE_CACHES);
     }

     testRunner.notifyDone();
 }

 async function scrollTest()
 {
     pageScrollPositionBefore = document.scrollingElement.scrollTop;

     selectTarget = document.getElementById('target');

     selectScrollPositionBefore = selectTarget.scrollTop;

     // Scroll the #source until we reach the #target.
     const startPosX = Math.round(selectTarget.offsetLeft) + 20;
     const startPosY = Math.round(selectTarget.offsetTop) - 42;

     const events = [
         {
             type : "wheel",
             viewX : startPosX,
             viewY : startPosY,
             deltaY : -10,
             phase : "began"
         },
         {
             type : "wheel",
             deltaY : -10,
             phase : "changed"
         },
         {
             type : "wheel",
             deltaY : -10,
             phase : "changed"
         },
         {
             type : "wheel",
             phase : "ended"
         },
         {
             type : "wheel",
             deltaY : -10,
             momentumPhase : "began"
         },
         {
             type : "wheel",
             deltaY : -40,
             momentumPhase : "changed"
         },
         {
             type : "wheel",
             momentumPhase : "ended"
         }
     ];

     await UIHelper.mouseWheelSequence({ events: events });
     checkForScroll();
     // We should finish via the scroll event; this will fire in the case of failure when the page doesn't scroll.
 }

 function setupTopLevel()
 {
     if (window.eventSender) {
         testRunner.dumpAsText();
         testRunner.waitUntilDone();

         eventSender.monitorWheelEvents();
         setTimeout(scrollTest, 0);
     } else {
         var messageLocation = document.getElementById('parent');
         var message = document.createElement('div');
         message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
             + "at the top of the page, and then use the mouse wheel or a two-finger swipe to scroll down<br/>"
             + "past the selectTarget.<br/><br/>"
             + "You should not see the 'content21' label if this test is successful.</p>";
         messageLocation.appendChild(message);
     }
 }

 </script>
 <div id="parent" style="height: 2000px; width: 2000px;">
     <div id="source" style="height: 100px; width: 500px;">
         Put mouse here and flick downwards
     </div>
         <div class="scrollable_region">
             <h3>Scrollable Select</h3>
             <select id="target" class="scrollable_select" size="8">
                 <option>content1</option>
                 <option>content2</option>
                 <option>content3</option>
                 <option>content4</option>
                 <option>content5</option>
                 <option>content6</option>
                 <option>content7</option>
                 <option>content8</option>
                 <option>content9</option>
                 <option>content10</option>
                 <option>content11</option>
                 <option>content12</option>
                 <option>content13</option>
                 <option>content14</option>
                 <option>content15</option>
                 <option>content16</option>
                 <option>content17</option>
                 <option>content18</option>
                 <option>content19</option>
                 <option>content20</option>
                 <option>content21</option>
             </select>
         </div>
     </div>
 </div>
 <div id="console"></div>
 <script>
 description("Tests that a select doesn't consume wheel events when scroll is latched to main frame.");
 </script>
 <pre id="layers">Layer tree goes here</p>
 <script src="../../resources/js-test-post.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.scrollable_region {
	width: 680px;
	}

	.table td, .table th {
	padding: 2px;
	}

	.table th {
	height: 20px;
	text-align: left;
	font-weight: strong;
	}

	.table tr:nth-child(odd) {
	background: #f3f3f3;
	}

	.scrollable_select option:nth-child(odd) {
	background: #f3f3f3;
	}

	</style>
	<script src="../../resources/js-test-pre.js"></script>
	<script src="../../resources/ui-helper.js"></script>
	<script>
	function onLoad() {
	window.addEventListener("scroll", onPageScroll);
	setupTopLevel();
	}
	</script>
	</head>
	<body onload="onLoad();">
	<script>

	var selectTarget;
	var pageScrollPositionBefore;
	var selectScrollPositionBefore;
	var continueCount = 5;

	function onPageScroll()
	{
	if (document.scrollingElement.scrollTop >= 70)
	checkForScroll();
	}

	let didCheckForScroll = false;
	function checkForScroll()
	{
	if (didCheckForScroll)
	return;
	didCheckForScroll = true;

	// The select should not have scrolled at all.
	var pageScrollPositionAfter = document.scrollingElement.scrollTop;
	var selectScrollPositionAfter = selectTarget.scrollTop;

	if (selectScrollPositionBefore != selectScrollPositionAfter)
	testFailed("Select consumed wheel events.");
	else
	testPassed("Select did not receive wheel events.");

	if (window.internals) {
	document.getElementById('layers').innerText = internals.layerTreeAsText(document,
	internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS \| internals.LAYER_TREE_INCLUDES_TILE_CACHES);
	}

	testRunner.notifyDone();
	}

	async function scrollTest()
	{
	pageScrollPositionBefore = document.scrollingElement.scrollTop;

	selectTarget = document.getElementById('target');

	selectScrollPositionBefore = selectTarget.scrollTop;

	// Scroll the #source until we reach the #target.
	const startPosX = Math.round(selectTarget.offsetLeft) + 20;
	const startPosY = Math.round(selectTarget.offsetTop) - 42;

	const events = [
	{
	type : "wheel",
	viewX : startPosX,
	viewY : startPosY,
	deltaY : -10,
	phase : "began"
	},
	{
	type : "wheel",
	deltaY : -10,
	phase : "changed"
	},
	{
	type : "wheel",
	deltaY : -10,
	phase : "changed"
	},
	{
	type : "wheel",
	phase : "ended"
	},
	{
	type : "wheel",
	deltaY : -10,
	momentumPhase : "began"
	},
	{
	type : "wheel",
	deltaY : -40,
	momentumPhase : "changed"
	},
	{
	type : "wheel",
	momentumPhase : "ended"
	}
	];

	await UIHelper.mouseWheelSequence({ events: events });
	checkForScroll();
	// We should finish via the scroll event; this will fire in the case of failure when the page doesn't scroll.
	}

	function setupTopLevel()
	{
	if (window.eventSender) {
	testRunner.dumpAsText();
	testRunner.waitUntilDone();

	eventSender.monitorWheelEvents();
	setTimeout(scrollTest, 0);
	} else {
	var messageLocation = document.getElementById('parent');
	var message = document.createElement('div');
	message.innerHTML = "<p>This test is better run under DumpRenderTree. To manually test it, place the mouse pointer<br/>"
	+ "at the top of the page, and then use the mouse wheel or a two-finger swipe to scroll down<br/>"
	+ "past the selectTarget.<br/><br/>"
	+ "You should not see the 'content21' label if this test is successful.</p>";
	messageLocation.appendChild(message);
	}
	}

	</script>
	<div id="parent" style="height: 2000px; width: 2000px;">
	<div id="source" style="height: 100px; width: 500px;">
	Put mouse here and flick downwards
	</div>
	<div class="scrollable_region">
	<h3>Scrollable Select</h3>
	<select id="target" class="scrollable_select" size="8">
	<option>content1</option>
	<option>content2</option>
	<option>content3</option>
	<option>content4</option>
	<option>content5</option>
	<option>content6</option>
	<option>content7</option>
	<option>content8</option>
	<option>content9</option>
	<option>content10</option>
	<option>content11</option>
	<option>content12</option>
	<option>content13</option>
	<option>content14</option>
	<option>content15</option>
	<option>content16</option>
	<option>content17</option>
	<option>content18</option>
	<option>content19</option>
	<option>content20</option>
	<option>content21</option>
	</select>
	</div>
	</div>
	</div>
	<div id="console"></div>
	<script>
	description("Tests that a select doesn't consume wheel events when scroll is latched to main frame.");
	</script>
	<pre id="layers">Layer tree goes here</p>
	<script src="../../resources/js-test-post.js"></script>
	</body>
	</html>