auto_tests/tests/scrolling_div.js

   1 /**
   2  * @fileoverview Test cases for a graph contained in a scrolling div
   3  *
   4  * @author konigsberg@google.com (Robert Konigsbrg)
   5  */
   6 var ScrollingDivTestCase = TestCase("scrolling-div");
   7
   8 var point, g;
   9
  10 ScrollingDivTestCase.prototype.setUp = function() {
  11
  12 var LOREM_IPSUM =
  13     "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n" +
  14     "tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n" +
  15     "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n" +
  16     "consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n" +
  17     "cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n" +
  18     "non proident, sunt in culpa qui officia deserunt mollit anim id est\n" +
  19     "laborum.</p>";
  20
  21   document.body.innerHTML =
  22       "<div id='scroller' style='overflow: scroll; height: 450px; width: 800px;'>" +
  23       "<div id='graph'></div>" +
  24       "<div style='height:100px; background-color:green;'>" + LOREM_IPSUM + " </div>" +
  25       "<div style='height:100px; background-color:red;'>" + LOREM_IPSUM + "</div>" +
  26       "</div>";
  27
  28   var data = [
  29       [ 10, 1 ],
  30       [ 20, 3 ],
  31       [ 30, 2 ],
  32       [ 40, 4 ],
  33       [ 50, 3 ],
  34       [ 60, 5 ],
  35       [ 70, 4 ],
  36       [ 80, 6 ] ];
  37
  38   var graph = document.getElementById("graph");
  39
  40   point = null;
  41   g = new Dygraph(graph, data,
  42           {
  43             labels : ['a', 'b'],
  44             drawPoints : true,
  45             highlightCircleSize : 6,
  46             pointClickCallback : function(evt, point) {
  47               point = point;
  48             }
  49           }
  50       );
  51
  52 };
  53
  54 // This is usually something like 15, but for OS X Lion and its auto-hiding
  55 // scrollbars, it's 0. This is a large enough difference that we need to
  56 // consider it when synthesizing clicks.
  57 // Adapted from http://davidwalsh.name/detect-scrollbar-width
  58 var detectScrollbarWidth = function() {
  59   // Create the measurement node
  60   var scrollDiv = document.createElement("div");
  61   scrollDiv.style.width = "100px";
  62   scrollDiv.style.height = "100px";
  63   scrollDiv.style.overflow = "scroll";
  64   scrollDiv.style.position = "absolute";
  65   scrollDiv.style.top = "-9999px";
  66   document.body.appendChild(scrollDiv);
  67
  68   // Get the scrollbar width
  69   var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
  70
  71   // Delete the DIV
  72   document.body.removeChild(scrollDiv);
  73
  74   return scrollbarWidth;
  75 };
  76
  77 ScrollingDivTestCase.prototype.tearDown = function() {
  78 };
  79
  80 /**
  81  * This tests that when the nested div is unscrolled, things work normally.
  82  */
  83 ScrollingDivTestCase.prototype.testUnscrolledDiv = function() {
  84
  85   document.getElementById('scroller').scrollTop = 0;
  86
  87   var clickOn4_40 = {
  88     clientX: 244,
  89     clientY: 131,
  90     screenX: 416,
  91     screenY: 320
  92   };
  93
  94   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
  95   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
  96   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
  97
  98   assertEquals(40, point.xval);
  99   assertEquals(4, point.yval);
 100 };
 101
 102 /**
 103  * This tests that when the nested div is scrolled, things work normally.
 104  */
 105 ScrollingDivTestCase.prototype.testScrolledDiv = function() {
 106   document.getElementById('scroller').scrollTop = 117;
 107
 108   var clickOn4_40 = {
 109     clientX: 244,
 110     clientY: 30 - detectScrollbarWidth(),
 111     screenX: 416,
 112     screenY: 160
 113   };
 114
 115   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousemove' }));
 116   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mousedown' }));
 117   DygraphOps.dispatchCanvasEvent(g, DygraphOps.createEvent(clickOn4_40, { type : 'mouseup' }));
 118
 119   assertEquals(40, point.xval);
 120   assertEquals(4, point.yval);
 121 };