Commit 7e091c40 authored by Sahel Sharify's avatar Sahel Sharify Committed by Commit Bot

Reland "Convert middleClickAutoscroll.js to use gpu benchmarking"

The original cl is reviewed here:
https://chromium-review.googlesource.com/c/chromium/src/+/1251901

The reland calls waitForCompositorCommit before starting the test to make
sure that the compositor is ready.

To Sheriffs:
Please update the test expectations in case of a flaky test instead of
reverting this cl since I need to convert middleClickAutoscroll
tests to use gpuBenchmarking to land the fix for autoscroll coordinates:
https://chromium-review.googlesource.com/c/chromium/src/+/1239174
GpuBenchmarking makes the tests prone to flakiness, input team will work
on the flakiness of the tests using gpu benchmarking in Q4.

Bug: 875945
Change-Id: Ic722fbd8a08bee7bc1e51143ae9a6cb738807fe7
Reviewed-on: https://chromium-review.googlesource.com/c/1277806Reviewed-by: default avatarNavid Zolghadr <nzolghadr@chromium.org>
Commit-Queue: Sahel Sharify <sahel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599319}
parent f85dbab6
PASS autoscroll started
Mouse cursor shape: type=SouthPanning hotSpot=0,0
PASS autoscroll stopped
PASS Mouse cursor cleared
PASS successfullyParsed is true
TEST COMPLETE
<html> <!DOCTYPE html>
<head> <script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css"> <style type="text/css">
#scrollable { #scrollable {
height: 200px; height: 200px;
overflow: auto; overflow: auto;
border: solid 3px #cc0000; border: solid 3px #cc0000;
font-size: 80px; font-size: 80px;
} }
</style> </style>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script> <script>
function start() function start() {
{ testSetUp({
description('Check pan scroll by click mouse'); 'clickOrDrag': 'click',
testPanScroll({ 'scrollable': $('scrollable'),
'clickOrDrag': 'click', });
'scrollable': $('scrollable'),
});
} }
</script> </script>
</head>
<body onload="start()"> <body onload="start()">
<div id="container"> <div id="container">
<p id="description"></p> <p id="description"></p>
For manual testing, hold middle button in scrollable and move aroudn mouse pointer for scrolling, then release middle button to stop scrolling. For manual testing, click middle button in scrollable and move around mouse pointer for scrolling, then click middle button again to stop scrolling.
<div id="scrollable"></div> <div id="scrollable"></div>
</div> </div>
<div id="console"></div> <div id="console"></div>
</body> </body>
</html>
PASS autoscroll started
Mouse cursor shape: type=SouthPanning hotSpot=0,0
PASS autoscroll stopped
PASS Mouse cursor cleared
PASS successfullyParsed is true
TEST COMPLETE
<html> <!DOCTYPE html>
<head> <script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css"> <style type="text/css">
#scrollable { #scrollable {
height: 200px; height: 200px;
overflow: auto; overflow: auto;
border: solid 3px #cc0000; border: solid 3px #cc0000;
font-size: 80px; font-size: 80px;
} }
</style> </style>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script> <script>
function start() function start() {
{ testSetUp({
description('Check pan scroll by drag mouse'); 'clickOrDrag': 'drag',
testPanScroll({ 'scrollable': $('scrollable'),
'clickOrDrag': 'drag', });
'scrollable': $('scrollable'),
});
} }
</script> </script>
</head>
<body onload="start()"> <body onload="start()">
<div id="container"> <div id="container">
<p id="description"></p> <p id="description"></p>
...@@ -30,4 +29,3 @@ For manual testing, hold middle button in scrollable and move aroudn mouse point ...@@ -30,4 +29,3 @@ For manual testing, hold middle button in scrollable and move aroudn mouse point
</div> </div>
<div id="console"></div> <div id="console"></div>
</body> </body>
</html>
PASS autoscroll started
Mouse cursor shape: type=SouthPanning hotSpot=0,0
PASS autoscroll stopped
PASS Mouse cursor cleared
PASS successfullyParsed is true
TEST COMPLETE
<html> <!DOCTYPE html>
<head> <script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css"> <style type="text/css">
#scrollable { #scrollable {
height: 200px; height: 200px;
overflow: auto; overflow: auto;
border: solid 3px #cc0000; border: solid 3px #cc0000;
font-size: 80px; font-size: 80px;
} }
</style> </style>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script> <script>
var mousedown_fired = false;
window.addEventListener('mousedown', function(event) { window.addEventListener('mousedown', function(event) {
mousedown_fired = true;
}); });
function start() function start() {
{ testSetUp({
description('Check pan scroll with mousedown event handler'); 'clickOrDrag': 'drag',
testPanScroll({ 'scrollable': $('scrollable'),
'clickOrDrag': 'drag', 'finishTest': function() {
'scrollable': $('scrollable'), assert_true(mousedown_fired);
}); },
});
} }
</script> </script>
</head>
<body onload="start()"> <body onload="start()">
<div id="container"> <div id="container">
<p id="description"></p> <p id="description"></p>
...@@ -35,4 +38,3 @@ To test manually, try to pan scroll inside this div. ...@@ -35,4 +38,3 @@ To test manually, try to pan scroll inside this div.
</div> </div>
<div id="console"></div> <div id="console"></div>
</body> </body>
</html>
PASS autoscroll started
Mouse cursor shape: type=SouthPanning hotSpot=0,0
PASS autoscroll stopped
PASS Mouse cursor cleared
PASS successfullyParsed is true
TEST COMPLETE
<html> <!DOCTYPE html>
<head> <script src="../../resources/testharness.js"></script>
<script src="../../resources/js-test.js"></script> <script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/compositor-controls.js"></script> <script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script> <script src="./resources/middleClickAutoscroll.js"></script>
<script> <script>
function start() { function start() {
var iframe = $('iframe');
var offsetLeft = iframe.offsetLeft;
var offsetTop = iframe.offsetTop;
description('Check pan scroll in iframe'); testSetUp({
var iframe = $('iframe'); 'clickOrDrag': 'click',
var offsetLeft = iframe.offsetLeft; 'endX': offsetLeft + 5,
var offsetTop = iframe.offsetTop; 'endY': offsetTop + 50,
'scrollable': iframe.contentDocument.body,
testPanScroll({ 'scrolledObject': iframe.contentWindow.document.scrollingElement,
'clickOrDrag': 'click', 'startX': offsetLeft + 5,
'endX': offsetLeft + 5, 'startY': offsetTop + 5,
'endY': offsetTop + 50, });
'scrollable': iframe.contentDocument.body,
'scrolledObject': iframe.contentWindow,
'startX': offsetLeft + 5,
'startY': offsetTop + 5,
});
} }
</script> </script>
</head>
<body onload="start()"> <body onload="start()">
<div id="container"> <div id="container">
<p id="description"></p> <p id="description"></p>
<iframe id="iframe" width="640" height="100"></iframe> <iframe id="iframe" width="640" height="100"></iframe>
</div> </div>
</body> </body>
</html>
PASS autoscroll started
Mouse cursor shape: type=SouthPanning hotSpot=0,0
PASS autoscroll stopped
PASS Mouse cursor cleared
PASS successfullyParsed is true
TEST COMPLETE
Top of outer div.
Inner div.
Bottom of outer div.
Test for bug 232965 This tests that vertical pan scrolling does not propagate from the inner div to the outer div when the outer div has no vertical overflow.
PASS autoscroll started
Mouse cursor shape: type=NorthEastPanning hotSpot=0,0
PASS autoscroll stopped
PASS Mouse cursor cleared
PASS outerdiv.scrollLeft is not 0
PASS outerdiv.scrollTop is 0
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html> <!DOCTYPE html>
<html> <script src="../../resources/testharness.js"></script>
<head> <script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css"> <style type="text/css">
div { div {
line-height: 50px; line-height: 50px;
} }
#outerdiv { #outerdiv {
overflow:auto; overflow:auto;
border: 2px solid #000FFF; border: 2px solid #000FFF;
} }
#innerdiv { #innerdiv {
overflow:auto; overflow:auto;
border: 2px solid #000000; border: 2px solid #000000;
width: 121%; width: 121%;
padding: 5px; padding: 5px;
} }
</style> </style>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script> <script>
function start() function start() {
{
outerdiv = $('outerdiv'); outerdiv = $('outerdiv');
testPanScroll({ testSetUp({
'clickOrDrag': 'drag', 'clickOrDrag': 'drag',
'endX': 225, 'endX': 225,
'endY': 75, 'endY': 75,
'finishTest': function() { 'finishTest': function() {
shouldNotBe('outerdiv.scrollLeft', '0'); assert_not_equals(outerdiv.scrollLeft, 0);
shouldBeZero('outerdiv.scrollTop'); assert_equals(outerdiv.scrollTop, 0);
}, },
'scrollable': outerdiv, 'scrollable': outerdiv,
'startX': 150, 'startX': 150,
...@@ -38,16 +37,14 @@ function start() ...@@ -38,16 +37,14 @@ function start()
}); });
} }
</script> </script>
</head>
<body onload="start()"> <body onload="start()">
<div id="outerdiv"> <div id="outerdiv">
<p>Top of outer div.</p> <p>Top of outer div.</p>
<div id="innerdiv"> <div id="innerdiv">
<p>Inner div.</p> <p>Inner div.</p>
</div> </div>
<p>Bottom of outer div.</p> <p>Bottom of outer div.</p>
</div> </div>
<p>Test for <a href="http://crbug.com/232965">bug 232965</a> This tests that vertical pan scrolling does not propagate from the inner div to the outer div when the outer div has no vertical overflow.</p> <p>Test for <a href="http://crbug.com/232965">bug 232965</a> This tests that vertical pan scrolling does not propagate from the inner div to the outer div when the outer div has no vertical overflow.</p>
<div id="console"></div> <div id="console"></div>
</body> </body>
</html>
<html> <!DOCTYPE html>
<head> <script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css"> <style type="text/css">
#scrollable { #scrollable {
width:500px; width:500px;
height:300px; height:300px;
overflow:auto; overflow:auto;
border:2px solid red; border:2px solid red;
padding:10px; padding:10px;
} }
</style> </style>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/compositor-controls.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script> <script>
function start() function start() {
{ testSetUp({
description('Check pan scroll in nested divs'); 'clickOrDrag': 'click',
testPanScroll({ 'scrollable': $('scrollable'),
'clickOrDrag': 'click', });
'scrollable': $('scrollable'),
});
} }
</script> </script>
</head>
<body onload="start()"> <body onload="start()">
<div id="container"> <div id="container">
<p id="description"></p> <p id="description"></p>
Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=28023">bug 28023</a> This tests that pan scrolling Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=28023">bug 28023</a> This tests that pan scrolling
propagates correctly up the DOM tree. On success, our scroll offset should be non-zero. propagates correctly up the DOM tree. On success, our scroll offset should be non-zero.
<div id="scrollable"> <div id="scrollable">
<div style="height:200px; position:relative;"> <div style="height:200px; position:relative;">
<div style="height:150px; border:1px blue solid; overflow:auto;"> <div style="height:150px; border:1px blue solid; overflow:auto;">
Panscrolling starting in the blue box should scroll the outer div. Panscrolling starting in the blue box should scroll the outer div.
</div>
Panscrolling outside the blue boxes should scroll the outer div.
</div> </div>
<div style="height:200px; position:relative;"> Panscrolling outside the blue boxes should scroll the outer div.
<div style="height:150px; border:1px blue solid; overflow:auto;"> </div>
Panscrolling starting in the blue box should scroll the outer div. <div style="height:200px; position:relative;">
</div> <div style="height:150px; border:1px blue solid; overflow:auto;">
Panscrolling starting in the blue box should scroll the outer div.
</div> </div>
</div>
</div> </div>
</div> </div>
<div id="console"></div>
</body> </body>
</html>
var autoscrollInterval = 50;
var middleButton = 1;
var middleClickAutoscrollRadius = 15; // from FrameView::noPanScrollRadius var middleClickAutoscrollRadius = 15; // from FrameView::noPanScrollRadius
var waitTimeBeforeMoveInSeconds = 0.1;
var scrollable;
var scrolledObject;
var startX;
var startY;
var endX;
var endY;
var autoscrollParam;
window.jsTestIsAsync = true; function $(id) {
return document.getElementById(id);
function $(id)
{
return document.getElementById(id);
} }
function testPanScroll(param) function testSetUp(param) {
{ // Make sure animations run. This requires compositor-controls.js.
// Make sure animations run. This requires compositor-controls.js. setAnimationRequiresRaster();
setAnimationRequiresRaster();
function finishTest() scrollable = param.scrollable;
{ scrolledObject = param.scrolledObject || scrollable;
if ($('container')) startX = param.startX || scrollable.offsetLeft + 5;
$('container').innerHTML = ''; startY = param.startY || scrollable.offsetTop + 5;
if (param.finishTest) endX = param.endX || scrollable.offsetLeft + 5;
param.finishTest(); endY = param.endY || scrollable.offsetTop + middleClickAutoscrollRadius + 6;
if (window.finishJSTest) { autoscrollParam = param;
finishJSTest(); if (!scrollable.innerHTML) {
return; for (var i = 0; i < 100; ++i) {
} var line = document.createElement('div');
if (window.testRunner) line.innerHTML = "line " + i;
testRunner.notifyDone(); scrollable.appendChild(line);
} }
}
promise_test (async () => {
// Wait until layer information has gone from Blink to CC's active tree.
await waitForCompositorCommit();
var scrollable = param.scrollable; // Start atuoscrolling.
var scrolledObject = param.scrolledObject || scrollable; if (autoscrollParam.clickOrDrag == 'click') {
await mouseMoveTo(startX, startY);
if (!scrollable.innerHTML) { await mouseClickOn(startX, startY, 'middle');
for (var i = 0; i < 100; ++i) { await mouseMoveTo(endX, endY);
var line = document.createElement('div'); } else {
line.innerHTML = "line " + i; assert_equals('drag', autoscrollParam.clickOrDrag);
scrollable.appendChild(line); mouseDragAndDrop(startX, startY, endX, endY, 'middle',
} waitTimeBeforeMoveInSeconds);
} }
var scrollStarted = false; // Wait for some scrolling, then end the autoscroll.
var scrollEnded = false; await waitFor(() => {
return scrolledObject.scrollTop > 0 || scrolledObject.scrollLeft > 0;
scrolledObject.onscroll = function() { });
if (scrollStarted) if (autoscrollParam.clickOrDrag == 'click')
return; await mouseClickOn(endX, endY, 'middle');
scrollStarted = true;
scrollEnded = false;
testPassed('autoscroll started');
var cursorInfo = internals.getCurrentCursorInfo();
debug("Mouse cursor shape: " + cursorInfo);
// Stop scrolling now // Wait for the cursor shape to go back to normal.
if (window.eventSender) { await waitFor(() => {
if (param.clickOrDrag == 'click') var cursorInfo = internals.getCurrentCursorInfo();
eventSender.mouseDown(middleButton); return cursorInfo == "type=Pointer hotSpot=0,0" ||
eventSender.mouseUp(middleButton); cursorInfo == "type=IBeam hotSpot=0,0";
} });
};
scrollable.ownerDocument.onmouseup = function(e) { finishTest();
// If we haven't started scrolling yet, do nothing. });
if (!scrollStarted || e.button != middleButton) }
return;
// Wait a while, then set scrollEnded to true
window.setTimeout(function() {
scrollEnded = true;
// Wait a bit more and make sure it's still true (we didn't keep
// scrolling).
window.setTimeout(function() {
if (scrollEnded) {
testPassed('autoscroll stopped');
} else {
testFailed('autoscroll still scrolling');
}
var cursorInfo = internals.getCurrentCursorInfo();
if (cursorInfo == "type=Pointer hotSpot=0,0" || cursorInfo == "type=IBeam hotSpot=0,0")
testPassed('Mouse cursor cleared');
else
testFailed('Mouse cursor shape: ' + cursorInfo);
finishTest();
}, autoscrollInterval * 2);
}, autoscrollInterval * 2);
};
if (!window.eventSender) function finishTest() {
return; if ($('container'))
var startX = param.startX || scrollable.offsetLeft + 5; $('container').innerHTML = '';
var startY = param.startY || scrollable.offsetTop + 5; if (autoscrollParam.finishTest)
var endX = param.endX || scrollable.offsetLeft + 5; autoscrollParam.finishTest();
var endY = param.endY || scrollable.offsetTop + middleClickAutoscrollRadius + 6;
eventSender.mouseMoveTo(startX, startY);
eventSender.mouseDown(middleButton);
if (param.clickOrDrag == 'click')
eventSender.mouseUp(middleButton);
eventSender.mouseMoveTo(endX, endY);
} }
...@@ -247,7 +247,7 @@ function mousePressOn(x, y, t) { ...@@ -247,7 +247,7 @@ function mousePressOn(x, y, t) {
// Simulate a mouse drag and drop. mouse down at {start_x, start_y}, move to // Simulate a mouse drag and drop. mouse down at {start_x, start_y}, move to
// {end_x, end_y} and release. // {end_x, end_y} and release.
function mouseDragAndDrop(start_x, start_y, end_x, end_y, button = 'left') { function mouseDragAndDrop(start_x, start_y, end_x, end_y, button = 'left', t = 0) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (chrome && chrome.gpuBenchmarking) { if (chrome && chrome.gpuBenchmarking) {
let pointerActions = [{ let pointerActions = [{
...@@ -255,7 +255,9 @@ function mouseDragAndDrop(start_x, start_y, end_x, end_y, button = 'left') { ...@@ -255,7 +255,9 @@ function mouseDragAndDrop(start_x, start_y, end_x, end_y, button = 'left') {
actions: [ actions: [
{ 'name': 'pointerMove', 'x': start_x, 'y': start_y }, { 'name': 'pointerMove', 'x': start_x, 'y': start_y },
{ 'name': 'pointerDown', 'x': start_x, 'y': start_y, 'button': button }, { 'name': 'pointerDown', 'x': start_x, 'y': start_y, 'button': button },
{ 'name': 'pause', 'duration': t},
{ 'name': 'pointerMove', 'x': end_x, 'y': end_y }, { 'name': 'pointerMove', 'x': end_x, 'y': end_y },
{ 'name': 'pause', 'duration': t},
{ 'name': 'pointerUp', 'button': button }, { 'name': 'pointerUp', 'button': button },
] ]
}]; }];
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment