Commit e186dbf7 authored by Sahel Sharify's avatar Sahel Sharify Committed by Commit Bot

Convert middleClickAutoscroll.js to use gpu benchmarking

This cl converts middleClickAutoscroll.js and the middle click autoscroll
layout tests that are using it to use gpu benchmarking.

Bug: 875945
Change-Id: Ic5acb4367dd406de3e5897063bfe6b1b44e7daa6
Reviewed-on: https://chromium-review.googlesource.com/1251901Reviewed-by: default avatarNavid Zolghadr <nzolghadr@chromium.org>
Commit-Queue: Sahel Sharify <sahel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595596}
parent b8ca53ab
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>
<head>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css">
#scrollable {
height: 200px;
......@@ -8,25 +11,21 @@
font-size: 80px;
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script>
function start()
{
description('Check pan scroll by click mouse');
testPanScroll({
function start() {
testSetUp({
'clickOrDrag': 'click',
'scrollable': $('scrollable'),
});
}
</script>
</head>
<body onload="start()">
<div id="container">
<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>
<div id="console"></div>
</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>
<head>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css">
#scrollable {
height: 200px;
......@@ -8,19 +11,15 @@
font-size: 80px;
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script>
function start()
{
description('Check pan scroll by drag mouse');
testPanScroll({
function start() {
testSetUp({
'clickOrDrag': 'drag',
'scrollable': $('scrollable'),
});
}
</script>
</head>
<body onload="start()">
<div id="container">
<p id="description"></p>
......@@ -29,4 +28,3 @@ For manual testing, hold middle button in scrollable and move aroudn mouse point
</div>
<div id="console"></div>
</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>
<head>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css">
#scrollable {
height: 200px;
......@@ -8,22 +11,22 @@
font-size: 80px;
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script>
var mousedown_fired = false;
window.addEventListener('mousedown', function(event) {
mousedown_fired = true;
});
function start()
{
description('Check pan scroll with mousedown event handler');
testPanScroll({
function start() {
testSetUp({
'clickOrDrag': 'drag',
'scrollable': $('scrollable'),
'finishTest': function() {
assert_true(mousedown_fired);
},
});
}
</script>
</head>
<body onload="start()">
<div id="container">
<p id="description"></p>
......@@ -34,4 +37,3 @@ To test manually, try to pan scroll inside this div.
</div>
<div id="console"></div>
</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>
<head>
<script src="../../resources/js-test.js"></script>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script>
function start() {
description('Check pan scroll in iframe');
var iframe = $('iframe');
var offsetLeft = iframe.offsetLeft;
var offsetTop = iframe.offsetTop;
testPanScroll({
testSetUp({
'clickOrDrag': 'click',
'endX': offsetLeft + 5,
'endY': offsetTop + 50,
'scrollable': iframe.contentDocument.body,
'scrolledObject': iframe.contentWindow,
'scrolledObject': iframe.contentWindow.document.scrollingElement,
'startX': offsetLeft + 5,
'startY': offsetTop + 5,
});
}
</script>
</head>
<body onload="start()">
<div id="container">
<p id="description"></p>
<iframe id="iframe" width="640" height="100"></iframe>
</div>
</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>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css">
div {
line-height: 50px;
......@@ -16,20 +18,17 @@ div {
padding: 5px;
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script>
function start()
{
function start() {
outerdiv = $('outerdiv');
testPanScroll({
testSetUp({
'clickOrDrag': 'drag',
'endX': 225,
'endY': 75,
'finishTest': function() {
shouldNotBe('outerdiv.scrollLeft', '0');
shouldBeZero('outerdiv.scrollTop');
assert_not_equals(outerdiv.scrollLeft, 0);
assert_equals(outerdiv.scrollTop, 0);
},
'scrollable': outerdiv,
'startX': 150,
......@@ -37,7 +36,6 @@ function start()
});
}
</script>
</head>
<body onload="start()">
<div id="outerdiv">
<p>Top of outer div.</p>
......@@ -49,4 +47,3 @@ function start()
<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>
</body>
</html>
<html>
<head>
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<style type="text/css">
#scrollable {
width:500px;
height:300px;
overflow:auto;
border:2px solid red;
padding:10px";
padding:10px;
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="./resources/middleClickAutoscroll.js"></script>
<script>
function start()
{
description('Check pan scroll in nested divs');
testPanScroll({
function start() {
testSetUp({
'clickOrDrag': 'click',
'scrollable': $('scrollable'),
});
}
</script>
</head>
<body onload="start()">
<div id="container">
<p id="description"></p>
......@@ -41,6 +41,4 @@ propagates correctly up the DOM tree. On success, our scroll offset should be no
</div>
</div>
</div>
<div id="console"></div>
</body>
</html>
var autoscrollInterval = 50;
var middleButton = 1;
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)
{
function $(id) {
return document.getElementById(id);
}
function testPanScroll(param)
{
function finishTest()
{
if ($('container'))
$('container').innerHTML = '';
if (param.finishTest)
param.finishTest();
if (window.finishJSTest) {
finishJSTest();
return;
}
if (window.testRunner)
testRunner.notifyDone();
}
var scrollable = param.scrollable;
var scrolledObject = param.scrolledObject || scrollable;
function testSetUp(param) {
scrollable = param.scrollable;
scrolledObject = param.scrolledObject || scrollable;
startX = param.startX || scrollable.offsetLeft + 5;
startY = param.startY || scrollable.offsetTop + 5;
endX = param.endX || scrollable.offsetLeft + 5;
endY = param.endY || scrollable.offsetTop + middleClickAutoscrollRadius + 6;
autoscrollParam = param;
if (!scrollable.innerHTML) {
for (var i = 0; i < 100; ++i) {
var line = document.createElement('div');
......@@ -35,56 +27,39 @@ function testPanScroll(param)
scrollable.appendChild(line);
}
}
var noModeScroll = false;
var scrolled = false;
scrolledObject.onscroll = function() {
if (noModeScroll) {
testFailed('still autoscroll');
finishTest();
return;
promise_test (async () => {
// Start atuoscrolling.
if (autoscrollParam.clickOrDrag == 'click') {
await mouseMoveTo(startX, startY);
await mouseClickOn(startX, startY, 'middle');
await mouseMoveTo(endX, endY);
} else {
assert_equals('drag', autoscrollParam.clickOrDrag);
mouseDragAndDrop(startX, startY, endX, endY, 'middle',
waitTimeBeforeMoveInSeconds);
}
if (scrolled)
return;
scrolled = true;
testPassed('autoscroll started');
var cursorInfo = internals.getCurrentCursorInfo();
debug("Mouse cursor shape: " + cursorInfo);
if (window.eventSender) {
if (param.clickOrDrag == 'click')
eventSender.mouseDown(middleButton);
eventSender.mouseUp(middleButton);
}
};
// Wait for some scrolling, then end the autoscroll.
await waitFor(() => {
return scrolledObject.scrollTop > 0 || scrolledObject.scrollLeft > 0;
});
if (autoscrollParam.clickOrDrag == 'click')
await mouseClickOn(endX, endY, 'middle');
scrollable.ownerDocument.onmouseup = function(e) {
if (!scrolled || e.button != middleButton)
return;
noMoreScroll = true;
window.setTimeout(function() {
testPassed('autoscroll stopped');
// Wait for the cursor shape to go back to normal.
await waitFor(() => {
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);
return cursorInfo == "type=Pointer hotSpot=0,0" ||
cursorInfo == "type=IBeam hotSpot=0,0";
});
finishTest();
}, autoscrollInterval * 2);
};
});
}
if (!window.eventSender)
return;
var startX = param.startX || scrollable.offsetLeft + 5;
var startY = param.startY || scrollable.offsetTop + 5;
var endX = param.endX || scrollable.offsetLeft + 5;
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);
function finishTest() {
if ($('container'))
$('container').innerHTML = '';
if (autoscrollParam.finishTest)
autoscrollParam.finishTest();
}
......@@ -242,7 +242,7 @@ function mousePressOn(x, y, t) {
// Simulate a mouse drag and drop. mouse down at {start_x, start_y}, move to
// {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) => {
if (chrome && chrome.gpuBenchmarking) {
let pointerActions = [{
......@@ -250,7 +250,9 @@ function mouseDragAndDrop(start_x, start_y, end_x, end_y, button = 'left') {
actions: [
{ 'name': 'pointerMove', 'x': start_x, 'y': start_y },
{ 'name': 'pointerDown', 'x': start_x, 'y': start_y, 'button': button },
{ 'name': 'pause', 'duration': t},
{ 'name': 'pointerMove', 'x': end_x, 'y': end_y },
{ 'name': 'pause', 'duration': t},
{ '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