LayoutTests/tiled-drawing/scrolling/fast-scroll-div-latched-mainframe-with-handler.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>
 var wheelCount = 0;
 function onScrollWheel(evt) {
     wheelCount = wheelCount + 1;
 }

 function onLoad() {
     document.addEventListener("mousewheel", onScrollWheel);
     window.addEventListener("scroll", onPageScroll);
     setupTopLevel();
 }
 </script>
 </head>
 <body onload="onLoad();">
 <script>

 var divTarget;
 var pageScrollPositionBefore;
 var divScrollPositionBefore;
 var continueCount = 5;

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

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

     // The div should not have scrolled at all.
     var pageScrollPositionAfter = document.scrollingElement.scrollTop;
     var divScrollPositionAfter = divTarget.scrollTop;

     if (divScrollPositionBefore != divScrollPositionAfter)
         testFailed("Scrollable div consumed wheel events.");
     else
         testPassed("Scrollable div 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();
 }

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

     divTarget = document.getElementById('target');

     divScrollPositionBefore = divTarget.scrollTop;

     // Scroll the #source until we reach the #target.
     var startPosX = Math.round(divTarget.offsetLeft) + 20;
     var startPosY = Math.round(divTarget.offsetTop) - 42;
     eventSender.mouseMoveTo(startPosX, startPosY);
     debug("Mouse moved to (" + startPosX + ", " + startPosY + ")");
     eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', '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, -4, 'none', 'continue');
     eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
     eventSender.callAfterScrollingCompletes(() => {
         requestAnimationFrame(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 the<br/>"
             + "down past the div.<br/><br/>"
             + "The scrollable region should not scroll.</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 Region</h3>
         <div id="target" style='overflow-y: auto; overflow-x: hidden; height: 350px;'>
             <table class="table" style='width: 99%'>
                 <tr><th>Count</th><th>DATA</th><th>Rev Count</th></tr>
                 <tr><td>TOP TOP TOP TOP TOP</td><td>TOP TOP TOP TOP TOP</td><td>TOP TOP TOP TOP TOP</td></tr>
                 <tr><td>1</td><td>0.1100</td><td>40</td></tr>
                 <tr><td>2</td><td>0.1155</td><td>39</td></tr>
                 <tr><td>3</td><td>0.2200</td><td>38</td></tr>
                 <tr><td>4</td><td>0.2255</td><td>37</td></tr>
                 <tr><td>5</td><td>0.3300</td><td>36</td></tr>
                 <tr><td>6</td><td>0.3355</td><td>35</td></tr>
                 <tr><td>7</td><td>0.4400</td><td>34</td></tr>
                 <tr><td>8</td><td>0.4455</td><td>33</td></tr>
                 <tr><td>9</td><td>0.5500</td><td>32</td></tr>
                 <tr><td>10</td><td>0.5555</td><td>31</td></tr>
                 <tr><td>11</td><td>0.6600</td><td>30</td></tr>
                 <tr><td>12</td><td>0.6655</td><td>29</td></tr>
                 <tr><td>13</td><td>0.7700</td><td>28</td></tr>
                 <tr><td>14</td><td>0.7755</td><td>27</td></tr>
                 <tr><td>15</td><td>0.8800</td><td>26</td></tr>
                 <tr><td>16</td><td>0.8855</td><td>25</td></tr>
                 <tr><td>17</td><td>0.9900</td><td>24</td></tr>
                 <tr><td>18</td><td>0.9955</td><td>23</td></tr>
                 <tr><td>19</td><td>0.9999</td><td>22</td></tr>
                 <tr><td>20</td><td>1.0000</td><td>21</td></tr>
                 <tr><td>21</td><td>1.0000</td><td>20</td></tr>
                 <tr><td>22</td><td>0.9999</td><td>19</td></tr>
                 <tr><td>23</td><td>0.9955</td><td>18</td></tr>
                 <tr><td>24</td><td>0.9900</td><td>17</td></tr>
                 <tr><td>25</td><td>0.8855</td><td>16</td></tr>
                 <tr><td>26</td><td>0.8800</td><td>15</td></tr>
                 <tr><td>27</td><td>0.7755</td><td>14</td></tr>
                 <tr><td>28</td><td>0.7700</td><td>13</td></tr>
                 <tr><td>29</td><td>0.6655</td><td>12</td></tr>
                 <tr><td>30</td><td>0.6600</td><td>11</td></tr>
                 <tr><td>31</td><td>0.5555</td><td>10</td></tr>
                 <tr><td>32</td><td>0.5500</td><td>9</td></tr>
                 <tr><td>33</td><td>0.4455</td><td>8</td></tr>
                 <tr><td>34</td><td>0.4400</td><td>7</td></tr>
                 <tr><td>35</td><td>0.3355</td><td>6</td></tr>
                 <tr><td>36</td><td>0.3300</td><td>5</td></tr>
                 <tr><td>37</td><td>0.2255</td><td>4</td></tr>
                 <tr><td>38</td><td>0.2200</td><td>3</td></tr>
                 <tr><td>39</td><td>0.1155</td><td>2</td></tr>
                 <tr><td>40</td><td>0.1100</td><td>1</td></tr>
                 <tr><td>END END END END END</td><td>END END END END END</td><td>END END END END END</td></tr>
             </table>
         </div>
     </div>
 </div>
 <div id="console"></div>
 <script>
 description("Tests that a scrollable div 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>
	var wheelCount = 0;
	function onScrollWheel(evt) {
	wheelCount = wheelCount + 1;
	}

	function onLoad() {
	document.addEventListener("mousewheel", onScrollWheel);
	window.addEventListener("scroll", onPageScroll);
	setupTopLevel();
	}
	</script>
	</head>
	<body onload="onLoad();">
	<script>

	var divTarget;
	var pageScrollPositionBefore;
	var divScrollPositionBefore;
	var continueCount = 5;

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

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

	// The div should not have scrolled at all.
	var pageScrollPositionAfter = document.scrollingElement.scrollTop;
	var divScrollPositionAfter = divTarget.scrollTop;

	if (divScrollPositionBefore != divScrollPositionAfter)
	testFailed("Scrollable div consumed wheel events.");
	else
	testPassed("Scrollable div 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();
	}

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

	divTarget = document.getElementById('target');

	divScrollPositionBefore = divTarget.scrollTop;

	// Scroll the #source until we reach the #target.
	var startPosX = Math.round(divTarget.offsetLeft) + 20;
	var startPosY = Math.round(divTarget.offsetTop) - 42;
	eventSender.mouseMoveTo(startPosX, startPosY);
	debug("Mouse moved to (" + startPosX + ", " + startPosY + ")");
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, -1, 'began', '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, -4, 'none', 'continue');
	eventSender.mouseScrollByWithWheelAndMomentumPhases(0, 0, 'none', 'end');
	eventSender.callAfterScrollingCompletes(() => {
	requestAnimationFrame(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 the<br/>"
	+ "down past the div.<br/><br/>"
	+ "The scrollable region should not scroll.</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 Region</h3>
	<div id="target" style='overflow-y: auto; overflow-x: hidden; height: 350px;'>
	<table class="table" style='width: 99%'>
	<tr><th>Count</th><th>DATA</th><th>Rev Count</th></tr>
	<tr><td>TOP TOP TOP TOP TOP</td><td>TOP TOP TOP TOP TOP</td><td>TOP TOP TOP TOP TOP</td></tr>
	<tr><td>1</td><td>0.1100</td><td>40</td></tr>
	<tr><td>2</td><td>0.1155</td><td>39</td></tr>
	<tr><td>3</td><td>0.2200</td><td>38</td></tr>
	<tr><td>4</td><td>0.2255</td><td>37</td></tr>
	<tr><td>5</td><td>0.3300</td><td>36</td></tr>
	<tr><td>6</td><td>0.3355</td><td>35</td></tr>
	<tr><td>7</td><td>0.4400</td><td>34</td></tr>
	<tr><td>8</td><td>0.4455</td><td>33</td></tr>
	<tr><td>9</td><td>0.5500</td><td>32</td></tr>
	<tr><td>10</td><td>0.5555</td><td>31</td></tr>
	<tr><td>11</td><td>0.6600</td><td>30</td></tr>
	<tr><td>12</td><td>0.6655</td><td>29</td></tr>
	<tr><td>13</td><td>0.7700</td><td>28</td></tr>
	<tr><td>14</td><td>0.7755</td><td>27</td></tr>
	<tr><td>15</td><td>0.8800</td><td>26</td></tr>
	<tr><td>16</td><td>0.8855</td><td>25</td></tr>
	<tr><td>17</td><td>0.9900</td><td>24</td></tr>
	<tr><td>18</td><td>0.9955</td><td>23</td></tr>
	<tr><td>19</td><td>0.9999</td><td>22</td></tr>
	<tr><td>20</td><td>1.0000</td><td>21</td></tr>
	<tr><td>21</td><td>1.0000</td><td>20</td></tr>
	<tr><td>22</td><td>0.9999</td><td>19</td></tr>
	<tr><td>23</td><td>0.9955</td><td>18</td></tr>
	<tr><td>24</td><td>0.9900</td><td>17</td></tr>
	<tr><td>25</td><td>0.8855</td><td>16</td></tr>
	<tr><td>26</td><td>0.8800</td><td>15</td></tr>
	<tr><td>27</td><td>0.7755</td><td>14</td></tr>
	<tr><td>28</td><td>0.7700</td><td>13</td></tr>
	<tr><td>29</td><td>0.6655</td><td>12</td></tr>
	<tr><td>30</td><td>0.6600</td><td>11</td></tr>
	<tr><td>31</td><td>0.5555</td><td>10</td></tr>
	<tr><td>32</td><td>0.5500</td><td>9</td></tr>
	<tr><td>33</td><td>0.4455</td><td>8</td></tr>
	<tr><td>34</td><td>0.4400</td><td>7</td></tr>
	<tr><td>35</td><td>0.3355</td><td>6</td></tr>
	<tr><td>36</td><td>0.3300</td><td>5</td></tr>
	<tr><td>37</td><td>0.2255</td><td>4</td></tr>
	<tr><td>38</td><td>0.2200</td><td>3</td></tr>
	<tr><td>39</td><td>0.1155</td><td>2</td></tr>
	<tr><td>40</td><td>0.1100</td><td>1</td></tr>
	<tr><td>END END END END END</td><td>END END END END END</td><td>END END END END END</td></tr>
	</table>
	</div>
	</div>
	</div>
	<div id="console"></div>
	<script>
	description("Tests that a scrollable div 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>