third_party/WebKit/LayoutTests/fast/events/drag-and-drop-autoscroll.html

   1 <html>
   2 <head>
   3 <style type="text/css">
   4 #draggable {
   5   padding: 5pt;
   6   border: 3px solid #00cc00;
   7   background: #00cccc;
   8   width: 80px;
   9   cursor: hand;
  10 }
  11
  12 #scrollable {
  13     height: 200px;
  14     overflow: auto;
  15     border: solid 3px #cc0000;
  16     font-size: 80px;
  17 }
  18 </style>
  19 <script>
  20 function $(id) { return document.getElementById(id); }
  21
  22 function finishTest() {
  23     eventSender.mouseUp();
  24     $('container').innerHTML = '';
  25     window.testRunner.notifyDone();
  26 }
  27
  28 function testIt() {
  29     var draggable = $('draggable');
  30     var scrollable = $('scrollable');
  31
  32     if (!window.eventSender)
  33         return;
  34
  35     eventSender.dragMode = false;
  36
  37     // Grab draggable
  38     eventSender.mouseMoveTo(draggable.offsetLeft + 5, draggable.offsetTop + 5);
  39     eventSender.mouseDown();
  40
  41     // Move mouse to autoscroll border belt.
  42     eventSender.mouseMoveTo(scrollable.offsetLeft + 5, scrollable.offsetTop + scrollable.offsetHeight - 10);
  43
  44     var retryCount = 0;
  45     var lastScrollTop = 0;
  46
  47     function checkScrolled()
  48     {
  49         if (scrollable.scrollTop > 0) {
  50             testPassed('scrollable.scrollTop > 0');
  51             lastScrollTop = scrollable.scrollTop;
  52             // Cancel drag and drop by ESC key.
  53             eventSender.keyDown('escape');
  54             retryCount = 0;
  55             window.setTimeout(checkStopped, 50);
  56             return;
  57         }
  58
  59         ++retryCount;
  60         if (retryCount > 10) {
  61             testFailed('No autoscroll');
  62             finishTest();
  63             return;
  64         }
  65
  66         // Autoscroll is occurred evey 0.05 sec.
  67         window.setTimeout(checkScrolled, 50);
  68     }
  69
  70     function checkStopped()
  71     {
  72         if (lastScrollTop == scrollable.scrollTop) {
  73             testPassed('autoscroll stopped');
  74             finishTest();
  75             return;
  76         }
  77
  78         ++retryCount;
  79         if (retryCount > 10) {
  80             testFailed('still autoscroll');
  81             finishTest();
  82             return;
  83         }
  84
  85         lastScrollTop = scrollable.scrollTop;
  86         window.setTimeout(checkStopped, 50);
  87     }
  88
  89     checkScrolled();
  90 }
  91
  92 function setUpTest()
  93 {
  94     var scrollable = $('scrollable');
  95     for (var i = 0; i < 100; ++i) {
  96       var line = document.createElement('div');
  97       line.innerHTML = "line " + i;
  98       scrollable.appendChild(line);
  99     }
 100
 101     if (!window.eventSender) {
 102         console.log('Please run within DumpRenderTree');
 103         return;
 104     }
 105
 106     window.jsTestIsAsync = true;
 107     window.setTimeout(testIt, 0);
 108 }
 109 </script>
 110 </head>
 111 <body>
 112 For manual testing, drag and drop "Drop Me" to "Scrollable" area.
 113 <div id="container">
 114 <div id="draggable" draggable="true">Drop Me</div>
 115 Scrollable
 116 <div id="scrollable">
 117 </div>
 118 </div>
 119 <div id="console"></div>
 120 <script src="../../resources/js-test.js"></script>
 121 <script>
 122 description('Check autoscroll by drag-and-drop');
 123 setUpTest();
 124 </script>
 125 </body>
 126 </html>