middleClickAutoscroll-panIcon.html | Explore in Territory

<html>
<head>
<style type="text/css">
#draggable {
  padding: 5pt;
  border: 3px solid #00cc00;
  background: #00cccc;
  width: 80px;
  cursor: hand;
}

#scrollable {
    height: 200px;
    overflow: auto;
    border: solid 3px #cc0000;
    font-size: 80px;
}
</style>
<script>
function $(id) { return document.getElementById(id); }
var MIDDLE_BUTTON = 1;
var PAN_SCROLL_RADIUS = 15; // from FrameView::noPanScrollRadius

function setUpTest()
{
    var scrollable = $('scrollable');
    for (var i = 0; i < 10; ++i) {
      var line = document.createElement('div');
      line.innerHTML = "line " + i;
      scrollable.appendChild(line);
    }

    if (!window.eventSender)
        return;

    // Start pan scroll by click
    eventSender.mouseMoveTo(scrollable.offsetLeft + 5, scrollable.offsetTop + 5);
    eventSender.mouseDown(MIDDLE_BUTTON);
    eventSender.mouseUp(MIDDLE_BUTTON);

    // Stop pan scroll by click
    eventSender.mouseDown(MIDDLE_BUTTON);
    eventSender.mouseUp(MIDDLE_BUTTON);
}
</script>
</head>
<body>
You should run this test in DRT.
<br>
For manual testing, hold middle button in scrollable and move aroudn mouse pointer for scrolling, then release middle button to stop scrolling.
You won't see pan icon after pan scroll.
<div id="container">
Scrollable
<div id="scrollable">
</div>
</div>
<script>
setUpTest();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/events/middleClickAutoscroll-panIcon.html
