chromium/src/third_party/blink/web_tests/fast/scrolling/scrollbars/mouse-autoscrolling-on-scrollbar.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <title>Tests mouse autoscroll interactions on a non-custom composited div scrollbar.</title>
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
 <script src="../../../resources/gesture-util.js"></script>
 <script src="../../../resources/scrollbar-util.js"></script>
 <style>
 .appearance {
   width: 100px;
   height: 100px;
   overflow: scroll;
   border: 1px solid black;
 }
 .location {
   position: absolute;
   top: 100px;
   left: 100px;
 }
 .space {
   height: 2000px;
   width: 2000px;
 }

 </style>

 <!-- Composited non-custom scroller -->
 <div id="scroller" class="appearance location">
   <div id="divContent" class="space"></div>
 </div>

 <script>
   // Turn off animated scrolling. The "conditionHolds" API expects the scrollTop to
   // *not* change for 10 frames. This will fail since the last GSU would still be
   // animating if animated scrolling were on.
   if (window.internals)
     internals.settings.setScrollAnimatorEnabled(false);

   const scroller = document.getElementById("scroller");
   const scrollerRect = scroller.getBoundingClientRect();
   const onMacPlatform =  navigator.userAgent.search(/\bMac OS X\b/) != -1;

   const TRACK_WIDTH = calculateScrollbarThickness();
   const BUTTON_WIDTH = TRACK_WIDTH;
   const SCROLL_CORNER = TRACK_WIDTH;
   const SCROLL_DELTA = (internals.runtimeFlags.percentBasedScrollingEnabled) ?
       Math.floor(scroller.clientHeight * SCROLLBAR_SCROLL_PERCENTAGE) * 10 :
       SCROLLBAR_SCROLL_PIXELS * 10;
   const MAX_SCROLLER_OFFSET = 1915;

   promise_test (async () => {
     if(onMacPlatform)
       return;

     await waitForCompositorCommit();
     scroller.scrollTop = 0;

     const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
     const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;

     await mouseMoveTo(down_arrow_x, down_arrow_y);
     await mouseDownAt(down_arrow_x, down_arrow_y);
     await waitUntil(() => { return scroller.scrollTop > SCROLL_DELTA; },
     `scroller.scrollTop = ${scroller.scrollTop} never went beyond ${SCROLL_DELTA}`);
     await mouseUpAt(down_arrow_x, down_arrow_y);

     // Since autoscroll for arrows happens at 800 px per second, verify that the
     // scrollTop has not reached the end.
     assert_less_than(scroller.scrollTop, MAX_SCROLLER_OFFSET, "Reached scroller end.");

     await waitForCompositorCommit();
     const current_offset = scroller.scrollTop;
     await conditionHolds(() => { return scroller.scrollTop == current_offset; },
     `scroller.scrollTop = ${scroller.scrollTop} current_offset = ${current_offset}`);
   },"Test arrow autoscroll down and autoscroll stop.");

   promise_test (async () => {
     await waitForCompositorCommit();
     scroller.scrollTop = 0;

     const trackscroll_x = scrollerRect.right - BUTTON_WIDTH / 2;
     const trackscroll_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH;

     await mouseMoveTo(trackscroll_x, trackscroll_y);
     await mouseDownAt(trackscroll_x, trackscroll_y);
     await waitUntil(() => { return scroller.scrollTop > SCROLL_DELTA; },
     `scroller.scrollTop = ${scroller.scrollTop} never went beyond ${SCROLL_DELTA}`);
     await mouseUpAt(trackscroll_x, trackscroll_y);

     // Verify that the track autoscroll actually stops as expected. Autoscroll velocity
     // in this particular case is 1480 px/sec (i.e 74 * 20). There is currently a bug in
     // the main thread autoscrolling code that causes autoscrolling to happen at a
     // much lower velocity (crbug.com/1053398)
     assert_less_than(scroller.scrollTop, 800, "Track autosroll did not end.");

     const current_offset = scroller.scrollTop;
     await conditionHolds(() => { return scroller.scrollTop == current_offset; },
     `scroller.scrollTop = ${scroller.scrollTop} current_offset = ${current_offset}`);
   },"Test track autoscroll down and autoscroll stop.");

   promise_test (async () => {
     // Scrollbars on Mac don't have arrows. This test is irrelevant. Infinite auto
     // scroll can't be tested for track scrolls since autoscrolling aborts the as
     // soon as the thumb reaches the pointer. Regular autoscrolling still has coverage
     // on all platforms.
     if(onMacPlatform)
       return;

     await waitForCompositorCommit();
     scroller.scrollTop = MAX_SCROLLER_OFFSET;

     const content = document.getElementById("divContent");
     const originalDivHeight = content.clientHeight;
     const extendedDivHeight = originalDivHeight + 500;
     setTimeout(function() {
       content.setAttribute("style","height:" + extendedDivHeight + "px");
     }, 500);

     const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
     const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;

     // Keep the mouse pressed. The previously scheduled scroller height increment kicks in
     // and at this point, the autoscrolling is expected to take place. This should prove
     // that scrolling occured *after* the scroller length was extended.
     await mouseMoveTo(down_arrow_x, down_arrow_y);
     await mouseDownAt(down_arrow_x, down_arrow_y);

     // Verify that autoscroll took place beyond the old bounds. If there is a regression here,
     // the scroller.scrollTop would've stayed at MAX_SCROLLER_OFFSET.
     await waitUntil(() => { return scroller.scrollTop > MAX_SCROLLER_OFFSET; },
     `Infinite autoscroll down failed (scroller.scrollTop = ${scroller.scrollTop})`);

     await mouseUpAt(down_arrow_x, down_arrow_y);

     // Reset the scroller dimensions.
     content.setAttribute("style","height:" + originalDivHeight + "px");
   },"Test infinite scrolling when content is extended dynamically.");

   promise_test (async () => {
     // Scrollbars on Mac don't have arrows. This test is irrelevant.
     if(onMacPlatform)
       return;

     scroller.scrollTop = 0;
     const SCROLL_TOP = 100;

     const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
     const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;

     // Keep the mouse pressed on the down arrow.
     await mouseMoveTo(down_arrow_x, down_arrow_y);
     await mouseDownAt(down_arrow_x, down_arrow_y);

     // Wait for a bit for the autoscroll to start. In the call below, the first 250ms
     // is spent waiting for the autoscroll to start. After 250ms, autoscroll initiates
     // with a velocity of 800px/sec. So, in the remaining time (of 250ms), the duration
     // should be enough to take the scroller beyond the expected threshold (SCROLL_TOP).
     // Note that the expected SCROLL_TOP here is 100px. If scrolling crosses this value,
     // it should suffice as proof that autoscrolling works as expected.
     await waitForMs(500);
     await waitFor(() => { return scroller.scrollTop >= SCROLL_TOP; },
     `scroller.scrollTop = ${scroller.scrollTop} never reached ${SCROLL_TOP}`);

     // Without releasing the mouse, move away from the arrow.
     await mouseMoveTo(down_arrow_x, down_arrow_y - 20);

     // Now that the mouse is away, record the scrolltop and ensure that no scrolling happens.
     const current_scrolltop = scroller.scrollTop;
     await conditionHolds(() => { return current_scrolltop == scroller.scrollTop; },
     `Condition did not hold [scroller.scrollTop = ${scroller.scrollTop}]`);

     // Now move back on the arrow and verify that auto-scrolling starts immediately. There
     // should not be the 250ms pause before starting autoscroll since the mouse was never released.
     await mouseMoveTo(down_arrow_x, down_arrow_y);

     // Allow some time for queued GSU's to fire.
     await waitFor(() => { return scroller.scrollTop >= current_scrolltop; },
     `Animation did not restart [scroller.scrollTop = ${scroller.scrollTop}]`);

     await mouseUpAt(down_arrow_x, down_arrow_y);
   },"Test autoscroll play/pause when pointer moves in and out of arrow bounds.");
 </script>
	<!DOCTYPE html>
	<title>Tests mouse autoscroll interactions on a non-custom composited div scrollbar.</title>
	<script src="../../../resources/testharness.js"></script>
	<script src="../../../resources/testharnessreport.js"></script>
	<script src="../../../resources/gesture-util.js"></script>
	<script src="../../../resources/scrollbar-util.js"></script>
	<style>
	.appearance {
	width: 100px;
	height: 100px;
	overflow: scroll;
	border: 1px solid black;
	}
	.location {
	position: absolute;
	top: 100px;
	left: 100px;
	}
	.space {
	height: 2000px;
	width: 2000px;
	}

	</style>

	<!-- Composited non-custom scroller -->
	<div id="scroller" class="appearance location">
	<div id="divContent" class="space"></div>
	</div>

	<script>
	// Turn off animated scrolling. The "conditionHolds" API expects the scrollTop to
	// not change for 10 frames. This will fail since the last GSU would still be
	// animating if animated scrolling were on.
	if (window.internals)
	internals.settings.setScrollAnimatorEnabled(false);

	const scroller = document.getElementById("scroller");
	const scrollerRect = scroller.getBoundingClientRect();
	const onMacPlatform = navigator.userAgent.search(/\bMac OS X\b/) != -1;

	const TRACK_WIDTH = calculateScrollbarThickness();
	const BUTTON_WIDTH = TRACK_WIDTH;
	const SCROLL_CORNER = TRACK_WIDTH;
	const SCROLL_DELTA = (internals.runtimeFlags.percentBasedScrollingEnabled) ?
	Math.floor(scroller.clientHeight * SCROLLBAR_SCROLL_PERCENTAGE) * 10 :
	SCROLLBAR_SCROLL_PIXELS * 10;
	const MAX_SCROLLER_OFFSET = 1915;

	promise_test (async () => {
	if(onMacPlatform)
	return;

	await waitForCompositorCommit();
	scroller.scrollTop = 0;

	const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
	const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;

	await mouseMoveTo(down_arrow_x, down_arrow_y);
	await mouseDownAt(down_arrow_x, down_arrow_y);
	await waitUntil(() => { return scroller.scrollTop > SCROLL_DELTA; },
	`scroller.scrollTop = ${scroller.scrollTop} never went beyond ${SCROLL_DELTA}`);
	await mouseUpAt(down_arrow_x, down_arrow_y);

	// Since autoscroll for arrows happens at 800 px per second, verify that the
	// scrollTop has not reached the end.
	assert_less_than(scroller.scrollTop, MAX_SCROLLER_OFFSET, "Reached scroller end.");

	await waitForCompositorCommit();
	const current_offset = scroller.scrollTop;
	await conditionHolds(() => { return scroller.scrollTop == current_offset; },
	`scroller.scrollTop = ${scroller.scrollTop} current_offset = ${current_offset}`);
	},"Test arrow autoscroll down and autoscroll stop.");

	promise_test (async () => {
	await waitForCompositorCommit();
	scroller.scrollTop = 0;

	const trackscroll_x = scrollerRect.right - BUTTON_WIDTH / 2;
	const trackscroll_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH;

	await mouseMoveTo(trackscroll_x, trackscroll_y);
	await mouseDownAt(trackscroll_x, trackscroll_y);
	await waitUntil(() => { return scroller.scrollTop > SCROLL_DELTA; },
	`scroller.scrollTop = ${scroller.scrollTop} never went beyond ${SCROLL_DELTA}`);
	await mouseUpAt(trackscroll_x, trackscroll_y);

	// Verify that the track autoscroll actually stops as expected. Autoscroll velocity
	// in this particular case is 1480 px/sec (i.e 74 * 20). There is currently a bug in
	// the main thread autoscrolling code that causes autoscrolling to happen at a
	// much lower velocity (crbug.com/1053398)
	assert_less_than(scroller.scrollTop, 800, "Track autosroll did not end.");

	const current_offset = scroller.scrollTop;
	await conditionHolds(() => { return scroller.scrollTop == current_offset; },
	`scroller.scrollTop = ${scroller.scrollTop} current_offset = ${current_offset}`);
	},"Test track autoscroll down and autoscroll stop.");

	promise_test (async () => {
	// Scrollbars on Mac don't have arrows. This test is irrelevant. Infinite auto
	// scroll can't be tested for track scrolls since autoscrolling aborts the as
	// soon as the thumb reaches the pointer. Regular autoscrolling still has coverage
	// on all platforms.
	if(onMacPlatform)
	return;

	await waitForCompositorCommit();
	scroller.scrollTop = MAX_SCROLLER_OFFSET;

	const content = document.getElementById("divContent");
	const originalDivHeight = content.clientHeight;
	const extendedDivHeight = originalDivHeight + 500;
	setTimeout(function() {
	content.setAttribute("style","height:" + extendedDivHeight + "px");
	}, 500);

	const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
	const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;

	// Keep the mouse pressed. The previously scheduled scroller height increment kicks in
	// and at this point, the autoscrolling is expected to take place. This should prove
	// that scrolling occured after the scroller length was extended.
	await mouseMoveTo(down_arrow_x, down_arrow_y);
	await mouseDownAt(down_arrow_x, down_arrow_y);

	// Verify that autoscroll took place beyond the old bounds. If there is a regression here,
	// the scroller.scrollTop would've stayed at MAX_SCROLLER_OFFSET.
	await waitUntil(() => { return scroller.scrollTop > MAX_SCROLLER_OFFSET; },
	`Infinite autoscroll down failed (scroller.scrollTop = ${scroller.scrollTop})`);

	await mouseUpAt(down_arrow_x, down_arrow_y);

	// Reset the scroller dimensions.
	content.setAttribute("style","height:" + originalDivHeight + "px");
	},"Test infinite scrolling when content is extended dynamically.");

	promise_test (async () => {
	// Scrollbars on Mac don't have arrows. This test is irrelevant.
	if(onMacPlatform)
	return;

	scroller.scrollTop = 0;
	const SCROLL_TOP = 100;

	const down_arrow_x = scrollerRect.right - BUTTON_WIDTH / 2;
	const down_arrow_y = scrollerRect.bottom - SCROLL_CORNER - BUTTON_WIDTH / 2;

	// Keep the mouse pressed on the down arrow.
	await mouseMoveTo(down_arrow_x, down_arrow_y);
	await mouseDownAt(down_arrow_x, down_arrow_y);

	// Wait for a bit for the autoscroll to start. In the call below, the first 250ms
	// is spent waiting for the autoscroll to start. After 250ms, autoscroll initiates
	// with a velocity of 800px/sec. So, in the remaining time (of 250ms), the duration
	// should be enough to take the scroller beyond the expected threshold (SCROLL_TOP).
	// Note that the expected SCROLL_TOP here is 100px. If scrolling crosses this value,
	// it should suffice as proof that autoscrolling works as expected.
	await waitForMs(500);
	await waitFor(() => { return scroller.scrollTop >= SCROLL_TOP; },
	`scroller.scrollTop = ${scroller.scrollTop} never reached ${SCROLL_TOP}`);

	// Without releasing the mouse, move away from the arrow.
	await mouseMoveTo(down_arrow_x, down_arrow_y - 20);

	// Now that the mouse is away, record the scrolltop and ensure that no scrolling happens.
	const current_scrolltop = scroller.scrollTop;
	await conditionHolds(() => { return current_scrolltop == scroller.scrollTop; },
	`Condition did not hold [scroller.scrollTop = ${scroller.scrollTop}]`);

	// Now move back on the arrow and verify that auto-scrolling starts immediately. There
	// should not be the 250ms pause before starting autoscroll since the mouse was never released.
	await mouseMoveTo(down_arrow_x, down_arrow_y);

	// Allow some time for queued GSU's to fire.
	await waitFor(() => { return scroller.scrollTop >= current_scrolltop; },
	`Animation did not restart [scroller.scrollTop = ${scroller.scrollTop}]`);

	await mouseUpAt(down_arrow_x, down_arrow_y);
	},"Test autoscroll play/pause when pointer moves in and out of arrow bounds.");
	</script>