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

   1 <!DOCTYPE html>
   2 <head>
   3 <style type="text/css">
   4 #scrollable {
   5     height: 200px;
   6     overflow: auto;
   7     border: solid 3px #cc0000;
   8     font-size: 80px;
   9 }
  10 </style>
  11 </head>
  12 <body>
  13 For manual testing, drag and drop "Drop Me" downwards and then upwards.
  14 <script src="../../resources/js-test.js"></script>
  15 <script>
  16
  17 var x, y, middleTermScrollOffset;
  18 var iframe, iframeDocument, draggable;
  19
  20 function setUpTest()
  21 {
  22     if (!window.eventSender) {
  23         debug('Please run within DumpRenderTree');
  24         return;
  25     }
  26
  27     iframe = document.getElementById('scrollable');
  28     // iframes start in readyState complete, but with the about:blank doc, make sure our doc is loaded.
  29     if (iframe.contentWindow.location.href == "about:blank" || iframe.contentDocument.readyState != "complete")
  30         iframe.onload = testIt;
  31     else
  32         testIt();
  33 }
  34
  35 function testIt()
  36 {
  37     eventSender.dragMode = false;
  38
  39     iframe = document.getElementById('scrollable');
  40     iframeDocument = iframe.contentDocument;
  41     draggable = iframeDocument.getElementById('draggable');
  42
  43     iframeDocument.addEventListener("scroll", recordScroll);
  44
  45     // Grab draggable.
  46     x = iframe.offsetLeft + draggable.offsetLeft + 7;
  47     y = iframe.offsetTop + draggable.offsetTop + 7;
  48
  49     eventSender.mouseMoveTo(x, y);
  50     eventSender.mouseDown();
  51
  52     // Move mouse to the bottom autoscroll border belt.
  53     y = iframe.offsetTop + iframe.offsetHeight - 10;
  54     eventSender.mouseMoveTo(x, y);
  55 }
  56
  57 function recordScroll(e)
  58 {
  59     autoscrollTestPart1();
  60     iframeDocument.removeEventListener("scroll", recordScroll);
  61 }
  62
  63 function recordScroll2(e)
  64 {
  65     autoscrollTestPart2();
  66     iframeDocument.removeEventListener("scroll", recordScroll);
  67 }
  68
  69 function autoscrollTestPart1()
  70 {
  71     if (iframe.contentDocument.scrollingElement.scrollTop == 0) {
  72         testFailed("Autoscroll should have scrolled the iframe downwards, but did not");
  73         finishTest();
  74         return;
  75     }
  76
  77     testPassed("Autoscroll should have scrolled the iframe downwards, and did.");
  78
  79     middleTermScrollOffset = iframe.contentDocument.scrollingElement.scrollTop;
  80     iframeDocument.addEventListener("scroll", recordScroll2);
  81
  82     // Move mouse to the upper autoscroll border belt.
  83     y = iframe.offsetTop + 10;
  84     eventSender.mouseMoveTo(x, y);
  85 }
  86
  87 function autoscrollTestPart2()
  88 {
  89     shouldBeTrue("iframe.contentDocument.scrollingElement.scrollTop < middleTermScrollOffset")
  90     finishTest();
  91 }
  92
  93 function finishTest()
  94 {
  95     eventSender.mouseUp();
  96     document.body.removeChild(iframe);
  97     finishJSTest();
  98 }
  99
 100 description('Check autoscroll within an inner frame by drag-and-drop');
 101 window.jsTestIsAsync = true;
 102 window.onload = setUpTest;
 103 </script>
 104 <iframe id="scrollable" src="data:text/html,
 105 <p id='draggable' draggable='true' style='cursor: hand;'>
 106     <b>Drag me!</b>
 107 </p>
 108 Try to drag and drop the text above in the input element at the bottom of this iframe. It should scroll. Then, try the way back.
 109 <br><br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br>more<br><input>
 110 "></iframe>
 111 </body>